@import "/css/reset.css";

/* GENERAL */

html { background: url('/images/bg.png') repeat; overflow:scroll; overflow-x: hidden; }
body { font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; color:#333; background: transparent url('/images/top_shadow.png') repeat-x; text-align:center;}
input, textarea { font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; }

.h1heading {
	position:relative;
	left: -9999px;
}

#studioimg {
	float:right;
	border:10px solid #f3f3f3;
	position: relative;
	top: -25px;
	left:-70px;"
}

/* ----------- */
/* 2.STRUCTURE */
/* ----------- */

/* 2.1 Wrappers & Floating */

#page-container { background: transparent url('/images/bg2.png') repeat; }

#wrapper { text-align:left; margin:0px auto; width:960px; }

#main { }
#content { }
#sidebar { } 

.fl { float:left; }
.fr { float:right; }

/* 2.2 Header */

#header { padding:30px 15px 15px 15px; }
#tagline { text-shadow: 0 1px 0px white; font-size:13px; color:#505050; line-height:30px; font-style:italic;  }

.profilepic {float:right;padding-left: 10px;padding-bottom:10px;}

/* 2.3 Navigation */
	
#nav { margin-bottom:25px; background: transparent url('/images/nav_bg.png') repeat-x; height:48px; border:1px solid black; border-radius:5px; -moz-border-radius:5px; }
#nav ul  { z-index:500; margin-left:10px; margin-bottom:0px; font-weight:bold;  position:absolute;}
#nav ul li { float:left; display:block; padding:0px 16px; font-size: 15px; line-height:48px; text-shadow: 1px 1px 0px black;}
#nav ul li ul li { line-height:36px;} 
#nav ul li a { color:white; text-decoration:none; }
#nav-search { line-height:48px; }
#nav-search #s { float:left; width: 220px; padding:7px 10px; font-size:15px; font-weight:bold; color:#aaa; background: transparent url('/images/search_bg.png') repeat-x; border:none; margin:7px 0; outline:none;}
#nav-search #s-submit { float:left; margin:10px 10px 10px 9px; }
.sf-menu-contains-sub { background-image: url('/images/nav_arrow.png'); background-repeat: no-repeat; background-position:right center;}
#nav ul li ul { margin-left:0px; }
#nav ul li ul .sf-menu-contains-sub { background-position:170px center; }

/* 2.4 Main (content and sidebar) */

.white-wrap { margin-bottom:40px; padding: 25px 30px 25px 30px; background:white; border:1px solid #d6d6d6; border-radius:5px; -moz-border-radius:5px; }
#content { width: 575px; }
#sidebar { width: 280px; } 
#sidebar .widget { margin-bottom:60px; }

/* 2.5 Footer */	

#footer { padding:0px 10px 30px 10px; font-size:11px; color:#6a6a6a; text-shadow: 1px 1px 0px white; }
#footer-social ul li{ display:block; float:left; list-style-type:none; margin-left:18px; }
#footer-social ul li a { color:#6a6a6a; text-decoration:none; }
#footer-social ul li img { vertical-align:middle; margin-left:5px;}

/* -------- */
/* 3. POSTS */	
/* -------- */
	
.post-entry { margin-bottom:75px; }
.post-single { padding-bottom:30px; }

/* 3.1 Typography */

a img {border: 0;}
a { text-decoration:none; color: #0088cc; }
p,ul, ol, blockquote, pre { margin-bottom:25px; line-height: 19px; }
ul, ol { line-height:24px; list-style-position:inside; margin-left:5px; text-transform: capitalize; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }

blockquote  { padding: 10px 20px 10px 20px; font-style:italic; }

#sidebar ul { list-style-type:none; }
#sidebar a { color:#333; }
#sidebar select { width:270px; }
h1 {  }
h2 { font-size:18px; text-transform:capitalize;}
h3 {  }
h4 {  }
h5 {  }

	
/* ----------- */
/* 4. COMMENTS */
/* ----------- */
	
/* 4.1 Comments */

#comments { padding-bottom:30px; }

.comment { background: transparent url('/images/column_separator.png') left bottom no-repeat; border-bottom:1px solid #eaeaea; margin-bottom:20px;}

.comment-list li { list-style-type:none; }

.comment-meta { width:160px; margin-top:5px; }
.comment-meta-gravatar { margin-right:15px; }
.comment-meta-info span { display:block; margin-bottom:5px; font-size:11px; line-height:11px;}
.comment-meta-info-name { font-weight:bold; font-size:12px; line-height:12px;}
.comment-meta-info-date { color:#777777; font-style:italic; }
.comment-content { width: 410px; line-height: 18px; text-transform: none; }

.comment-replies { width: 410px; margin-bottom:0px; }
.comment-replies .comment-meta { width:auto; margin:0 0 10px 0; }
.comment-replies .comment-meta-gravatar { width:25px; height:25px; }
.comment-replies .comment-meta-info { padding-top: 7px; }
.comment-replies .comment-meta-info-name { margin-right:15px; }

/* 4.2 Comment Form */

#leave-response label { font-size:16px; color:#aaa; font-weight:bold; }
#leave-response input, textarea { padding:5px 10px; font-size:15px; color:#aaa; background: #f3f3f3 url('/images/input_bg.png') repeat-x; border:1px solid #b2b2b2; -moz-border-radius:5px; border-radius:5px; margin:7px 0; outline:none; }
#leave-response input { margin-right:15px; }
#leave-response textarea { width:565px; height:165px; }		
	
/* ---------- */
/* 5. WIDGETS */
/* ---------- */

/* 5.1 Sidebar Widgets */

.widget.recent-comments .comment-gravatar { width:25px; height:25px; margin-right:10px; }
.widget.recent-comments .comment-name { font-weight:bold; font-size:12px; margin-right:10px; line-height:25px;}
.widget.recent-comments .comment-date { font-size:11px; font-style:italic;  line-height:25px;}
.widget.recent-comments .comment-info { margin-bottom:20px; }
.widget.recent-comments p { margin-bottom:10px; }

/* 5.2 Special Widgets */
	
	
/* ------- */	
/* 6. MISC */
/* ------- */

/* 6.1 Buttons */

.normal-button { height:23px; padding-left:10px;; display:block; float:left; color:#333; margin-right:10px; line-height: 21px; }	
.styled-button { background: transparent url('/images/button_left_cap.png') no-repeat; height:23px; padding-left:10px; display:block; float:left; color:white !important; margin-right:10px; font-size: 11px; text-shadow: 0 -1px 0 #34698f; line-height:20px !important; }
.styled-button span { background: transparent url('/images/button_right_cap.png') no-repeat center right; float:left; display:block; height:23px; padding-right:10px; }

/* 6.2 Thickbox */ 

#thickbox-mask { position:absolute; top:0px; left:0px; background:black; opacity:0.7; z-index:200; display:none;  zoom:1; filter: alpha(opacity=70); }
#thickbox-content  { display:none; text-align:left; position:absolute;  top:50px;  width: 890px;  z-index: 700;  background:white;  border-radius:10px;  -moz-border-radius:10px; padding:35px; }
#thickbox-content .close { position:absolute; top:-10px; left:-10px; }
#thickbox-content #left{ width:270px; }
#thickbox-content #right { width: 530px; }

/* 6.3 Carousel */

.carousel { margin-top:20px; }
.scrollable { position:relative; overflow:hidden; width: 500px; height:100px; float:left; }
.scrollable .items { width:20000em; position:absolute; }
.scrollable .items div { float:left; margin:0px 10px; }
.scrollable .items div a { margin: 0px 10px; display:block; float:left; height:100px; width:100px; }
#thickbox-big-image-anchor { height: 380px; width:530px; display:block; }
.carousel .prev { margin-top:40px; height:13px; width:14px; background: transparent url('/images/carousel_arrow_left.png') no-repeat; }
.carousel .next { margin-top:40px; height:13px; width:14px; background: transparent url('/images/carousel_arrow_right.png') no-repeat; }

/* 6.4 Image Preloading */

.preloading { background: white url('/images/loader.gif') 50% 50% no-repeat; }
.with-loader { opacity:0; filter: alpha(opacity = 0); visibility:hidden; }

/* 6.5 Pagination */

.pagination { margin-top:30px; }
.pagination .pagination-page-info { font-weight:bold; margin-right:25px; line-height: 21px; }

/* 6.6 Separators */

.separator { background: transparent url('/images/column_separator.png') no-repeat;margin-top:10px; margin-bottom:15px; height:12px; border-bottom:1px solid #eaeaea; }
.separator.separator-big { margin-bottom:35px; }

/* 6.7 Billboard */

#billboard { background: transparent url('/images/billboard_shadow_light.png') center bottom no-repeat; height:450px; padding-top:35px; }
	
#billboard-monitors { position:relative; height:385px; }
#left-monitor { position:absolute; padding: 14px 14px 0px 14px;left:0px; top:40px; width: 328px; height:295px; background: transparent url('/images/small_monitor.png') repeat-x; text-align:center;}
#right-monitor { position:absolute; padding: 14px 14px 0px 14px; right:0px; top:40px; width: 328px; height:295px; background: transparent url('/images/small_monitor.png') repeat-x; text-align:center;}
#center-monitor { background:transparent url("/images/big_monitor.png") repeat-x scroll 0 0;height:260px;left:255px;padding:18px 17px 100px;position:absolute;width:409px;z-index:100; }
#left-monitor-screen, #right-monitor-screen { width: 330px; height: 207px; overflow:hidden; }
#center-monitor-screen { width:411px; height:259px; overflow:hidden; }
.small-monitor-pic { height:207px; width:330px; }
.big-monitor-pic { height:259px; width:411px; }
.small-monitor-pic, .big-monitor-pic { display:none; filter: alpha(opacity=0); opacity:0; height:inherit; width:inherit; }
	
		
#billboard-navigation { text-align:center; position:relative;}
.billboard-selector { background:url("/images/billboard_selector_inactive.png") repeat-x scroll 0 0 transparent; width:11px; height:14px; display:block; float:left; margin:0 5px; position:relative;}
.billboard-selector.active-billboard-selector { background:url("/images/billboard_selector_active.png") repeat-x scroll 0 0 transparent; }

/* 6.8 Info columns */

#info-columns {
	overflow:hidden;
	margin-bottom:40px; 
	padding: 25px 30px 10px 30px; 
	background:white; 
	border:1px solid #d6d6d6; 
	border-radius:5px; -moz-border-radius:5px; box-shadow: 0 1px 2px #ddd; -webkit-box-shadow: 0 1px 2px #ddd; -moz-box-shadow: 0 1px 2px #ddd;
	}

#info-columns .info-column { width:270px;}
#second-info-column { margin:0px 39px; }
.column-heading { padding-left:43px; }
.column-heading h2 { line-height:21px; letter-spacing: -0.5px; .background: white; font-size: 16px;  }
.column-content-client-name { font-weight:bold; }
.column-content-client-info { font-style:italic; color:#959595; }
#first-info-column .column-heading { background: transparent url('/images/column_icon_1.png') no-repeat 0 2px; }
#second-info-column .column-heading { background: transparent url('/images/column_icon_2.png') no-repeat 0 2px; }
#third-info-column .column-heading { background: transparent url('/images/column_icon_3.png') no-repeat 0 2px; }
#third-info-column img { float: left; margin-right: 15px; }
#third-info-column .column-content-client-name { display: block; padding-top: 2px; }
#third-info-column .column-content-client-info { display: block; font-size: 11px; }


/* 6.9 Portfolio */

#portfolio-page #left { width: 530px; margin-right:50px; }
#portfolio-page #right{ width:275px; }
#portfolio-entries-wrapper { margin-bottom: 30px; }
.portfolio-entries { margin-bottom:50px; }
.portfolio-entries.last { margin-bottom:0px; }
.portfolio-entry  { position:relative; margin-right:44px; float:left; width: 270px; }
.portfolio-entry img { box-shadow: 0 1px 2px #ddd; -webkit-box-shadow: 0 1px 2px #ddd; -moz-box-shadow: 0 1px 2px #ddd; }
.portfolio-entry-info  { margin: 15px 0 0 0; font-weight: normal !important; line-height: 20px !important;}
.portfolio-entry-info h2, .portfolio-entry-info .description { line-height: 20px !important;}
.portfolio-entry-info h2 { font-size: 18px; font-family:"Myriad Pro","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif; font-weight: 600; }
.portfolio-entry.last { margin-right:0px; }
.portfolio-entry a.portfolio-entry-anchor { display:block; width: 270px; height:194px; }

/* 6.10 Titles & Descriptions */

h2.heading-inline { float:left; }		
span.description { display:block; font-size:11px; font-family:"Myriad Pro","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif; line-height:15px; font-style:italic; color:#777777; letter-spacing: 0.50px; }		
span.description.description-inline { float:left; margin-left: 25px; line-height:22px; }
span.description.description-right { float:right; line-height:18px; }

/* -------------- */
/* 7. STYLESHEETS */
/* -------------- */

html.white { background-image: url('/images/bg_white.png') ; }
html.yellow { background-image: url('/images/bg_yellow.png'); }
html.green { background-image: url('/images/bg_green.png'); }
html.purple { background-image: url('/images/bg_purple.png'); }
html.blue { background-image: url('/images/bg_blue.png'); }