/* CSS Document */

/* Color Table 

Dark Grey - #585858
Mid Gray - #7A7A7A
Light Gray - #C3C3C3
Blue - #6FCCEA


*/


* {margin: 0; padding: 0;}
	
body {
	color: #ACACAC;
	background: #585858 url(../images/bg_body.gif) 0 0 repeat-x;
	font-family: "Lucida Grande", "Lucida Sans", Lucida, "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;
	font-size: 62.5%;
	line-height: 140%;
	}

p {
	margin: 2px 0 10px 0;
	font-size:1.2em;
	line-height:1.7em;
	}
p span { }

h1, h2, h3, h4, h5, h6 {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; line-height: 100%; margin-bottom: 0;}
h1 {color: #598695; font-size: 24px; text-transform: uppercase;}
h2 {background: url(../images/underline.gif) 0 16px no-repeat; font-size: 22px; margin: 0; padding: 0 0 8px 0; text-shadow:#222222 2px 2px  0;}
h3 {font-size: 16px; color:#6FCCEA; text-shadow:#222222 2px 2px  0;}
h4 {font-size: 1.4em; text-shadow:#222222 2px 2px  0;}
h5 {font-size: 12px;}

#services #wrapper h4 {color:#FFFFFF; background:url(../images/bg_line.gif) repeat-x 0 50%;}
#services #wrapper h4 span {background:#585858; padding-right:5px;}

abbr {border-bottom:1px dotted #999999;}

img, a img {background: none; border: 0;}

dfn {font-style: italic;}

/* Default Link Styles */
a:link {color: #6FCCEA; text-decoration: underline;}
a:visited {color: #7C8187; text-decoration: underline;}
a:hover {}
a:active {background-color: #7C8187; color: #FFF; outline: none; text-decoration: none;}

/* begin layout */

/* Navigation */

#main_nav {
	width:980px;
	position:relative;
	left:50%;
	margin-left:-490px;
	font-size: 11px;
	height: 40px;
	line-height: 100%;
	overflow: hidden;
	}
	
.smallwrapper #main_nav { width:780px; margin-left:-390px;}
.widewrapper #main_nav { width:1100px; margin-left:-550px;}

#main_nav ul {
	position: absolute;
	top: 0px;
	right:0px;
	width:470px;
	background: transparent url(../images/nav_matrix.gif) no-repeat 0px 0px;
	}

#main_nav ul li {display: inline;}
#main_nav ul li a {
	position: absolute;
	top: 0;
	width: 75px;
	text-decoration: none;
	padding: 38px 0 0 0;
	overflow: hidden;
	height: 0px !important;
	background: url(../images/nav_matrix.gif) no-repeat;
	}

#main_nav li#mnav_home a {background-position: 0px 0px; width: 75px; left: 0px;}
#main_nav li#mnav_profile a {background-position: -75px 0px; width: 78px; left: 76px;}
#main_nav li#mnav_services a {background-position: -153px 0px; width: 86px; left: 153px;}
#main_nav li#mnav_portfolio a {background-position: -239px 0px; width: 92px; left: 239px;}
#main_nav li#mnav_blog a {background-position: -328px 0px; width: 65px; left: 328px;}
#main_nav li#mnav_contact a {background-position: -400px 0px; width: 82px; left: 400px;}


/* Top Content Styles */

#top_wrapper {
	background:#FFFFFF;
}

#top{
	width:980px;
	height:auto;
	position:relative;
	left:50%;
	margin-left:-490px;
	padding-top:15px;
	color:#3C3C3C;
	}

#top h2, #top h3, #top h4 {text-shadow:none;}

#top_wrapper .vcard {
	position:relative;
	left:400px;
	}
	
	

.smallwrapper #top {width:780px; margin-left:-390px;}
.widewrapper #top {width:1100px; margin-left:-550px;}

.container {position:relative; width:500px; left:300px; float:left; margin-bottom:10px;}

#profile .container {left:300px; width:400px;}
#services .container {width:400px;}
#profile .smallwrapper .container {left:350px; width:430px;}
#services .smallwrapper .container {left:280px; width:265px;}


#top_nav {
	float: left;

	margin-left:340px;
	width:175px;
	}

/*  logo styles */

#logo {
	position:absolute;
	left:10px;
	top:30px;
	z-index:20;
	width:225px;
	height:75px;
	background: url(../images/img_logo.gif) left top no-repeat;
	}

#logo a {
	display:block;
	width:225px;
	height:75px;
	text-decoration:none;
	}
	
#logo span{display:none;}

/* top nav styles */

#top_nav h4 {
	font-size:1.8em;
	padding:4px 0 10px 25px;
	background: url(../images/icon_down.gif) no-repeat left top;
	}
	


#top_nav ul{width:170px; list-style:none; margin:0; padding:0;}
#top_nav ul li{margin-bottom:1px;}
#top_nav li a {
	display:block;
	background:#656565;
	font-size:1.2em;
	text-decoration:none;
	padding:5px;
	color:#FFFFFF;
	}

#top_nav li a:hover {background:#3C3C3C;}

/* Main Layout Styles */

#wrapper {
	float:left;
	width:980px;
	position:relative;
	left:50%;
	margin-left:-490px;
	padding-top:20px;
	color:#C3C3C3;
	color:#FFF;
	}

.smallwrapper #main {width:780px; margin-left:-390px;}
.widewrapper #main {width:1100px; margin-left:-550px;}

#wrapper a:link {color: #6FCCEA; text-decoration: underline;}
#wrapper a:visited {color:#FFFFFF; text-decoration: underline;}
#wrapper a:hover {}
#wrapper a:active {background-color: #7C8187; color: #FFF; outline: none; text-decoration: none;}

/* Content Layout Styles*/
	
div#primary{
	display:inline;
	float: left;
	width: 425px;
	margin-bottom:20px;
	margin-right:25px;
	margin-left:300px;
	}
	
.smallwrapper div#primary {
	width:550px;
	float:right;
	margin-right:0;
	}
.widewrapper div#primaryContent {width:500px;}
	
div#secondary{
	float:left;
	width:225px;
	display:inline;
	}

#secondary ul {
	list-style:none;
	margin:0 0 0 10px;
	padding:0;
	font-size:1.2em;
	}
#secondary ul li {
	background:url(../images/bullet.gif) no-repeat left center;
	margin-top:5px;
	padding-left:15px;
}

.smallwrapper div#secondaryContent {width:550px; float:right;}
.widewrapper div#secondaryContent {width:300px;}

div#extra{
	float:left;
	width:275px;
	margin-left:-965px;
	display:inline;
	}

#extra img {
	border:1px solid #DDD;
	padding:5px;
	margin-bottom:10px;
	background:#7A7A7A;
	}

#extra p {line-height:1.2em; font-size:1.2em;}
#extra h5 {font-weight:normal;}
#staff {margin-top:30px;}

/* Home Content Layout Styles*/

#home #extra {width:180px; margin-left:-950px;}
#home #primary {width:450px; margin-left:210px;}
#home #secondary {width:270px;}
#homelogo {width:225px; height:135px; position:absolute; top:30px;}

#mh_home {
	position:relative;
	height:245px;
	background:url(../images/img_mast_home.jpg) bottom right no-repeat;
	text-align:right;
	}

#mh_home span {display:none;}

#callPortfolio {
	display:block;
	position:absolute;
	right:235px;
	top:50px;
	width:213px;
	height:25px;
	background:url(../images/btn_portfolio.gif) no-repeat left top;
}
#callServices {
	display:block;
	position:absolute;
	right:235px;
	top:85px;
	width:213px;
	height:25px;
	background:url(../images/btn_services.gif) no-repeat left top;
}


/* Profile Content Layout Styles*/
#profile .smallwrapper #primary {width:600px;}
#proflie #extra {width:150px;}

/* Services Content Layout Styles*/	
#services #extra {width:220px;}
#services .smallwrapper #extra {width:150px;}
#services .smallwrapper #primary {width:600px;}


#services_design, #services_video, #services_marketing, #services_additional {
	background:no-repeat 0 5px;
	margin-top:8px;
	padding-left:55px;
	min-height:68px;
	}

#services_design {background-image:url(../images/icon_design.gif);}
#services_video {background-image:url(../images/icon_video.gif);}
#services_marketing {background-image:url(../images/icon_marketing.gif);}
#services_additional {background-image:url(../images/icon_additional.gif);}

#vidcam {position:absolute; bottom:-46px; left:-250px; z-index:12;}
#img_mouse {
	background:url(../images/img_mouse.png) no-repeat left top;
	width:193px;
	height:129px;
	position:absolute;
	bottom:-46px; 
	left:30px;
	z-index:12;
	}
#img_laptop {
	background:url(../images/img_laptop.png) no-repeat left top;
	width:193px;
	height:129px;
	position:absolute;
	bottom:-46px; 
	left:30px;
	z-index:12;
	}
#img_vidcam {
	background:url(../images/img_camera.png) no-repeat left top;
	width:193px;
	height:129px;
	position:absolute;
	bottom:-46px; 
	left:30px;
	z-index:12;
	}
#img_inbox {
	background:url(../images/img_inbox.png) no-repeat left top;
	width:193px;
	height:129px;
	position:absolute;
	bottom:-46px; 
	left:30px;
	z-index:12;
	}


/* Portfolio Content Layout Styles*/
#portfolio #primewrap {float:right; width:100%; margin-left:-270px;}
#portfolio div#primary {margin:0 0 0 270px; width:675px;}
#portfolio div#secondary { width:250px; margin:0 0 0 0px; float:left:; }
#portfolio div#extra { float:none; clear:left; margin:0;}

#portfolio .smallwrapper div#primary { width:675px;float:left; }
#portfolio .smallwrapper div#secondary {display:none;}

#portfolio .smallwrapper #feature {left:530px; width:230px;}
.smallwrapper #feature img.screenshot {left:-250px;}


.portfolio_item {
	float:left;
	width:195px;
	margin:0 25px 10px 0;
	}

.portfolio_item img {
	background:#7A7A7A;
	padding:4px;
	border:1px solid #C3C3C3;
	}

.portfolio_item p a {
	width:76px;
	height:27px;
	background:url(../images/btn_view_site.gif) no-repeat 0 -26px;
	display:block;
	}
.portfolio_item p a span{display:none;}

.portfolio_item p a:visited {background-position:0 -52px;}
.portfolio_item p a:hover {background-position:0 0;}

#portfolio h3 {
	font-size:1.4em;
	font-weight:normal;
	color:#E1E1E1;
}


#feature {
	position:relative;
	width:300px;
	left:580px;

	padding-bottom:25px;
	}
#feature img.screenshot {
	position:absolute;
	top:0;
	left:-280px;
}

#feature ul {list-style:none; font-size:1.1em; margin-top:-5px;}
#feature ul li {
		background:url(../images/bullet.gif) no-repeat left center;
	margin-top:5px;
	padding-left:15px;
}

/* Contact Content Layout Styles*/
#contact div#primary {width:675px; margin-left:280px;}
#contact .container {width:300px;}

#contact .smallwrapper #primary {background:#777; width:500px;}
#contact .smallwrapper .vcard {position:absolute; top:200px; left:20px; color:#C3C3C3;}



/*  footer stlyes  */
#footspace {height:10px; clear:both;}

#footer {
	clear:both;
	width:980px;
	position:relative;
	left:50%;
	margin-top:15px;
	margin-left:-490px;
	padding-top:10px;
	text-align:left;
	color:#D7D7D7;
	border-top:1px solid #C3C3C3;
	}
.smallwrapper div#footer {width:780px; margin-left:-390px;}
.widewrapper div#footer {width:1100px; margin-left:-550px;}

#footer ul{margin:0 0 5px 0;}

#footer_nav ul li{
	list-stlye:none;
	display:inline;
	padding-right:20px;
	font-size:1.2em;
	}

#footer a{color:#FFFFFF; text-decoration:none;}

#footer_nav ul li a{text-decoration:none; color:#FFFFFF;}
#footer_nav ul li a:link{text-decoration: none;}
#footer_nav ul li a:visited{text-decoration: none;}

#link_mt {margin-left:15px;}
#link_mt, #link_apple {position:relative; top:7px;}
#footer_right {position:absolute; top:5px; right:0; width:200px; text-align:right;}
#link_valid, #link_client {font-size:1.2em;}
#link_valid {display:none;}
#link_valid a {color:#6FCCEA; font-weight:bold;}

ol li {padding-left: 50px; margin-bottom: 4px;}
ol {margin-bottom: 16px; list-style:none;}

ul{margin-left:20px;}

#sub span{background-color:#CCCCCC;}

#error{margin-top:140px;}

#f_client{background:url(../images/icon_user.gif) no-repeat top left; padding-left:20px;}
#f_link{background:url(../images/icon_link.gif) no-repeat top left; padding-left:20px;}
#f_did{background:url(../images/list_images.gif) no-repeat top left; padding-left:20px;}

#contact .vcard {
	font-size:1.3em;
	line-height:1.2em;
}

/* ----- Classes ------ */
.br {padding-bottom:5px; border-bottom: 1px dotted #838383;}
.left {float:left; margin-bottom:10px; margin-right:10px;}
.right{float:right;}
.clear {clear:both;}
.wrapclear {clear:both; height:50px; margin-top: -4px;}
.clearport{clear:both; padding-top:15px;}
.line {padding-bottom:20px; border-bottom:1px solid #C3C3C3; margin-bottom:20px;}
.boxed {
	background:#565555 url(../images/bg_boxed.gif) repeat-x left bottom;
	padding:10px 10px 20px 10px;
	border:1px solid #AAAAAA;
	float:left;
}
.outline {border:1px solid #C3C3C3;}