/* Omni Studios
------------------------------
Author: Omni Studios Inc
Contact: info@omnistudios.com
Website: http://omnistudios.com/
------------------------------
*/

@import url(reset.css);
@import url(prettyPhoto.css);

/* wrapper */
#wrapper { background: url(../images/bg.png) top left repeat-x; width: 100%; margin: 0 auto; }

	/* top container */
	#topContainer { background: url(../images/topContainer_bg.png) top center repeat-y; width: 910px; height: 535px; margin: 0 auto; display: inline-block; overflow: hidden; }
	#topContainer { display: block; }
	
		/* logo */
		#topContainer h1 { background: url(../images/omnistudios_logo.png) top left no-repeat; margin-left:30px; margin-bottom: -14px; margin-top: 20px; }
		#topContainer h1 a { display: block; width: 178px; height: 79px; text-indent: -100em; }
	
			/* links */
			#links { float: right; margin-right: 45px; }
			#links li { float: right; }
			#links li a { font-size: 16px; color: white; margin: 0 5px 0 5px; }
			#links li a:hover { color: #969594; }
			#links li:after { content: ":"; color: white; }
		
			/* showcase */
			#showcase { width: 100%; height: 350px; background: url(../images/showcase_bg.png) top left no-repeat; margin-top: 15px; }
			#showcase img { padding-top: 33px; padding-left: 33px; }
		
			/* navigation */
			#navigation { float: left; margin: -22px 0 0 50px; overflow: hidden; }
			#navigation li { float: left; margin: 0 5px 0 5px; padding: 11px 5px 2px 5px; line-height: 26px; }
			#navigation li a { display: block; height: 30px; font-size: 16px; color: white; }
			#navigation li a:hover {
				display: block;
				background: white url(../images/navigation_list_item_bg.gif) top left repeat-x;
				color: #5c375c;
				height: 30px;
				margin:-11px -5px -2px -5px;
				padding: 11px 5px 2px 5px;
			}
			#navigation li.selected { display: block; height: 30px; color: #5c375c; }
			#navigation li.selected { background: #6ac610 url(../images/navigation_list_item_selected_bg.gif) top left repeat-x; color: white; }
	
	/* content container */
	#contentContainer { margin: 0 auto; margin-top: -19px; width: 865px; overflow: hidden; }
	#contentContainer { display: inline-block; }
	#contentContainer { display: block; }
	
		/* left content + typography elements */
		#left { float:left; background: url(../images/left_bg.png)top right no-repeat; width: 580px; padding: 15px; }
		#left p { font-size: 14px; line-height: 18px; text-align: justify; color: black; margin-top: 10px; padding-right: 5px; }
		#left p a, #left ul li a { color: #4F2F4F; }
		#left p a:hover, #left ul li a:hover { color: #000; }
		#left h1 { font-size: 24px; font-weight: bold; color: #000000; padding-top: 10px; }
		#left h2 { font-size: 18px; font-weight: bold; color: #4F2F4F; margin: 7px 7px 7px 0px; }
		#left blockquote { background: #eeeeee url(../images/quotes.gif) top left no-repeat; padding: 20px 5px 20px 25px; margin: 10px 5px 10px 25px; border-left: #e2e2e2 2px solid; font-size: 14px; }
		#left ul { margin: 10px 5px 10px 25px; list-style-image: url(../images/li.gif); list-style-position: outside; }
		#left ul li { padding: 5px; font-size: 14px; line-height: 18px; color: #black; }
		#left ul li { padding: 5px; font-size: 14px; line-height: 18px; color: #black; }
		/* secondary left ( full page width ) */
		#left.secondary { width: 860px; background: none; padding: 15px 0px 5px 5px; }
		#left.secondary img { display: block; }
		
		/* category */
		#category { width: 100%; height: 40px; margin: 25px 0px 35px 0px; }
		#category img { float: left; width: 165px; height: 40px; margin-right: 7px; }
		
		/* sidebar */
		#sidebar { float: left; width: 225px; margin-top: 19px; padding: 15px; }
		#sidebar img { margin-bottom: 7px; }
	
	/* bottom container */
	#bottomContainer { background: #424242 url(../images/bottomContainer_bg.png) top left repeat-x; width: 100%; height: 300px; margin-top: 40px; }
	#logo { float: right; background: url(../images/omnistudios_logo.png) top left no-repeat; width: 178px; height: 79px; margin-top: 30px; margin-right: 10px; }
		/* footer */
		#footer { margin: 0 auto; width: 865px; }
		#footer ul { float: left; width: 160px; padding: 4px; margin-top: 30px; }
			#footer ul li { display: block; height: 20px; color: white; padding: 0 3px 0 5px; line-height: 14px; }
			#footer ul li:hover { background: #646464; }
			#footer ul li a { color: #a7a7a7; font-size: 12px;}
			#footer ul li a:hover { color: white; }
		#footer span { display: block; clear: both; padding: 7px; padding-top: 14px; color: white; font-size: 12px; text-align: right; }
		
/* caption */
.boxgrid { width: 265px; height: 155px; margin: 5px 0px 5px 10px;float:left; background:#bbb; overflow: hidden; position: relative; }
.boxgrid img { position: absolute; top: 0; left: 0; border: 0; }
.largeview { display: block; margin-top: 40px; margin-left: 10px; }
.boxgrid p { padding: 0 10px; color: white; font-size: 14px; }
.boxgrid p a { color: white; }
.boxgrid h3 { margin: 10px 10px 0 10px; color: white; font: 18pt Trebuchet MS; letter-spacing: -1px; font-weight: bold; }
.boxgrid span { font-style: italic; font-size: 14px; color: white; margin-left: 14px; }
.boxcaption {
	float: left;
	position: absolute;
	background: #000;
	height: 100px;
	width: 100%;
	opacity: .8;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption { top: 155; left: 0; }
.caption .boxcaption { top: 60; left: 0; }

/* clear floats */
br.clear { clear: both; }

/* scrollable */
div.scrollable { position: relative; overflow: hidden; width: 860px;	 height: 80px; padding: 10px 0; margin: 0 auto; }
div.scrollable div.items {	width: 20000em; position: absolute; float: left; margin-left: 10px; }
div.scrollable div.items div { float: left; width: auto; padding: 25px 0px 10px 0px; margin-right: 20px; }
div.items div img:hover { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; }
div.items div img { filter: alpha(opacity=40); -moz-opacity: 0.40; opacity: 0.40; }
div.scrollable div.items div.active { background: #fff; }
#creditcards { clear: left; float: right; background: url(../images/creditcards.png) top left no-repeat; width: 171px; height: 23px; margin-right: 20px; }