@charset "UTF-8";

/* Body starts, dont edit! */

body {
	margin: 0;
	padding: 0;
	text-align: center;
	background-image: url(../images/background.jpg); /* Background image */
	background-repeat: no-repeat;
	background-color: #0E0C0C;
	background-position: center top;
}

.wrapper {
	position: relative;
	top: 0px;
	right: 0;
	margin: 0 auto;
	width: 960px;
	text-align: left;
	height: 800px;
	left: 0px;
}
#banner { /* Banner's DIV */
	position:absolute;
	width:779px;
	height:295px;
	z-index:2;
	left: 170px;
	top: 51px;
}
#content { /* Content */
	position:absolute;
	width:782px;
	height:380px;
	z-index:3;
	left: 169px;
	top: 346px;
}
#menu { /* Menu on the left side */
	position:absolute;
	width:142px;
	height:84px;
	z-index:4;
	left: 8px;
	top: 227px;
	background-color: #FFFFFF; /* Menu's background color */
	padding-right: 20px;
	padding-top: 15px;
	height: 125px;
}
#nametitle { /* Name titles */
	position:absolute;
	width:195px;
	height:90px;
	z-index:5;
	left: -25px;
	top: 134px;
	padding-right: 20px;
	bottom: 576px;
}
a:link {	color: #787878;	text-decoration: none;} /* Basic link styls */
a:visited {	color: #787878;	text-decoration: none;}
a:hover {	color: #000000;	text-decoration: none;}
a:active {	color: #787878;	text-decoration: none;}

.name {					font-family: Georgia, "Times New Roman", Times, serif;	font-size: 21px;	font-style: italic;	color: #FFFFFF;	line-height: 26px; } /* Name style, big white! */

.links {				font-family: Georgia, "Times New Roman", Times, serif;	font-size: 16px;	color: #676767;	font-style: italic;	line-height: 16px; } /* Menu's link styles */

.quicklinks {			font-family: Georgia, "Times New Roman", Times, serif;	font-size: 16px;	color: #848484;	font-style: italic;	line-height: 21px; } /* Quicklinks */
.quicklinks a:link {	color: #848484;	}
.quicklinks a:visited {	color: #848484; }
.quicklinks a:hover {	color: #FFFFFF; }
.quicklinks a:active {	color: #848484;	}

.description {			font-family: Georgia, "Times New Roman", Times, serif;	font-size: 16px;	color: #848484;	font-style: italic;	line-height: 16px; } /* Descriptio, graphic designer, phone number and mail */
.description a:link {	color: #848484;	}
.description a:visited {color: #848484; }
.description a:hover {	color: #FFFFFF; }
.description a:active {	color: #848484;	}


.text_link a:link {		color: #c0c0c0;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	padding: 10px 13px 10px 13px;		background-color: #111010;		border: 0px;} /* Link style with a box */
.text_link a:visited {	color: #c0c0c0;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	padding: 10px 13px 10px 13px;		background-color: #111010;		border: 0px;}
.text_link a:hover {	color: #FFFFFF;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	padding: 10px 13px 10px 13px;		background-color: #2e2a2a;		border: 0px;} 
.text_link a:active {	color: #c0c0c0;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	padding: 10px 13px 10px 13px;		background-color: #111010;		border: 0px;}

.number_link a:link {		color: #c0c0c0;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	padding: 7px 10px 7px 10px;		background-color: #000000;		border: 0px;} /* CodaSlider's number boxes */
.number_link a:visited {	color: #c0c0c0;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	padding: 7px 10px 7px 10px;		background-color: #000000;		border: 0px;}
.number_link a:hover {	color: #FFFFFF;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	padding: 7px 10px 7px 10px;		background-color: #2e2a2a;		border: 0px;} 
.number_link a:active {	color: #c0c0c0;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 10px;	padding: 7px 10px 7px 10px;		background-color: #000000;		border: 0px;}



.topictitles {	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 26px;	color: #FFFFFF;		font-style: italic; } /* Topictitles, big whites again */
.helptitles {	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 16px;	line-height: 16px;	color: #535353;		font-style: italic; } /* Help titles, small gray ones */
.maintext {		font-family: Verdana, Arial, Helvetica, sans-serif;		color: #959595;		font-size: 16px;	line-height: 20px;} /* Maintext */
.righthometext{		font-family: Verdana, Arial, Helvetica, sans-serif;		color: #959595;		font-size: 20px;	line-height: 20px;} /* righthometext */
#quicklinks { /* Quicklinks DIV */
	position:absolute;
	width:146px;
	height:140px;
	z-index:6;
	left: 4px;
	top: 347px;
	padding-top: 20px;
	padding-right: 20px;
}
#leftcolumn { /* Homepage's left column with title and help title */
	position:absolute;
	width:338px;
	height:328px;
	z-index:1;
	left: 30px;
	top: 25px;
}
#rightcolumn { /* Homepage's right column with title and help title */
	position:absolute;
	width:338px;
	height:329px;
	z-index:2;
	left: 423px;
	top: 25px;
}
#subpage_title { /* Services and Contact title DIV */
	position:absolute;
	width:718px;
	height:67px;
	z-index:1;
	left: 47px;
	top: -278px;
}
#subpage_content_left { /* Services and Contact left column div */
	position:absolute;
	width:360px;
	height:279px;
	z-index:1;
	left: 30px;
	top: 70px;
}
#subpage_content_right { /* Services and Contact right column DIV */
	position:absolute;
	width:348px;
	height:255px;
	z-index:1;
	left: 416px;
	top: 70px;
}
#workpage_title { /* Workpage's title */
	position:absolute;
	width:718px;
	height:43px;
	z-index:1;
	left: 30px;
	top: 49px;
}
#workpage_content_left { /* Workpages left column */
	position:absolute;
	width:497px;
	height:273px;
	z-index:1;
	left: 30px;
	top: 90px;
}
#workpage_content_right { /* Workpages right column, the one with My Role -texts */
	position:absolute;
	width:194px;
	height:219px;
	z-index:1;
	left: 554px;
	top: 90px;
}


#header_text { /* Header DIV */
	position:absolute;
	width:200px;
	height:100px;
	z-index:1;
	left: 0px;
	top: 197px;
}
#featured_work { /* Featured Work DIV */
	position:absolute;
	width:200px;
	height:102px;
	z-index:1;
	left: 0px;
	top: 198px;
}
#next_project { /* Next project DIV */
	position:absolute;
	width:119px;
	height:39px;
	z-index:3;
	left: 649px;
	top: 246px;
}
#featured_text { /* Featured text location DIV */
	position:absolute;
	width:313px;
	height:60px;
	z-index:4;
	left: 243px;
	top: 225px;
}
.smallwork {color: #c5c5c5; line-height: 21px;} /* Homepage's featured work, small text */
.titlework {font-size: 26px} /* Homepage's featured work, big text */

#copyright { /* Copyright */
	position:absolute;
	width:356px;
	height:24px;
	z-index:7;
	left: 180px;
	top: 734px;
}
#codaslider { /* Coda Slider DIV */
	position:absolute;
	width:779px;
	height:295px;
	z-index:4;
	left: 0px;
	top: -20px;
	visibility: visible;
}
.slider-wrap { /* Coda Slider's stuff */
	margin: 20px 0;
	position: relative;
	width: 100%;
	left: 0px;
	top: 0px;
}
.style1 {color: #FFFFFF}
#boxslider { /* Boxnubmer */
	position:absolute;
	width:290px;
	height:31px;
	z-index:2;
	left: 29px;
	top: 8px;
}

#photo { /* Your photo */
	position:absolute;
	width:200px;
	height:115px;
	z-index:2;
	left: 31px;
	top: 35px;
}
#info { /* Your contact information */
	position:absolute;
	width:317px;
	height:259px;
	z-index:3;
	left: 483px;
	top: 30px;
}
#form { /* Form DIV */
	position:absolute;
	width:366px;
	height:255px;
	z-index:4;
	left: 448px;
	top: 84px;
}

.fields {	color: #FFFFFF;	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	padding: 6px;	margin: 6px 0 0 0; background-color: #242424;	border: 0px;} /* Form field style */

.button {	color: #FFFFFF;	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	margin-top: 6px; padding: 5px 10px 5px 10px;	background-color: #242424;	border: 0px;} /* Button style */


/* CODASLIDER STARTS, DO NOT EDIT */

		
		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 295px; overflow: scroll}
		.csw .loading {margin: 200px 0 295px 0; text-align: center}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: auto;
			width: 779px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 295px;
			clear: both;
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 779px; /* Also specified in  .stripViewer  above */
		}
		
		.stripViewer .panelContainer .panel .wrapper2 { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 0px;
		}
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			margin: auto;
			display: none;

		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
		}
		
		.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */
		}
		
		.stripNav a { /* The nav links */
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			line-height: 32px;
			background: #c6e3ff;
			color: #000;
			text-decoration: none;
			display: block;
			padding: 0 15px;
		}
		
		.stripNav a:hover {
			background: #9cf;
		}
		
		.stripNav a.current {
			background: #39c;
			color: #fff;
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 230px;
			text-indent: -9000em;
			display: none;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
			display: none;
		}
		
		.stripNavL {
			left: 0;
		}
		
		.stripNavR {
			right: 0;
		}
a:hover
{
	color: #ff320a;
	border-bottom: dashed 1px;
	
}