@charset "utf-8";

/*------------------------------------------------------

Theme Name: Studio 8 - version 1.2
Type: BLACK

CSS overview: 

	1. Resets
	2. Backgorund
	3. Main Elements
		i.gobal wrapper
		ii.sidebar +content
	4. Menu
	5. Theme elements
		i.twitter
		ii.fancybox
		iii. portfolio
		iv.blog
		v.form elements
		vi.pagination
	6. Footer
	7. Links
	8. Typography
	9. Standard Elements
		i.buttons
		ii.columns
		iii. highlights
		iv.boxes
		v.media frames
		vi.lists
		vii.content lists
		viii.blockquotes
		ix. social
		x. divs
	10. Misellaneous
		

---------------------------------------------------------*/



/*--------------------------------------------------------
	1.BACKGROUND
--------------------------------------------------------*/

	body{background:#000;}
	.raster{background:url(../images/black/raster.png) repeat;}


/*--------------------------------------------------------
	2.COMMONS
--------------------------------------------------------*/

	.tweet .txt,p,#footer,#nav li a,blockquote p.clientRef,.field, .tarea,ul.list{
	color:#FFF;
}
	#slidecaption, #slidecaption-grande,.comment,#sideBar #toggle,h1,#fancybox-title {color:#fff;}
	p,p.slogan,a,.field,.fieldNotify,.tarea, .tweet .txt, #nav,.tweet .time, #footer,ul.list,.button {font-family:Arial, Helvetica}

/*--------------------------------------------------------
	3.MAIN ELEMENTS
--------------------------------------------------------*/

	/*----------------------------
	i.-- supersized
	-----------------------------*/
	
	#supersized-loader {background: url(../images/black/loader.gif) no-repeat center center;}
	#supersized-logoLoader{background: url(../images/black/logo.png)  top left no-repeat;}
	#slidecaption,#s_ind{background:#000;}
	#supersized li {background: #000;}
	#prevslide{right:50px; background: url(../images/black/slide_nav.png) 0 -100px no-repeat;}
	#nextslide{right:0px; background: url(../images/black/slide_nav.png) 0 -0px no-repeat;}
	#prevslide:hover{background:url(../images/black/slide_nav.png) 0 -150px no-repeat;}
	#nextslide:hover{background:url(../images/black/slide_nav.png) 0px -50px no-repeat;}
	
	/*----------------------------
	ii.-- sidebar/close/launch/bkg
	-----------------------------*/
	
	#sideBar #inner,#content-wrapper{
}
	#sideBar  #close-but{background:url(../images/black/toggle_but.png) top center no-repeat; font-family: Arial, Helvetica, sans-serif; font-size:14px;color:#666;}
	#sideBar  #close-but:hover{background:url(../images/black/toggle_but.png) 0px -42px;color:#fff;}
	#launch-but{font-family:Arial, Helvetica, sans-serif;}
	#launch-but #circle{
	background:#CF0;
}
	#launch-but #circle-overlay{
	background:#333;
}
	#launch-but #label{
	text-align:center;
	color:#000;
}

/*--------------------------------------------------------
	4.MENU
--------------------------------------------------------*/

	/*----------------------------
	i.-- main menu
	-----------------------------*/
	
	#navContainer{border-top:1px dotted #2f2f2f;border-bottom:1px dotted #2f2f2f;}
	#nav li a{
	font-family: Arial, Helvetica, sans-serif;
	font-size:13px;
	text-transform:uppercase;
	text-decoration:none;
	line-height: normal;
	color: #FFF;
	text-shadow: 1px 1px 1px #000000;
}
	#nav li a:hover{
	text-decoration:none;
	color:#fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #000000;
}
	#nav li a.active {
	color:#fff;
	font: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #000000;
	text-decoration: none;
}
	
	/*----------------------------
	ii.-- sub menu
	-----------------------------*/
	 
	#nav ul{
	font-size:14px;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	text-shadow: 1px 1px 1px #000000;
	color: #FFF;
	text-decoration: none;
}
	#nav li ul a{
	text-transform: uppercase;
	color:#F06;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-shadow: 1px 1px 1px #000000;
	text-decoration: none;
}
	#nav li:hover a{
	text-decoration:none;
	text-shadow:1px 1px 1px #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFF;
	text-transform: uppercase;
	font-weight: bold;
}
	#nav li:hover ul a{
	text-decoration:none;
	font-size:14px;
	color: #F00;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #000000;
}


/*--------------------------------------------------------
	5.PAGE ELEMENTS
--------------------------------------------------------*/

	/*----------------------------
	i.-- twitter
	-----------------------------*/
	
	.jScrollPaneTrack {background: #111;}
	.jScrollPaneDrag {background: #666;}
	.tweet{border-bottom:1px dotted #333}
	.tweet .user a{font-size:14px; text-decoration:none; color:#ccc; font-weight:normal; font-family:'Ubuntu'}
	.tweet .user a:hover{text-decoration:none; color:#222;}
	.tweet .txt{font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:18px;font-style:italic;}
	.tweet .time{color:#333; font-family:Arial, Helvetica, sans-serif;text-transform:none;}
	.tweet .brace{background: url(../images/black/twitter_brace.png) top left no-repeat;}
	
	
	/*----------------------------
	ii.-- fancybox
	-----------------------------*/
	
	#fancybox-outer {background: #000;}
	#fancybox-content {border: 0px solid #000;}
	#fancybox-left-ico {background-image: url(../images/black/fancybox.png)}
    #fancybox-right-ico {background-image: url(../images/black/fancybox.png)}
	#fancybox-close {background: transparent url(../images/black/fancybox.png) -40px 0px;}
	#fancybox-title-over {background-image: url(../images/black/caption_bkg.png);}
	
	
	/*----------------------------
	iii.-- portfolio
	-----------------------------*/
	
	._logoThumb{background:url(../images/black/logo_hover.png) 0 -160px no-repeat;}
	._videoThumb{background:url(../images/black/logo_hover.png) 0 -160px no-repeat;}
	
	/*----------------------------
	iv.-- blog
	-----------------------------*/
	
	.entrySpec{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#cccccc;}
	#blogContainer ul li div.post{border-bottom:1px dotted #333;}
	.comment{background: url(../images/black/comments_blog.png) center center no-repeat;font-family:"Bebas Neue"; font-size:30px;}
	.post_close{background: url(../images/black/toggle_but2.png) -33px 0 no-repeat;}
	
	/*----------------------------
	v.-- form elements
	-----------------------------*/
	
	.field{background: url(../images/black/raster_form.png);border:1px solid transparent;font-family: Arial, Helvetica, sans-serif; font-size:12px;}
	.field:focus{border:1px solid transparent; color:#00ccff;}
	.tarea{background: url(../images/black/raster_form.png);border:1px solid transparent; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
	.tarea:focus{background: url(../images/black/raster_form.png);border:1px solid transparent; color:#00ccff;}
	.formReset{background: url(../images/black/raster_form.png);border:1px solid transparent;}
	.formVerify{
	background: url(../images/black/raster_form.png);
	border:1px solid transparent;
	color:#FFF;
	font-family: "District Thin";
	text-shadow: 3px 3px 5px #000000;
	font-size: 14px;
}
	.formLoader{background: url(../images/white/loader.gif) no-repeat;}
	
	
	/*----------------------------
	vi.-- pagination
	-----------------------------*/
	.page_navigation a, .alt_page_navigation a{background-image:url(../images/black/page_sel.png);background-position: 0 0;background-repeat:  no-repeat;}
	.active_page{background-image:url(../images/black/page_sel.png);background-position: 0px -10px;background-repeat:  no-repeat !important;text-decoration:none;}



/*--------------------------------------------------------
	6.FOOTER
--------------------------------------------------------*/

	#footer{
	border-top:1px solid #333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}


/*--------------------------------------------------------
	7.LINKS
--------------------------------------------------------*/

	a,a:visited{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#F06;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000000;
}
	a:hover{
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-transform: none;
	color: #FFF;
	text-shadow: 1px 1px 1px #000000;
}
	a.r-more,a:visited.r-more{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#F00;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000000;
}
	a.r-more:hover{text-decoration:underline;}


/*--------------------------------------------------------
	8.TYPOGRAPHY
--------------------------------------------------------*/

	h1,h2,h3,h4,h5,h6{
	color:#999;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
}
	h1.pageHeading{
	font-family: "Bebas Neue";
	font-size:111px;
	color: #FFF;
	text-shadow:5px 4px 3px #000000;
}
	p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:16px;
	text-align: left;
}
	p.slogan{
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#909;
}



/*--------------------------------------------------------
	9.STANDARD ELEMENTS
--------------------------------------------------------*/


	/*----------------------------
	i.--standard buttons
	-----------------------------*/
	
	
	.button { background-color: #222; color: #fff !important;text-decoration: none !important; text-transform:uppercase;text-decoration:none; white-space: nowrap;}
	.button:hover{text-decoration:none;}

	
		/* button sizes */
		/*ref to style.css*/
	 
		/*button colors */
		.button.theme {
	background-color: #000;
	color:#F03 !important;
}
		.button.theme:hover{background-color:#00ccff; color:#fff !important;}
		.button.teal {background-color: #00ccff; color:#fff !important;}
		.button.teal:hover{background-color:#18c6f1;color:#fff !important;}
		.button.navy {background-color: #3a74a1;}
		.button.navy:hover{background-color:#2e648d;}
		.button.red {background-color: #f31616;}
		.button.red:hover {background-color: #e21616;}
		.button.magenta {background-color: #bb1a61;}
		.button.magenta:hover {background-color: #9e1652;}
		.button.orange {background-color: #ff9600;}
		.button.orange:hover {background-color: #f09411;}
		.button.yellow {background-color: #ffcc00;}
		.button.yellow:hover {background-color: #fdb10d;}
		.button.green {background-color: #8db513;}
		.button.green:hover {background-color: #7b9e10;}
		
		/*button effects */
		.button.shadow{/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);box-shadow: 0 1px 3px rgba(0,0,0,0.5);border-bottom: 1px solid rgba(0,0,0,0.25);*/}
		.button.rcorners{-webkit-border-radius: 3px;-moz-border-radius: 3px; border-radius: 3px;}
		.button.txtshadow{text-shadow:0px 1px 1px #000;}
		.button.txtemboss{text-shadow:0px -1px 0px #666;}
		.button.shading{background-image:url(../images/black/but_overlay.png)!important; background-repeat:repeat-x;}
	

	/*----------------------------
	ii.--columns
	-----------------------------*/
	
	/*ref to style.css*/

	/*----------------------------
	iii.--standard highlights
	-----------------------------*/
	
	.highlight{background:#000;color:#fff;}
	
		/*highlights colors*/
		.highlight.gray {background-color: #666;}
		.highlight.teal {background-color: #3ec3e4;}
		.highlight.navy {background-color: #3a74a1;}
		.highlight.red {background-color: #f31616;}
		.highlight.magenta {background-color: #bb1a61;}
		.highlight.orange {background-color: #ff9600;}
		.highlight.yellow {background-color: #ffcc00;}
		.highlight.green {background-color: #8db513;}
		
		/*highlights effects*/
		.highlight.italic{font-style:italic;}
		.highlight.bold{font-weight: bold}
		
		
	/*----------------------------
	iv.--standard boxes
	-----------------------------*/
	
	.box{color:#000; font-size:12px;}
	
		/* code excerpts*/
		.box.tt_code_box{background-image:url(../images/code_logo.png); background-position: top right; background-repeat: no-repeat;}
		pre,code{
	background:url(../images/code_bkg.png) repeat;
	color:#666;
	font-size: 12px;
	border: thin solid #ddd;
}
		code.rcorners{-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}

		/* box styles  */
		.box_elegant{background-image: url(../images/black/box_overlay.png); background-repeat:repeat-x;font-family:Arial, Helvetica, sans-serif;color:fff;}
		.box_elegant.rcorners{-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}
		
		/*box colors*/
		.box_elegant.normal {background-color:#999;border: 1px solid #666; color:#fff; }
		.box_elegant.info{background-color:#D7E7F5;border: 1px solid #AACEE6; color:#3a74a1; }
		.box_elegant.success {background-color:#d0e369;border: 1px solid #a8cf2f; color:#7b9e10; }
		.box_elegant.attention {background-color:#fcf099;border: 1px solid #ffdb4f; color:#fdb10d; }

	
	/*----------------------------
	v.-- media framing/shadows
	-----------------------------*/
	
	._imageThumb{background: url(../images/black/image_hover.png) center -160px no-repeat;}
	._videoThumb{background:url(../images/black/image_hover.png) center -160px no-repeat;}
		
		/*frames*/
		._border_simple{border: 1px solid #111;}
		._border_thick-1{background: url(../images/black/frame_bkg.png) 0 0 repeat #111;}
		._border_thick-2{background: url(../images/black/frame_bkg.png) 0 0 repeat #666;}
		._inner_shadow img, ._inner_shadow iframe,._inner_shadow a{-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.8);-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.8);box-shadow: 0 1px 5px rgba(0,0,0,0.8);text-shadow: 0 -1px 5px rgba(0,0,0,0.8);}
		
		/*image-hover containers*/
		._rollover {position:absolute;border:none;z-index:2; opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); background-image: url(../images/black/transparent.png);background-repeat:repeat;/*ie fix*/} 
	
	/*----------------------------
	vi.--lists
	-----------------------------*/
	
	ul.list li{background:url(../images/black/list_items_theme.png)0 0 no-repeat;margin-bottom: 2px;padding-bottom: 2px;padding-left: 25px; font-size:12px; }
	
		/*list colors*/
		ul.list li.gray{background: url(../images/elements/lists/list_items_gray.png)}
		ul.list li.teal{background:url(../images/elements/lists/list_items_teal.png)}
		ul.list li.navy{background:url(../images/elements/lists/list_items_navy.png)}
		ul.list li.red{background:url(../images/elements/lists/list_items_red.png) }
		ul.list li.magenta{background:url(../images/elements/lists/list_items_magenta.png)}
		ul.list li.orange{background:url(../images/elements/lists/list_items_orange.png)}
		ul.list li.yellow{background:url(../images/elements/lists/list_items_yellow.png)}
		ul.list li.green{background: url(../images/elements/lists/list_items_green.png)}
		
		/*list style*/
		ul.list li.arrow{background-position: -16px -16px;}
		ul.list li.check{background-position: -32px -32px;}
		ul.list li.plus{background-position: -48px -48px;}
		ul.list li.minus{background-position: -64px -64px;}
		ul.list li.arrow2{background-position: -80px -80px;}
		
	
	/*----------------------------
	vii.-- content lists
	-----------------------------*/
		
	ul.content_list li{border-bottom:1px dotted #333;}
	
		ul.content_list li p{/*font-family:Arial, Helvetica, sans-serif;*/
	font-size:12px;
}
		ul.content_list li p span.name {
	font-size:14px;
	color:#F03;
}
		ul.content_list li p span.title{
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
	color:#FFF;
	background:#111;
}
		ul.content_list li.last{border:none;padding:0px;}
		
	
	/*----------------------------
	vii.-- comment lists
	-----------------------------*/
		
	ul.comment_list li{border-bottom:1px dotted #333;}
	
		ul.comment_list li p{/*font-family:Arial, Helvetica, sans-serif;*/ font-size:12px;}
		.comment_date {font-size:12px;color:#333; font-family:Arial, Helvetica, sans-serif;}
		.comment_name {font-size:14px;color:#999; font-family: Ubuntu;}
		ul.comment_list li.last{border:none;padding:0px;}
	
	/*----------------------------
	viii.--blockquotes
	-----------------------------*/
	
	blockquote{
	background: url(../images/black/open_quote.png)0 0 no-repeat;
	font-style: italic;
	font-size: 15px;
	line-height: 20px;
	font-family: ubundo;
	color: #F03;
	text-decoration: blink;
}
	
		/*quote positioning*/
		blockquote p {
	font-size:15px;
	color:#999;
}
		blockquote p.clientRef {font-size:11px;color:#999;}
	
		/*blockquote alignment*/
		/*ref style.css*/
	
	/*----------------------------
	ix.--divs
	-----------------------------*/	
		
	.div-simple {width:100%;height:1px; border-top:1px transparent;border-bottom:1px solid #2f2f2f;}
	.div-double {width:100%; height:0px; border-top:1px solid #2f2f2f;border-bottom:1px solid #666;}
	
		/*div styles*/
		.dotted{border-top-style:dotted;border-bottom-style:dotted;}
		.dashed{border-top-style:dashed;border-bottom-style:dashed;}