@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;}
	.content-loader{display: none; position: absolute; width: 20px; height: 20px; background: url(../images/black/loader.gif) no-repeat; top: 60px; left: 235px; z-index: 99;}

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

	.tweet .txt,p,#footer,#nav li a,blockquote p.clientRef,.field, .tarea,ul.list{color:#666;}
	#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: "Helvetica Neue", "Helvetica", Arial;}

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

	/*----------------------------
	i.-- supersized
	-----------------------------*/
	
	#supersized-loader {background: url(../images/black/loader.gif) no-repeat center center;}
	#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{background:#000;}
	#sideBar  #close-but{background:url(../images/black/toggle_but.png) top center no-repeat; font-family: "Helvetica Neue", "Helvetica", Arial; 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:#00ccff;}
	#launch-but #circle-overlay{background:#000;}
	#launch-but #label{text-align:center;color:#fff;}

/*--------------------------------------------------------
	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:12px; text-transform:uppercase;text-decoration:none;}
	#nav li a:hover{text-decoration:none;color:#fff;}
	#nav li a.active {color:#fff;}
	
	/*----------------------------
	ii.-- sub menu
	-----------------------------*/
	 
	#nav ul{font-size:12px;}
	#nav li ul a{text-transform: lowercase;color:#333;}
	#nav li:hover a{text-decoration:none;text-shadow:none;}
	#nav li:hover ul a{text-decoration:none; font-size:12px;}


/*--------------------------------------------------------
	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: "Helvetica Neue", "Helvetica", Arial;font-size:12px;line-height:18px;font-style:italic;}
	.tweet .time{color:#333; font-family: "Helvetica Neue", "Helvetica", Arial;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:0 -160px no-repeat;}
	._videoThumb{background:0 -160px no-repeat;}
	
	/*----------------------------
	iv.-- blog
	-----------------------------*/
	
	.entrySpec{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#cccccc;}
	#blogContainer ul li div.post,#blogContainerUnpaged 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: "Helvetica Neue", "Helvetica", Arial; 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: "Helvetica Neue", "Helvetica", Arial; 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:#00ccff;}
	.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: "Helvetica Neue", "Helvetica", Arial; font-size:11px;}


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

	a,a:visited{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#00ccff; text-decoration:none;}
	a:hover{text-decoration:underline;}
	a.r-more,a:visited.r-more{font-family: "Helvetica Neue", "Helvetica", Arial; font-size:12px; color:#00ccff; text-decoration:none;}
	a.r-more:hover{text-decoration:underline;}


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

	h1,h2,h3,h4,h5,h6{color:#ccc;font-family:Ubuntu;}
	h1.pageHeading{font-family: "Bebas Neue"; font-size:130px;color:#fff !important;}
	p{font-family: "Helvetica Neue", "Helvetica", Arial; font-size:12px; line-height:16px;}
	p.slogan{font-family: "Helvetica Neue", "Helvetica", Arial;  font-size:12px;color:#00ccff;}



/*--------------------------------------------------------
	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: #111; color:#888 !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;border: 1px 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: "Helvetica Neue", "Helvetica", Arial;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;}
	.media_holder{ background:url(../images/black/loader.gif) center center 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; }

	ul.list li span {background: #000;position: absolute;width: 100%;height: 100%;left:16px;z-index: -1;}
	
		/*list colors*/
		ul.list li.gray{background: url(../images/elements/lists/list_items_gray.png) no-repeat}
		ul.list li.teal{background:url(../images/elements/lists/list_items_teal.png) no-repeat}
		ul.list li.navy{background:url(../images/elements/lists/list_items_navy.png) no-repeat}
		ul.list li.red{background:url(../images/elements/lists/list_items_red.png) no-repeat}
		ul.list li.magenta{background:url(../images/elements/lists/list_items_magenta.png) no-repeat}
		ul.list li.orange{background:url(../images/elements/lists/list_items_orange.png) no-repeat}
		ul.list li.yellow{background:url(../images/elements/lists/list_items_yellow.png) no-repeat}
		ul.list li.green{background: url(../images/elements/lists/list_items_green.png) no-repeat}
		
		/*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:#999;}
		ul.content_list li p span.title{font-family:"Times New Roman", Times, serif; font-style:italic;color:#999;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: "Helvetica Neue", "Helvetica", Arial;}
		.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;}
	
		/*quote positioning*/
		blockquote p {font-size:15px;color:#666;}
		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;}