/* SDS CSS Document */

/* Colours - Green= #007236 Brown= #603913 */


/*Default DIV Styles*/
* {
	margin: 0;
	padding: 0;
	}
	
#container {
	 margin: 0px auto;
	 border: 0px;
	 text-align: left;
	 width: 950px !important;
	 width /**/: 950px;
	 margin-top: 50px;
	 height: auto;
	 background-color:#FFFFFF;
	 padding: 0px 0px 15px 0px;
	 }	


#content {
	width:920px;
	height:460px;
	background-color: #CCCCCC;
	margin:0px 15px 0px 15px;
	}
	
#tag{
	display:block;
	height:12px;
	width: 920px;
	text-align:right;
	background-color:#FFFFFF;
	padding:3px 0px 0px 0px;
	margin:0px 15px 0px 15px;
	}
#navigation {
	display:block;
	height:37px;
	width: 920px;
	text-align:right;
	padding:3px 0px 0px 0px;
	margin:0px 15px 0px 15px;
	text-transform:uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	background-color:#FFFFFF;
	}
	
#info{
	position:absolute;
	width: 600px;
	height:200px;
	z-index:1;
	margin: 110px 160px;
	padding: 5px;
	opacity: 0.00;
	}
#info:hover{
	background: #999999;
	opacity: 1;
	color:#FFFFFF;
	}
#info:hover h2{
	text-transform:uppercase;
	font-size:10px;
	}
#info p.left{
	width: 150px;
	height: 170px;
	border-right: 1px dotted #666666;
	float: left;
	}
#info p.right{
	width: 430px;
	height: 170px;
	float: right;
	}

/*main navigation styles */

#navigation a{
	text-transform:uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#000000;
	font-weight:bold;
	text-decoration:none;
	padding: 0px 0px 0px 25px;
	}
#navigation a:hover{
	color: #333333;
	}
	
/* Portfolio navigation and background styles */	
	
	 
#folio{
	width:920px;
	height:460px;
	}

#folio ul{
	padding: 0;
  	margin:  0;
  	width:920px;
	list-style:none;
	display:block;
	height:460px;
	background:transparent url(http://www.scampdoodlesketch.com/assets/ulbg.gif) bottom repeat-x;
  } 

#folio li{
	display: inline;
	background:#999999;
	
	}
  
#folio li a {
 	margin:  0;
	float:   left;
	padding: 0;
	height:  30px;
	width: 98px;
	_width: 110px;
	w\idth: 98px;
	display: block;
	line-height: 15px;
	margin: 420px 0px 0px 0px;
	background-color:#999999;
	padding: 4px 5px 5px 5px;
	text-transform:uppercase;
	font-size: 10px;
	text-decoration:none;
	color:#ffffff;
	font-weight:bold;
	border-top: 1px solid #999999;
	border-left: 1px solid #999999;
	border-right: 1px solid #999999;
}

#folio li a span {
	clear: right;
	display: block;
	text-align:center;
	text-transform:uppercase;
	font-size: 10px;
	text-decoration:none;
	color:#ffffff;
	font-weight:bold;
}

#folio li a:hover span {
	clear: right;
	display: block;
	text-align:center;
	text-transform:uppercase;
	font-size: 10px;
	text-decoration:none;
	color:#000000;
	font-weight:bold;
}

#folio li a:hover {
	text-decoration: none;
	color: #000000;
	background-color: #ffffff;
	height:  50px;
	margin: 400px 0px 0px 0px;
}
#folio li a.first, #folio li a.last{
	width:10px;
	background:#999999;
	text-align:center;
	font-size:16px;
	font-weight:normal;
	color:#FFFFFF;
	padding-top: 13px;
	height: 22px;
	border: none;
	}
#folio li a.last{
	float: right;
	}
	
#folio li a.previous{
	width:10px;
	background:#000000 url(http://www.scampdoodlesketch.com/assets/previous.gif) top no-repeat;
	text-align:center;
	font-size:16px;
	font-weight:normal;
	color:#FFFFFF;
	padding-top: 13px;
	height: 22px;
	border: none;
	}
	 
#folio li a.next{
	width:10px;
	background:#000000 url(http://www.scampdoodlesketch.com/assets/next.gif) top no-repeat;
	text-align:center;
	font-size:16px;
	font-weight:normal;
	color:#FFFFFF;
	padding-top: 13px;
	height: 22px;
	border: none;
	}
#folio li a.previous:hover {
	text-decoration: none;
	color: #000000;
	background:#ffffff url(http://www.scampdoodlesketch.com/assets/previous_hover.gif) top no-repeat;
	height:  22px;
	margin: 420px 0px 0px 0px;
}



#folio li a.next:hover {
	text-decoration: none;
	color: #000000;
	background:#ffffff url(http://www.scampdoodlesketch.com/assets/next_hover.gif) top no-repeat;
	height:  22px;
	margin: 420px 0px 0px 0px;
}
#folio li a.first:hover, #folio li a.last:hover {
	text-decoration: none;
	color: #000000;
	background:#999999;
	height:  22px;
	margin: 420px 0px 0px 0px;
} 
	
.title {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	display:block;
	height:35px;
	font-weight:bold;
	color:#000000;
	text-transform:uppercase;
	text-align:center;
	margin-top:2px;
	}
	
.description {
	font-size:11px;
	display:block;
	height:auto;
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	}
	
/* Text Styles */
	
body{
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 11px;
	margin-bottom: 0px;
	text-align: left;
	margin-left: 0px;
	background-color:#363636;
	}
p{
	font-family:Arial, Helvetica, Verdana, sans-serif;
	font-size: 11px;
	line-height:normal;
	margin-bottom: 0px;
	text-align: left;
	margin-left: 0px;

}


h2{
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 13px;
	line-height:15px;
	margin-bottom: 0px;
	text-align: left;
	margin-left: 0px;
	
	}

	
/* Normal Links Colours */	
a:link {
	color:#FFFFFF;
	font-family:Arial, Helvetica, Verdana, sans-serif;
	text-decoration: underline;
	}
a:visited {
	color:#FFFFFF;
	font-family:Arial, Helvetica, Verdana, sans-serif;
	text-decoration:underline;
	}
a:hover {
	color:#FFFFFF;
	font-family:Arial, Helvetica, Verdana, sans-serif;
	text-decoration:none;
	}
a:active {
	color:#FFFFFF;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	text-decoration: underline;
	}



input, option, select, textarea 
	{ 
	color: #000000;
	background-color:#FFFFFF;
	font-size: 11px;
	line-height: normal;
	font-weight: normal;
	text-decoration: none;
	font-family: Arial, Helvetica, Verdana, sans-serif; 
	text-align: left;
	border: 1px solid #999999;
	padding: 2px;
	margin: 2px 0px 2px 0px;
	width: 200px;
	}
#button{
	width: 75px;
	text-align:center;
	text-transform:uppercase;
	font-weight:bold;
	padding:1px 0px 0px 0px;
	font-size:10px;
	}
#button:hover{
	color:#666666;
	}
/* Show Hide Styles */


/* This CSS is just for presentational purposes. */
#wrap {
	background-color: #fff; 
	position:absolute;
	z-index:1;
	margin: 5px 0 0 5px;
	padding: 3px;
	width:605px;
	_width: 599px;
	w\idth: 599px;
/* Ignored from I.E Mac \*/
	width: auto;
/* end */
	max-width: 599px;
	}
#wrap p.left{
	width: 128px;
	height: auto;
	float: left;
	}
#wrap p.right{
	width: 430px;
	height: auto;
	float: left;
	border-left: 1px dotted #666666;
	padding:0px 20px 0px 20px;
	}
#wrap h2{
	font-size:10px;
	text-transform:uppercase;
	}

/* This CSS is used for the Show/Hide functionality. */
.more {
	display: none;
	}
a.showLink, a.hideLink {
	text-decoration: none;
	color: #000000;
	font-size: 10px;
	font-weight:bold;
	clear:both;
	text-transform:uppercase;
	z-index:1;
	}
a.showLink:hover, a.hideLink:hover {
	color: #666666;
	 }
	 

/* Work Display */
#wrap p.left a.visit_url{
	text-decoration:none;
	color:#000000;
	margin: 10px 0px 0px 0px;
	padding: 10px 0px 0px 0px;
	display:block;
	text-transform:uppercase;
	font-weight:bold;
	border-top:1px dotted #666666;
	font-size: 10px;
	}
#wrap p.left a.visit_url:hover{
	text-decoration:none;
	color:#666666;
	}
#wrap p.left a.watch_movie{
	text-decoration:none;
	color:#000000;
	margin: 10px 0px 0px 0px;
	padding: 10px 0px 0px 13px;
	background:url(http://www.scampdoodlesketch.com/assets/play_icon.gif) no-repeat top left;
	background-position: 0px 12px;
	display:block;
	text-transform:uppercase;
	font-weight:bold;
	border-top:1px dotted #666666;
	font-size: 10px;
	}
#wrap p.left a.watch_movie:hover{
	text-decoration:none;
	color:#666666;
	}
	
#wrap p.left span.work_client{
	display:block;
	margin: 0px 0px 0px 0px;
	color: #666666;
	}
#wrap p.right a{
	color:#000000;
	text-decoration:none;
	}
#wrap p.right a:hover{
	color:#666666;
	}

/* Static Text */
#static {
	background-color: #fff; 
	position:absolute;
	z-index:1;
	margin: 5px 0 0 5px;
	padding: 3px;
	width:599px;
	_width:605px;
	}
#static_right {
	background-color: #fff; 
	position:absolute;
	z-index:1;
	margin: 5px 5px 0px 615px;
	padding: 3px;
	width:294px;
	_width:300px;
	w\idth:294px;
	height:auto;
	}	
	
#static h2, #static_right h2{
	font-size:10px;
	text-transform:uppercase;
	font-weight:bold;
	color:#000000;
	}
#static p{
	font-size:11px;
	color:#000000;
	}
#static.info{
	width: 599px;
	_width: 605px;
	w\idth:599px;
	}
	
/* Preload Images */
.preload {
	display:none;
	}

/* Indx Styles */
#index {
	position:absolute;
	z-index:1;
	margin: 188px 0 0 0px;
	padding: 0px;
	width:550px;
/* Ignored from I.E Mac \*/
	width: auto;
/* end */
	height:auto;
	}

#index h1{
	font-size: 29px;
	background-color:#ffffff;
	color:#000000;
	text-transform:uppercase;
	padding: 2px 5px 1px 1px;
	margin: 0px 0px 0px 0px;
	display:compact;
	}
#index h1 span{
	font-size: 16px;
	background-color:#ffffff;
	color:#999999;
	text-transform:uppercase;
	padding: 0px 5px 0px 1px;
	margin: 0px 0px 5px 0px;
	display:block;
	}
	
/* education */
#static_right ol.education li.edudate{
	display:compact;
	float:left;
	margin: 0px 5px 0px 0px;
	background-color:#FFFFFF;
	font-weight:bold;
	}
#static_right ol.education li.educourse{
	display:compact;
	float:left;
	margin: 0px 0px 0px 0px;
	background-color:#FFFFFF;
	font-weight:bold;
	}
#static_right ol.education li.eduuni{
	display:block;
	float:left;
	margin: 0px 0px 5px 0px;
	background-color:#FFFFFF;
	}
#static_right ol.education{
	display:block;
	clear:both;
	background-color:#FFFFFF;
	}
#static_right ol.education li.clear
	{
	clear:both;
	display:block;
	margin: 1px 0px 1px 0px;
	background-color:#FFFFFF;
	height: 2px;
	}
/*pop up blanket */
#blanket {
	background-color:#000000;
	opacity: 0.85;
	filter:alpha(opacity=85);
	position:absolute;
	z-index: 9001;
	top:0px;
	left:0px;
	width:100%;
}
#popUpDiv {
	position:absolute;
	background-color:#eeeeee;
	width:480px;
	height:410px;
	padding: 10px 10px 10px 10px;
	z-index: 9002;
	}
a.popupclose{
	text-transform:uppercase;
	color:#000000;
	font-size:10px;
	text-decoration:none;
	float:right;
	margin: 10px 0px 0px 0px;
	font-weight:bold;
	}
a.popupclose:hover{
	text-transform:uppercase;
	color:#999999;
	font-size:10px;
	text-decoration:none;
	}
#popUpDiv h2{
	text-transform:uppercase;
	color:#000000;
	font-size:10px;
	font-weight:bold;
	margin: 10px 0px 0px 0px;
	float: left;
	}
#contact_form{
	margin:10px 0px 10px 0px;
	width:290px;
	}
#contact_form tr td.formlabel{
	padding:5px 2px 2px 0px;
	}
.required{
	background:#eeeeee;
	}
.links a{
	color:#000000;
	font-weight:bold;
	display: block;
	margin: 10px 0px 0px 0px;
	text-decoration:none;
	}
.links a:hover{
	color:#999999;
	font-weight:bold;
	display: block;
	margin: 10px 0px 0px 0px;
	text-decoration:none;
	}