/*   
Theme Name: Mactastic
Theme URI: http://mactastic.themedemo.net
Description: Mactastic
Author: Maximus
Author URI: http://themedemo.net?ref=Maximus
Version: 1
*/

@import "css/reset.css";

/* 
TABLE OF CONTENTS
	
	1. GENERAL
	2. STRUCTURE
		2.1 Wrappers & Floating
		2.2 Header
		2.3 Navigation
		2.4 Main (Content & Sidebar)
		2.5 Footer
	3. POSTS
		3.1 Typography
	4. COMMENTS
		4.1 Comments
		4.2 Comment Form
	5. WIDGETS
		5.1 Sidebar Widgets
		5.2 Special Widgets
	6. MISC
		6.1 Buttons
		6.2 Thickbox
		6.3 Carousel
		6.4 Image Preloading
		6.5 Pagination
		6.6 Separators
		6.7 Billboard
		6.8 Info Columns
		6.9 Portfolio
		6.10 Titles & Descriptions
		6.11 WP PageNavi
	7. STYLESHEETS
*/	

/* 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; }

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

/* 2.1 Wrappers & Floating */

#page-container { }

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

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

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

.align-center { text-align:center; }

img.alignright {float:right;  margin: 0 0 20px 20px; }
img.alignleft {float:left; margin: 0 20px 20px 0;}
img.aligncenter {display: block; margin: 15px auto; }
a img.alignright {float:right; margin:0 0 20px 20px}
a img.alignleft {float:left; margin:0 20px 20px 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

/* 2.2 Header */

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

/* 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 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; }
	#nav ul li .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; }
	#nav ul li ul li { line-height:36px;} 

/* 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; box-shadow: 0 1px 2px #ddd; -webkit-box-shadow: 0 1px 2px #ddd; -moz-box-shadow: 0 1px 2px #ddd; }
#content { width: 575px; }
#sidebar { width: 280px; } 
	#sidebar .widget { margin-bottom:60px; }
	#sidebar ul, #sidebar ol { list-style-type:none; }
	
/* 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; padding-bottom: 2px;}

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

/* 3.1 Typography */


a { text-decoration:none; color: #0088cc; }
p,ul, ol, blockquote, pre { margin-bottom:25px; }
ul, ol { list-style-position:inside; margin-left:5px; text-transform: capitalize; }
ul li, ol li { line-height:24px;  }
ul ul, ol ol { margin-bottom:0px; padding-left:20px; }
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
ol ol ol{ list-style-type: lower-roman; }
pre { background-color:#eee; border:1px solid #aaa; padding:10px; }
blockquote  { padding: 10px 20px 10px 20px; font-style:italic; }

#sidebar ul, #sidebar ol { list-style-type:none; }
#sidebar a { color:#333; }
#sidebar select { width:270px; }
#sidebar p, #sidebar ul, #sidebar ol, #sidebar blockquote, #sidebar pre { margin-bottom:15px; }

h1 { font-size:24px; }
h2 { font-size:18px; text-transform:capitalize; }

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

#comments { padding-bottom:30px; }

#comments ol, #comments ul { list-style-type:none; }

.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; }

#comments ul li, #comments ol li  { line-height:18px; }

#comments ul.children { width: 410px; margin-bottom:0px; float:right; }
	#comments ul.children li{ background-image:none; border:none; }
	#comments ul.children .comment-meta { width:auto; margin-top:0; }
		#comments ul.children .comment-meta span { line-height:20px; }
		#comments ul.children .comment-meta-gravatar{ float:left; }
		#comments ul.children .comment-meta-gravatar img{ width:25px; height:25px; }
		#comments ul.children .comment-meta-info { float:left; }
		#comments ul.children .comment-meta-info-name { margin-right:15px; float:left;}
		#comments ul.children .comment-meta-info-date { float:left; margin-right:15px;}
		#comments ul.children .comment-reply { float:left; }

/* 4.2 Comment Form */

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

/* 5.1 Sidebar Widgets */

.widget { position:relative; }
.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; }

.widget li.cat-item { text-align:right; list-style-type:none; }
.widget li.cat-item a { float:left; }

/* 5.2 Special Widgets */

#calendar_wrap { border:1px solid #eaeaea; padding:10px; font-size:12px;}
#wp-calendar { width:100%; text-align:center; }
#wp-calendar, #wp-calendar a { color:#aaa; }
#wp-calendar caption { border-bottom:1px solid #eaeaea; margin-left:-10px; margin-right:-10px; padding-bottom:10px; margin-bottom:10px; color:#333; font-weight:bold;}	

.widget_categories { background: transparent url('images/sidebar/categories.png') no-repeat right top; }
.widget_archive { background: transparent url('images/sidebar/archive.png') no-repeat right top; }
.widget_calendar { background: transparent url('images/sidebar/calendar.png') no-repeat right top; }
.widget_recent_comments { background: transparent url('images/sidebar/comments.png') no-repeat right top; }
.widget_links { background: transparent url('images/sidebar/blogroll.png') no-repeat right top; }

.widget.testimonials  .testimonial-entry{ margin-bottom:20px; }
.widget.testimonials  .testimonial-entry img{ vertical-align:middle; }

.widget_twitter_widget ul li { margin-bottom:20px; }
ul.tweet_list, ul.tweet_list li { margin-left: 0; line-height: 19px; }

/* ------- */	
/* 6. MISC */
/* ------- */

/* 6.1 Buttons */

.normal-button { height:23px; padding-left:10px;; display:block; float:left; color:#333; margin-right:10px; line-height: 21px; }	
#portfolio-overview-page .current-cat a, .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; }
#portfolio-overview-page .current-cat a span, .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 { 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 43px; }
.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-page #right .description { padding-top: 5px; }
#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-anchor { margin-bottom:15px; }
.portfolio-entry.last { margin-right:0px; }
.portfolio-entry a.portfolio-entry-anchor { display:block; width: 270px; height:194px; }
#portfolio-overview-page #portfolio-categories { list-style-type:none; margin:0px; padding:0px; overflow:hidden; } 
#portfolio-overview-page #portfolio-categories li { display:block; float:left; }

/* 6.10 Titles & Descriptions */

h2.heading-inline { float:left; }		
h2 a { color: #333; }
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; }
#archive-title h2 { text-align:center; }

/* 6.11 WP PageNavi */
.wp-pagenavi { overflow:hidden; }
.wp-pagenavi span.pages { font-weight:bold; float:left; margin-right:15px; line-height: 21px; }
.wp-pagenavi a { height:23px; padding-left:10px; display:block; float:left; color:#333; margin-right:10px; line-height: 21px; }
.wp-pagenavi .current, .wp-pagenavi .nextpostslink  { 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; }
.wp-pagenavi .current span, .wp-pagenavi .nextpostslink span { background: transparent url('images/button_right_cap.png') no-repeat center right; float:left; display:block; height:23px; padding-right:10px; line-height: 21px; }


/* -------------- */
/* 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'); }