@import url('css-reset.css');
/* reset import -- must come first */

/* siteprep website main layout					*/
/* author: daniel angel 						*/
/* date: 18 Nov, 2008							*/

/* begin tag redefinition */

body {
	background: #000 url(../images/main-background.jpg) top left fixed;
	font-family: "Trebuchet MS", "Bitstream Vera Sans", Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #B7B099;
}

h1 {
	font-size: 300%;
}

h2 {
	font-size: 300%;
	margin: 80px 0 0 0;
}

h3 {
	font-size: 185%;
	margin: 0 0 10px 0;
}

h4 {
	font-size: 155%;
	margin: 10px 0 0 0;
}

h1, h2, h3 {
	text-align: left; /* for sIFR */
}

p {
	font-size: 100%;
	line-height: 20px;
	padding: 7px 0;
}

hr {
	position: relative;
	left: -20px;
	width: 200px;
	border-bottom: 1px dashed #8D8875;
	margin: 0 0 20px 0;
	text-align: left;
}

strong {
	font-weight: normal;
}

a:link {
	color: #8CC63F;
	text-decoration: none;
}

	div#main-col a:hover {
			border-bottom: 1px dashed #7ED700;	
	}

a:hover {
	color: #7ED700;
}

a:visited {
	color: #93CD43;
	text-decoration: none;
}

a:active {
	color: #CCFF00;
}

.features {
	width: 100%;
	font-size: 100%;
}

.features td {
	padding-bottom: 10px;
	width: 33%;
	vertical-align: top;
}







/* layout elements */


div#wrap-this {
	background: url(../images/secondary-background.jpg) top center no-repeat fixed;
}
div#glyph {
	background: url(../images/wicked-symbol.png) -145px 0 no-repeat fixed; /* <-- this bgposition (-145px) changes with js according to the user's screen dimensions. This is set for minimum 880px resolution */
	margin: 0 auto;
}

div#container {
	width: 875px;
	margin: auto;
	overflow: auto;
	position: relative;
}

	div#right-col {
		width: 285px;
		position: fixed;
		left: 580px; /* <-- this value changes with js according to the user's screen dimensions */
	}	
	
		div#menu, div#videos {
			background: url(../images/right-col-background.png) top center repeat-y;
			border-top: 1px #0B0503 dotted; /* fixes a weird firefox visibility bug .. really, NO ONE will be able to notice it ;) */
			border-bottom: 1px #0B0503 dotted;
		}
		
		div#videos {
			padding: 0 10px 0 20px;
			overflow: auto;
		}
		div#videos h2 {
			margin: 0;	
		}
		div#videos h3 {
			font-size: 140%;
			margin: 0 0 2px 0;
		}
		div#videos hr {
			left: 0;
			width: 120px;
			margin: 0 0 4px 0;
		}
		div#videos p {
			float: left;
			margin: 0 0 0 11px;
			padding: 0;
		}
	
	div#main-col {
		background: url(../images/main-col-background.png) top center repeat-y;
		width: 480px;
		padding: 20px 40px 20px 50px;
		float: left;
		overflow: auto;
	}
	
		div#main-col p {
			padding-right: 60px;
		}
	
	/* elements generated by jquery */
		
		div#main-col-top, div#main-col-bottom {
			width: 570px;
			height: 17px;
		}		
		div#main-col-top {	
			background: url(../images/main-col-top.png) top center no-repeat;
		}
		div#main-col-bottom {
			background: url(../images/main-col-bottom.png) bottom center no-repeat;
			margin: 0 0 450px 0; /* bottom margin is for smooth scrolling ... it gives the website air below so that the anchor will be placed on top. Also makes boxes align horizontally when scrollbar is on the bottom ... if you read this far, you have nothing else to do! */
			clear: both;
		}
		div.right-col-top {
			background: url(../images/right-col-top.png) top center no-repeat;
			height: 17px;
		}
		div.right-col-bottom {
			background: url(../images/right-col-bottom.png) bottom center no-repeat;
			height: 17px;
			margin: 0 0 10px 0;
		}
		div#grader {
			position: absolute;
			width: 270px;
			height: 156px;
			top: -91px;
			left: 14px;
			background: url(../images/grader-background-v2.png) top right no-repeat;
		}
	







/* main menu */

div#menu {
	height: 170px;
}

div#menu p {
	display: none; /* hides the 'skip' link */
}
div#menu ul {
	list-style: none;
	margin: 25px 0 20px 20px;
	background: url(../images/siteprep-logo.png) 125px 15px no-repeat;
}
div#menu ul li {
	width: 110px;
	padding: 5px 0;
	border-bottom: 1px dashed #8D8875;
}
	div#menu ul li:last-child {
		border: none;
	}
div#menu ul li a {
	background: url(../images/menu-background.png) no-repeat;
	display: block;
	height: 18px;
	text-indent: -9999px;
	outline: none;
}


	div#menu ul li#m_home a:link {
		background-position: 0 0; /* not necessary, but still ... */
	}
	div#menu ul li#m_home a:hover, div#menu ul li#m_home a.selected {
		background-position: 0 -20px;
	}
	div#menu ul li#m_home a:active {
		background-position: 0 -40px;
	}
	div#menu ul li#m_whatwedo a {
		background-position: 0 -60px; 
	}
	div#menu ul li#m_whatwedo a:hover, div#menu ul li#m_whatwedo a.selected {
		background-position: 0 -80px;
	}
	div#menu ul li#m_whatwedo a:active {
		background-position: 0 -100px;
	}
	div#menu ul li#m_whoweare a {
		background-position: 0 -120px;
	}
	div#menu ul li#m_whoweare a:hover, div#menu ul li#m_whoweare a.selected {
		background-position: 0 -140px;
	}
	div#menu ul li#m_whoweare a:active {
		background-position: 0 -160px;
	}
	div#menu ul li#m_contact a {
		background-position: 0 -180px; 
	}
	div#menu ul li#m_contact a:hover, div#menu ul li#m_contact a.selected {
		background-position: 0 -200px;
	}
	div#menu ul li#m_contact a:active {
		background-position: 0 -220px;
	}
	div#menu ul li#m_photogal a {
		background-position: 0 -240px; 
	}
	div#menu ul li#m_photogal a:hover, div#menu ul li#m_photogal a.selected {
		background-position: 0 -260px; 
	}
	div#menu ul li#m_photogal a:active {
		background-position: 0 -280px; 
	}


/* the contact form (and details) */

div#main-col form, div#main-col div#success {
	margin: 30px 0 0 0;
	width: 309px;
	float: left;
}
div#main-col div#success {
	height: 200px;
	overflow: visible;
}
	div#main-col div#success strong {
		color: #8CC63F;
	}

div#main-col form p {
	width: 280px;
}
div#main-col form label {
	display: block;
	margin: 10px 0 0 20px;
	color: #8CC63F;
	font-size: 110%;
}
div#main-col form p span {
	display: block;
	width: 280px;
	background: url(../images/input-background.png) top right no-repeat;
	height: 30px;
	margin: 0 0 20px 0;
}
div#main-col form p span.ta {
	background: url(../images/textarea-background.png) top right no-repeat;
	height: 90px;
}
div#main-col form input {
	width: 255px;
	height: 30px;
	border: none;
	background: url(../images/input-background.png) bottom left no-repeat;
	color: #333;
	font-size: 140%;
	padding: 0 0 0 10px;
	line-height: 10px;
}
div#main-col form textarea {
	font-family: "Trebuchet MS", "Bitstream Vera Sans", Helvetica, Arial, sans-serif;
	width: 255px;
	height: 90px;
	border: none;
	background: url(../images/textarea-background.png) bottom left no-repeat;
	color: #333;
	font-size: 140%;
	padding: 0 0 0 10px;
}
div#main-col form button {
	display: block;
	width: 140px;
	height: 35px;
	margin: 35px 0 0 auto;
	border: none;
	text-indent: -9999px;
	background: url(../images/button-background.png) bottom right no-repeat;
}

/* error handling */

div#main-col form p.formerror input {
	background: url(../images/input-error-background.png) bottom left no-repeat;
}
div#main-col form p.formerror span {
	background: url(../images/input-error-background.png) top right no-repeat;
	margin: 0;
}
div#main-col form p.formerror small {
	display: block;
	color: red;
	margin: 0 0 10px 20px;
}



/* reCAPTCHA styles */
div#recaptcha_widget {
/*	border: 1px solid #F4E9CD;*/
/*	background: #000;*/
	padding: 1em 0 1em 0;
	width: 340px;
	
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;

}
div#recaptcha_widget img {
	display: block;
}
div#recaptcha_widget ul {
	height: 19px;
	margin: 10px 0 0 240px;
	padding: 0;
}
div#recaptcha_widget p.recaptcha_help {
	float: left;
	font-size: 10px;
	padding: 0;
	margin: 10px 0 0 0;
	width: 240px;
}
ul#recaptcha_icons li {
	display: block;
	float: left;
	height: 19px;
	margin: 0 1px 0 0;
	width: 25px;
}
ul#recaptcha_icons li a {
	background: url(../images/recaptcha-icons.png) top left no-repeat;
	border: none;
	display: block;
	height: 19px;
	outline: none;
	text-indent: -9999px;
}
ul#recaptcha_icons li a:hover {
	border: none;
}
ul#recaptcha_icons li.recaptcha_another a {
	background-position: 0 0;
}
ul#recaptcha_icons li.recaptcha_only_if_image a {
	background-position: -25px 0;
}
ul#recaptcha_icons li.recaptcha_only_if_audio a {
	background-position: -75px 0;
}
ul#recaptcha_icons li.recaptcha_help a {
	background-position: -50px 0;
}
div#main-col form input#recaptcha_response_field {
	width: 310px;
}
div#main-col form span.recaptcha_only_if_image, div#main-col form span.recaptcha_only_if_audio {
	background: none !important;
	margin: 0 !important;
}
div#main-col form p.formerror small {
	display: block;
	color: red;
	margin: 0 0 10px 20px;
}





div#main-col dl {
	margin: 50px 0 0 0;
	width: 150px;
	float: left;
	padding: 10px 0 10px 20px;
}
div#main-col dt {
	text-indent: -9999px;
	width: 16px;
	margin: -10px 0 0 0;
}
	div#main-col dt#dt-ph {
		background: url(../images/dl-background.png) top left no-repeat;
	}
	div#main-col dt#dt-em {
		background: url(../images/dl-background.png) 0 -20px no-repeat;
	}
div#main-col dd {
	position: relative;
	top: -1.3em;
	left: 22px;
}
	div#main-col dd#dd-ma {
		color: #8CC63F;
	}
	div#main-col dd#gla {
		padding-top: 35px;
	}








/* gallery */
.gallery {
	position:relative;
	width:480px;
	height: 353px;
	margin: 20px 0 0 -5px;
}
	.gallery .buttons {
		position: absolute;
		width: 540px;
		top: 150px;
		left: -30px;
	}
	
	.gallery .buttons a {
		display: block;
		width: 19px;
		height: 33px;
		text-indent: -9999px;
		outline: none;
		border: none;
	}
	.gallery .buttons a:hover {
		border: none !important;
	}
	.gallery .prev{
		float:left;
		background: url(../images/prev.png) top left no-repeat;
	}
	.gallery .next{
		float:right;
		background: url(../images/next.png) top left no-repeat;
	}

.slideshow{
	overflow:hidden;
	width:480px;
	height: 338px;
}

	.slideshow ul{
		width:12000px;
	}

		.slideshow li{
			float:left;
			width: 450px;
			overflow: hidden;
			margin:0 5px 0 0;
			cursor:pointer;
			list-style: none;
			text-align: center;
		}
			.slideshow li a, .slideshow li a:hover {
				border: none;
			}
		
			.slideshow li a span {
				display: block;
				background: url(../images/slideshow-span-background.png) top left;
				height: 30px;
				position: relative;
				top: -33px;
				color: #B7B099;
				text-align: right;
				padding: 7px 10px 0 0;
			}









/* presentation elements */

h3#slogan { /* if only ie6 supported first-child */
	position: relative;
	right: 250px;
	margin: 15px 0 15px auto;
	width: 450px;
	font-size: 200%;
}

p#koodoz {
	font-size: 10px;
	margin: -14px 0 0 0;
	padding: 0 20px 0 0;
	text-align: right;
}
p#koodoz a {
	color: #E7D9B7;
	text-decoration: none;
}
p#koodoz a:hover {
	color: #7ED700;
}
	p#koodoz a#design {
		padding: 0 0 0 10px;
	}
	p#koodoz a#design img {
		padding: 0 0 0 6px;
	}
	p#koodoz a#design:hover {
		color: #D50A27;
		text-decoration: none;
	}
.that-thing { /* you know .... *that* thing! */
 unicode-bidi: bidi-override;
 direction: rtl;
 }
 object p {
 	display: none;
 }
 
 
 
 
@media only screen and (max-device-width: 480px){

	div#wrap-this, div#glyph {
	background: none;
	}
	
	div#container {
	width: 100%;
	}

	#right-col {
	display:none;
	}
	
	#main-col {
	width: 100% !important;
	}
	
	div#main-col-top, div#main-col-bottom {
	background: none;
	}
	
	#youtubeVideo {
	width:100%;
	}
	
	h3#slogan {
	display:none;
	}

}