/* master.css */

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

/* Global Properties */
img	{display:inline; border:none;}

.hide	{display:none;
		visibility:hidden;}	
strong	{font-weight:bold;}

a	{text-decoration:none;
	color:#000;
	padding-bottom:2px;
	border-bottom:1px dotted #121212;}		

a:link, a:visited	{color:#000;}	
a:hover, a:active	{color:#ccc}	
		
.clear	{clear:both;
		display:block;}
		
#container	{width:960px; margin:auto; position:relative;}

/* Header */
#header	{overflow:hidden;}
#branding	{width:360px; height:360px; float:left; background-color:#000; color:#fff;}
#logo	{margin-top:220px;}
#info	{width:600px; height:80px; float:left; text-align:right; font-size:10px; overflow:hidden;}
#info p	{line-height:2em;}
#send_email	{background:url(../_img/mail.gif) 580px 6px no-repeat; padding-right:26px;}
#phone	{background:url(../_img/comment_left.gif) 580px 4px no-repeat; padding-right:26px;}
#switch	{position:absolute; top:340px; left:345px;}

/* Menu */
#main_menu	{clear:both; width:960px; height:40px; position:fixed; top:0; z-index:9999; font-size:12px; line-height:3.2em;}
#main_menu ul	{list-style:none;}
#main_menu li	{display:inline; position:relative;}
#main_menu li	 a	{display:block; width:80px; height:40px; float:left; text-align:center; color:#000; font-style:italic; background-color:#ccc; border:none;}
#main_menu li a.connect	{width:110px; background-color:#eee;}
#main_menu li a:hover	{background-color:#000; color:#fff; font-weight:bold;}

#main_menu ul ul	{width:600px; height:40px; display:none; float:right; background:url(../_img/stripe.png);}
#main_menu ul ul li a	{width:100px; padding:0; border:none; background:none; height:40px;}

#main_menu ul li:hover ul	{display:block;}

#about #main_menu li a.about	{font-weight:bold; background-color:#000; color:#fff;}
#portfolio #main_menu li a.portfolio	{font-weight:bold; background-color:#000; color:#fff;}
#services #main_menu li a.services	{font-weight:bold; background-color:#000; color:#fff;}

/* Content */
#content	{overflow:auto; line-height:2.6em; clear:both;}
#sup	{float:left; width:360px; height:360px;}
#main	{float:left; width:600px; margin-bottom:20px;}
#about_me	{height:150px; overflow:hidden; margin-bottom:10px;}	
#side_info	{float:left; width:200px; height:460px; background:url(../_img/stripe.png); clear:left;}
.about_desc	{float:right; width:370px; padding-right:10px;}
.me	{float:left; width:200px; height:150px; background-color:#fff;}
.slogan	{float:right; width:370px; height:150px; font-size:14px; font-weight:bold; line-height:20px; padding:80px 10px 0 20px;}

/* Portfolio */
.sites	{width:960px; clear:both; margin-bottom:20px; border-bottom:5px solid #ccc; overflow:auto;}
.last	{border:none;}

.site_info	{float:left; width:340px; height:550px; padding-right:20px; position:relative;}
.slide_container	{float:left; width:600px; height:580px; position:relative;}

.site_heading	{text-align:right; margin:100px 0 60px; font-size:12px; font-weight:bold; line-height:1.6em;}
.site_desc	{line-height:2em; padding-left:10px;}
.site_subhead 	{font-size:10px; font-weight:bold; padding-left:10px;}
.site_desc a, .about_desc a	{font-size:10px; font-weight:bold;}
.note	{font-size:10px;}
span.image-wrapper	{width:600px; height:520px; display:block; position:absolute; top:0; left:0;}
a.advance-link {display:block; padding:0; border:0;}

.thumbs_container	{position:absolute; bottom:20px; right:20px;}
ul.thumbs li {float:left; margin: 5px 0 5px 7px; list-style: none;}
a.thumb { padding:2px; display: block; border: 1px solid #ccc;}
ul.thumbs li.selected a.thumb {	background:#000;}
a.thumb:focus {outline: none;}
ul.thumbs img {border:none; display:block;}

div.loader {position: absolute; top: 0; left: 0;	background-image: url('../_img/loader.gif'); background-repeat: no-repeat; background-position: center; width: 550px; height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */}

/* Services */
.services	{width:190px; height:360px; float:left; text-align:right; padding-right:10px;}
#services #column	{float:left; width:400px; height:360px; background:url(../_img/stripe.png);}
.services h2	{font-size:14px; font-weight:bold; padding-top:40px;}

.list_of_service	{list-style:none; line-height:1.6em; margin-top:10px}
.design li	{background:url(../_img/paint.gif) right 4px no-repeat; padding-right:16px;}
.develop li	{background:url(../_img/cube.gif) right 4px no-repeat; padding-right:16px;}


/* Footer */
#footer	{clear:both; height:30px; background-color:#000; color:#fff; font-size:11px; line-height:2.8em;}
#footer a	{padding-bottom:2px; border-bottom:1px dotted #ccc; color:#ccc;}
#footer a:hover	{color:#fff;}
a#twitter	{border:none;}
a#twitter img	{padding:7px 5px; float:left;}
#facebook	{background:#000 url(../_img/facebook.jpg) 10px 10px no-repeat; padding-left:50px;}
#legal	{font-size:10px; margin:5px 10px;}