@charset "UTF-8";

/* Body starts, dont edit! */

body {
	margin: 0;
	padding: 150;
	text-align: center;
	background-repeat:repeat;
	background-color: RGB(217,217,217);
	background-position: center top;
	font-family:"Avant Garde Book", "Avant Garde", "Century Gothic", "verdana", Verdana;
	background-image: url(../images/background.jpg)
}


.wrapper {
	top: absolute;
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	text-align: left;
	height: 1550px;
	margin-top:0;
	background-image: url(../images/lion.gif);
	background-attachment: fixed;
	background-position: center top;
	overflow: visible;
	background-repeat:no-repeat;
	margin-bottom: 300px;
}

#center {
width:100%;
padding-top:134px;
}
#banner { /* Banner's DIV */
	width:527px;
	height:140px;
	padding-left:216px;
	padding-bottom: 75px;
}

#bars { 

width:960px;
height:10px;
background-image: url(../images/bars.gif);
	background-attachment: fixed;
	background-position: center top;
	overflow: visible;
	
}
#bars2{ 
padding-bottom: 50px;
width:960px;
height:10px;
background-image: url(../images/bars.gif);

	background-position: center top;
	background-repeat: no-repeat;
	
}
#links { 

	width:960px;
	height:24px;
}
#contact { 
padding-left:367px;
padding-top:4px;
float:left;
width:66px;
height:14px;
}
#about { 
padding-top:4px;
float:left;
padding-left:110px;
width:50px;
height:14px;
}

#gallery {
padding-top:50px;
padding-left:100px;
width:350;
height:150;
background: transparent;
float:left;
}
#gallery2 {
padding-top:50px;
padding-left:60px;
width:350;
height:150;
float:left;
}

}
a:link {	color: rgb(64,64,64);	text-decoration: none;} /* Basic link styls */
a:visited {	color: rgb(64,64,64);	text-decoration: none;}
a:hover {	color: rgb(175,175,175);	text-decoration: none;}
a:active {	color: rgb(64,64,64);	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: 11px;	line-height: 20px;} /* Maintext */

#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:328px;
	z-index:2;
	left: 401px;
	top: 25px;
}
#subpage_title { /* Services and Contact title DIV */
	position:absolute;
	width:718px;
	height:43px;
	z-index:1;
	left: 30px;
	top: 21px;
}
#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;
	
}
.featured_work {
	padding: 0px;
	}
IMG {
	border: none;
}
A:hover IMG, A:active IMG {border: none }	
	
#workpage_content_left { /* Workpages left column */
	position:absolute;
	width:719px;
	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: 100px;
	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 */
	width:350px;
	height:150px;
	left: 0px;
	top: 0px;
	visibility: visible;
}
.slider-wrap { /* Coda Slider's stuff */
	position: relative;
	width: 100%;
	height:150px;
	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: 85px;
}
#info { /* Your contact information */
	position:absolute;
	width:176px;
	height:259px;
	z-index:3;
	left: 257px;
	top: 85px;
}
#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;
		}
		.stripViewer .panelContainer .panel2 ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		.stripViewer .panelContainer .panel3 ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		

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

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			padding: auto;
			width: 350px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 150px;
			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: 350px; /* Also specified in  .stripViewer  above */
		}
		
				.stripViewer .panelContainer .panel2 { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 350px; /* Also specified in  .stripViewer  above */
		}
		.stripViewer .panelContainer .panel4 { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 350px; /* Also specified in  .stripViewer  above */
		}
		.stripViewer .panelContainer .panel5 { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 350px; /* Also specified in  .stripViewer  above */
		}
		.stripViewer .panelContainer .panel6 { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 350px; /* Also specified in  .stripViewer  above */
		}
		.stripViewer .panelContainer .panel7 { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 350px; /* Also specified in  .stripViewer  above */
		}
		.stripViewer .panelContainer .panel8 { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 350px; /* Also specified in  .stripViewer  above */
		}
		.stripViewer .panelContainer .panel9 { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 350px; /* Also specified in  .stripViewer  above */
		}
		.stripViewer .panelContainer .panel10{ /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 350px; /* Also specified in  .stripViewer  above */
		}
		.stripViewer .panelContainer .panel3 { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 350px; /* 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;
		}
	
		.stripViewer .panelContainer .panel .wrapper3 { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 0px;
		}

		.stripViewer .panelContainer .panel .wrapper4 { /* 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;
		}