/* -------------------------------------------------------------- 
  
   Boilerplate Screen Styles
   * Version:   0.5 (2007-11-19)
   
   COLORS:
	red		#9f1802
	orange	#9f5b02
   
-------------------------------------------------------------- */

@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";


/* Page
-------------------------------------------------------------- */
body {
	background: #d9d9d1 url(img/bg2.jpg) repeat; 
	margin: 0;
	}
#page { 
	margin: 0 auto; width: 960px; 
	position: relative;
	}
#header {
	width: 100%;
	position: relative;
	height: 180px;
	}
	/* #header
	-------------------------------------------------------------- */
	#header h1, #header h2 { 
		margin: 0; padding: 0;
		}
	#header h1 a {
		width: 460px; height: 110px;
		display: block;
		float: left;
		margin: 40px 0 0 10px;
		background: url(img/Supermega-Design-logo.jpg) no-repeat top left;
		text-indent: -9999px;
		}
	#header h2 {
		width: 240px; height: 60px;
		position: absolute;
		top: 0; right: 0;
		background: url(img/612-208-MEGA.jpg) no-repeat top right;
		text-indent: -9999px;
		border-bottom: none;
		}	
	#header a#clients {
		width: 120px; height: 60px;
		display: block;
		position: absolute;
		top: 0; right: 240px;
		background: url(img/client-support.jpg) no-repeat top left;
		text-indent: -9999px;
		}	
		#header a#clients:hover {
			background: url(img/client-support.jpg) no-repeat top right;
			}
#header #call a {
	display: block;
	width: 340px; height: 37px; 
	background: url(img/call612-208-MEGA.jpg) no-repeat top left;
	text-indent: -9999px;
	position: absolute;
	top: 90px; right: 20px;
	} 
				
/* #primary-links
-------------------------------------------------------------- */			
ul#primary-links, ul#primarylinks li {
	margin: 0; padding: 0;
	}
	ul#primary-links {
		float: right;
		width: 351px;
		margin: 95px 10px 0 0;
		}
		ul#primary-links li {
			float: left; list-style: none;
			margin: 0 10px;
			}
			ul#primary-links li.last {
				margin: 0 0 0 10px;
				}
		ul#primary-links li a {
			width: 100px; height: 50px;
			display: block;
			text-indent: -9999px;
			background-image: url(img/navigation.jpg);
			background-repeat:  no-repeat ;
			}
			ul#primary-links li.first a 			{ background-position: 0 0; }
				ul#primary-links li.first a:hover 		{ background-position: 0 -50px; }
				ul#primary-links li.first a:active 		{ background-position: 0 -150px; }
				.about ul#primary-links li.first a 		{ background-position: 0 -100px; }
			ul#primary-links li.menu-1-1-1 a 		{ background-position: -100px 0;}
				ul#primary-links li.menu-1-1-1 a:hover 	{ background-position: -100px -50px; }
				ul#primary-links li.menu-1-1-1 a:active { background-position: -100px -150px; }	
				.port ul#primary-links li.menu-1-1-1 a	{ background-position: -100px -100px; }		
			ul#primary-links li.last a 				{ background-position: -200px 0; }
				ul#primary-links li.last a:hover 		{ background-position: -200px -50px; }
				ul#primary-links li.last a:active 		{ background-position: -200px -150px; }
				.contact ul#primary-links li.last a 		{ background-position: -200px -100px; }
				
/* Columns
-------------------------------------------------------------- */	
#primarycol {
	width: 940px;
	margin-left: 10px;
	position: relative;
	}	
.about #primarycol {
	width: 580px;
	float: left; display: inline;
	}	
.about #secondarycol {
	width: 340px;
	margin-right: 10px;
	float: right; display: inline;
	}	
.port #primarycol {
	width: 700px;
	float: left; display: inline;
	}
.port #secondarycol {
	width: 220px;
	float: right; display: inline;
	}
.contact #primarycol {
	width: 959px;
	margin-left: 0;
	position: relative;
	}
.front #primarycol {
	width: 949px;
	margin-left: 10px;
	}		
/* Front page
-------------------------------------------------------------- */			
h2#img-headline {
	display: block;
	height: 144px; width: 559px;
	background: url(img/headline.jpg) no-repeat top left;
	text-indent: -9999px;
	border: none;
	}

.front h3 {	border-bottom: none; background: none;
	margin-bottom: 0;}		
.front #primarycol p {
	width: 520px;
	font-size: 110%;
	}
	.front #primarycol p strong, .front #primarycol p a {
		color: #9f1802;}
#block-worksheet { 
	background: #fff; 
	margin: 40px 60px; 
	position: relative;
	padding-top: 10px;
	}	
#block-worksheet h3 {
	text-transform: none;
	font-weight: normal;
	margin: 0 0 0 40px;
	padding: 0;
	line-height: 1em;
	width: 240px;
	}	
#block-worksheet p {
		color: #000;
		width: 400px; margin-left: 330px;
		position: relative;
		top: -2em;
		}
.list-category {	
	float: left;
	width: 220px;
	margin-right: 20px;
	}
	#list-pol { width: 460px; margin-left: 10px;}	
	#list-biz { margin-right: 0;}
	.list-category h4 {	
		font-weight: normal;
		text-transform: none;
		background: url(img/bg-header.gif) repeat-x bottom left;
		text-shadow: -1px -1px 1px #fff; 
		border-bottom: 1px solid #9f1802;
		margin-bottom: 0.5em;
		}
#block-client-list h3 { margin-left: 10px; margin-bottom: 0.5em;}		
#block-client-list	ul {
	list-style: none;
	float: left; display: inline;
	width: 220px; margin: 0; padding: 0;
	}
	#block-client-list	ul li {
		margin: 0 0 2px; padding: 0;
		width: 205px;
		}
	#block-client-list	ul li a {
		display: block;

		}
		#block-client-list	ul li a:hover {
		background: url(img/link.jpg) no-repeat 100% 50%;
		text-decoration: none;
		}
#slideshow {
	display: block;
	width: 374px; height: 354px;
	background: url(img/bg-slideshow.jpg) no-repeat top left;
	position: absolute;
	top: 0; right: 0;
	}	
	#slideshow img {
		position: relative;
		}

/* footer
-------------------------------------------------------------- */		#footer {
	clear: both;
	width: 100%; height: 289px;
	background: url(img/bg-footer.jpg) no-repeat top left;
	padding: 100px 0 0 10px;
	}			
/* Monster hands
-------------------------------------------------------------- */		
#lefthand {
	width: 114px; height: 109px;
	display: block;
	background: url(img/hand-left.png) no-repeat top left;
	position: absolute;
	}	
	.front #lefthand {	
		top: 47em; left: -60px; }
	.about #lefthand {	
		top: 50em; left: -60px; }	
	.contact #lefthand {	
		top: 47em; left: -30px; }
	.port #lefthand {	
		top: 680px; left: -40px; }		
#righthand {
	width: 140px; height: 96px;
	display: block;
	background: url(img/hand-right.png) no-repeat top left;
	position: absolute;
	}
	.front #righthand {	
		top: 56em; right: -30px; }
	.about #righthand {	
		top: 44em; right: -10px; }	
	.contact #righthand {	
		top: 35em; right: -30px; }
	.port #righthand {	
		top: 500px; right: -20px; }