html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,object,iframe,img,ins,kbd,q,a,abbr,acronym,address,big, cite,code,tt,var,del,dfn,samp,sub,sup,em,strong,small,strike {margin:0;padding:0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
table{border-collapse:collapse;border-spacing:0;}/* tables still need 'cellspacing="0"' in the markup */
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
blockquote, q {quotes: none;}
:focus {outline: 0;}

body {
background-color: #ffffff;
font-family: Verdana, sans-serif;
font-size:100%; /* defaults to 1em=16px -- 0.875em=14px -- 0.75em=12px -- 1.125=18px etc... */
line-height:1.125em; /* default 18px vertical rhythm */
text-align:center;
}

body#home{ 
background: #fff url(/images/bg_home_moonbeetle.jpg) top center no-repeat;
}

#wrapper {
width: 990px;
margin: 0 auto;
text-align: left;
position:relative;
}


#header{width:890px; height:110px; padding:0 50px 0 44px;}
#content {width: 890px; margin:0; padding:25px 50px;}

/* ----------- general type -------------------------------- */
h1 {font-size: 2.4em;}
h2 {font-size: 2.0em;}
h3 {font-size: 1.8em;}
h4 {font-size: 1.4em;}
h5 {font-size: 1.0em;}
h6 {font-size: 0.75em;}
p {font-size: 0.75em;line-height: 1.35em;margin: 0 0 1.25em 0;}
strong{font-weight:bold;}
em {font-style:italic;}

/* ----------- logo -------------------------------- */
#logo{width:176px; height:110px; margin:0; padding:0;}
#tag {
width: 550px;height: 70px; margin:0; padding:0;
background: transparent url(/images/bg_tag_450x50.png) bottom left no-repeat;
}
#tag a {display: block; margin:0; padding:40px 0 0 80px; color:#fff; text-decoration:none; zoom:1;
font-size:11px; font-weight:normal;}

/* ----------- main nav -------------------------------- */
#nav {position: absolute;top: 20px;right: 0;overflow: hidden;zoom: 1;width: 374px;height: 43px; margin-right:50px;}
#nav li {float: left;display: inline;}
#nav li a:link, #nav li a:visited {display: block;background: transparent url(/images/nav_sprite.png) top left no-repeat;height: 43px;text-indent: -6000px;}
#nav li #t_home {width: 61px;height: 43px;background-position: 0 0;}
#nav li #t_home:hover, #home #nav li #t_home {background-position: 0 -43px;}
#nav li #t_web {width: 81px;background-position: -61px 0;}
#nav li #t_web:hover, #webdesign #nav li #t_web {background-position: -61px -43px;}
#nav li #t_portfolio {width: 75px;background-position: -142px 0;}
#nav li #t_portfolio:hover, #portfolio #nav li #t_portfolio {background-position: -142px -43px;}
#nav li #t_showcase {width: 82px;background-position: -217px 0;}
#nav li #t_showcase:hover, #showcase #nav li #t_showcase {background-position: -217px -43px;}
#nav li #t_contact {width: 75px;background-position: -299px 0;}
#nav li #t_contact:hover, #contactus #nav li #t_contact {background-position: -299px -43px;}

/* ----------- showcase panel -------------------------------- */
#loader{height:385px; width:960px; display:block;}
#mySlides {height:510px; width:960px; margin:0 auto; display:none;}
#mySlides h2,#mySlides h3,#mySlides h4{font-family:Century Gothic, sans serif; margin-top:0; line-height:normal;}
#mySlides, #slidercontrols{width:890px; text-align:center; margin:0 auto; overflow:hidden;}
#myController span{display:none;}
#jFlowSlide{height:375px; width:960px; margin:0 auto; background:transparent url(/images/bg_showcase_panel.jpg) top left no-repeat;}
#myController span.jFlowSelected {}
.jFlowPrev{width:40%; float:left; text-align:left; cursor:pointer; color:#D3C9FC; font-size:0.75em;}
.jFlowNext{width:40%; float:right; text-align:right; cursor:pointer; color:#D3C9FC; font-size:0.75em;}
.jFlowPrev:hover{color:#fff;}
.jFlowNext:hover{color:#fff;}

a.showcase_panel_button{
display:block;
width:171px;
height:40px;
text-align:center;
padding:15px 0 0 0;
text-decoration:none;
color:#494949;
font-family:"Trebuchet MS",sans serif;
overflow: hidden;
background:transparent url(/images/showcase_panel_buttons.png) top left no-repeat;
}
a.showcase_panel_button:hover{background-position: 0px -54px;}
.slide_col1{float:left; width:470px; text-align:left;}
.slide_col2{float:right; width:430px}
.s0a,.s0b,.s1,.s2,.s3,.s4,.s5,.s6,.s7,.s8,.s9{width:910px;height:325px;padding:25px;}
.s0a{background:transparent;width:960px;height:375px;padding:0;}
.s0b .slide_col1{width:910px;}
.slide_col1 h2{
	font-size:2.4em;
	color:#fff;
	font-weight:bold;
}
.slide_col1 h3{
	font-size:1.1em;
	color:#fff;
	font-weight:bold;
	text-transform:uppercase;
}

/* ----------- slogan homepage -------------------------------- */
#slogan {width: 612px;height: 156px;background: transparent url(/images/homepage_slogan.png) top left no-repeat;text-indent: -6000px;margin: 20px 0 20px 0;}

/* ----------- portfolio box -------------------------------- */
#portfolio_box {color: #fff;position: relative;width: 290px;height: 110px;}
#portfolio_box a {display: block;width: 290px;height: 110px;text-indent: -6000px;background: transparent url(/images/homepage_portfolio.png) top left no-repeat;}
#portfolio_box a:hover {opacity: 0.75;}

/* ----------- homepage content -------------------------------- */
#home #header{height:80px; padding:0 50px; 0 0}
#home #content {width: 890px; margin: 100px 0 0 0; padding:50px;}
#home #content h3 {font-size: 1.625em;font-family: Delicious, sans-serif;color: #4948A3;margin: 0 0 0.750em 0;}
#home .left {width: 578px; float:left; color: #494949;}
#home .right {width: 280px; float:right; color: #494949;}

/* ----------- round boxes on homepage -------------------------------- */
#special {width: 590px;background: transparent url(/images/bg_container3_bottom.gif) bottom left no-repeat;padding-bottom: 20px;overflow: hidden;zoom: 1;}
.special_top{background: transparent url(/images/bg_container3_top.gif) top left no-repeat;}
#special h4 {font-size: 1.125em; color: #4948A3; margin: 0 0 0.750em 0;padding: 0 0 0 25px;}
#special h4.work {margin: 1em 0 0.750em 0;}
#special ul {margin: 0 0 0 25px;}
#special ul li a:link, #special ul li a:visited {color: #0066FF;font-size: 0.75em;display: block;} 
#special ul li a:hover {color: #000;}

#content .box {width: 270px;color: #fff; margin-bottom:10px;}
#content .box h4 {font-size: 0.925em;margin: 0 0 0.2em 0;font-weight: normal;font-style: italic;}
#content .box p {width: 240px;margin: 0 15px 1.125em 15px;padding: 0 0 15px 0;color: #fff;}
#content .box p a {color: #fff;}

#content #box1 {background: transparent url(/images/bg_container1_bottom.gif) bottom left no-repeat;}
#content #box1 h4 {background: transparent url(/images/bg_container1_top.gif) top left no-repeat;padding: 12px 0 0 12px;}

#content #box2 {background: transparent url(/images/bg_container2_bottom.gif) bottom left no-repeat;}
#content #box2 h4 {background: transparent url(/images/bg_container2_top.gif) top left no-repeat;padding: 12px 0 0 12px;}

#content #box3 {
background-color: #e9e9ff;
padding:10px 12px;
margin:10px 0;
border-radius:10px;
-o-border-radius:10px;
-ms-border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#box3 h4 {font-size: 1.125em; color: #4948A3; margin:0;padding:0;}
#box3 p {margin:0;padding:0;}

#ie6note {padding:15px; border:1px solid #f00;}
#ie6note h4{color:#f00;}

#yeah:hover,#yeah a:hover {cursor: url(/images/rockon.cur), pointer;}
#yeah{margin:10px 0; height:2em;line-height:2em;}
#yeah span{float:left;}
#yeah i{float:left; margin:0 0 10px 10px}


/* ----------- footer -------------------------------- */
#footer {width: 890px;padding: 20px 0 15px 0;margin: 0 auto;border: 1px solid #ccc;border-width: 1px 0;color: #525252;overflow: hidden;zoom: 1;}
#footerlogo {display: block;float: left;width: 163px;}
.footercontact {float: right;margin: -5px 20px 0 0;}
.footercontact a:link, .footercontact a:visited {color: #525252;border-bottom: 1px dotted #525252;text-decoration: none;position: relative;top: -2px;}
.footercontact a:hover {color: #000000;border-bottom: 1px dotted #000000;}
.footercontact p.copyright {margin: -10px 0 0 0;font-size: 0.7em;}


/* ----------- webdesign page -------------------------------- */
#webdesign {background: #fff url(/images/bg_webdesign.jpg) top center no-repeat;}
#mb_machine {height:371px; width:843px; margin:0 auto; padding-top:44px; text-align:center;}
#webdesign #content {margin: 0 0 25px 0; padding:50px;}
#webdesign #content .col {width: 290px;float: left;margin: 0 0 25px 0;}
.features td {vertical-align:top; padding:10px 5px;}
.features h4 {clear: both;margin: 0 0 0.25em 0; font-size:1em; color: #525252;}
.features p,img {margin:0;padding:0;}

/* ----------- portfolio page -------------------------------- */
/*body#portfolio{ background: #180032 url(/images/bg_portfolio.jpg) top center no-repeat;}*/
body#portfolio{ background: #06000D url(/images/bg_portfolio_dark.jpg) top center no-repeat;}

#portfolio .sub_col1 {width:560px; float:left; color:#fff;}
#portfolio .sub_col2 {width:280px; float:right; color:#fff;}

#portfolio #content a{color:#fff;}
#portfolio #flvplayer {width:500px; min-height:380px; float:left;}
#portfolio #flvplayer_text {width:340px; min-height:380px; float:right; color:#fff;}
#btn_showcases{width:276px; height:66px; background: url(/images/btn_showcases.png) top left no-repeat; padding:20px 0 0 75px;}
#btn_movie{width:276px; height:66px; background: url(/images/btn_movie.png) top left no-repeat; padding:20px 0 0 75px;}
#btn_showcases a, #btn_movie a{text-decoration:none; display:block; font-weight:bold;}

#portfolio #footer {width: 890px;padding: 20px 0 15px 0;margin: 0 auto 15px;border: 1px solid #A6A0E0;border-width: 1px 0;color: #A6A0E0;overflow: hidden;zoom: 1;}
#portfolio .footercontact a:link, #portfolio .footercontact a:visited {color: #e2e0f5;border-bottom: 1px dotted #e2e0f5;}
#portfolio .footercontact a:hover {color: #fff;border-bottom: 1px dotted #fff;}

/* ----------- showcase page -------------------------------- */
body#showcase {background: #B7BCC3 url(/images/bg_showcases.jpg) top center no-repeat;}
#showcase #content {padding-top:60px;}

#showcase #main_screenshot {width:565px; min-height:370px; background-color:#fff; padding:10px; float:left;-moz-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px;}
#showcase #main_text {width:280px; min-height:360px; float:right; color:#4F5166; padding-top:10px;}
#showcase .sub_col1 {width:280px; float:left; color:#3F4152;}
#showcase .sub_col2 {width:280px; float:left; margin:0 25px; color:#3F4152;}
#showcase .sub_col3 {width:280px; float:right; color:#3F4152;}
#showcase #content h2 {font-size:1.5em; margin-bottom:0.8em;}
#showcase a{color:#06f;}
#showcase #content .detail{width:260px; min-height:170px; background-color:#f1f1f1; padding:5px; margin-bottom:10px;-moz-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px;}
#showcase #content .detail_text {color:#3F4152; width:550px;}
.showcase_story p{line-height: 1.5em;}
.showcase_story p strong{color:#342d65;}
#showcase .sub_col1 h4 a, #showcase .sub_col2 h4 a, #showcase .sub_col3 h4 a{color:#61647E; margin-bottom:0.3em; text-decoration:none;}

.briefing, .keywords, .url, .showcase_story p{color:#3F4152;}
.briefing em{font-style:italic;}
.showcase_block {width:280px; float:left; margin:0 15px 0 0; color:#3F4152;}
.showcase_title {font-size:1.2em; color:#342d65; text-transform:uppercase;}
.showcase_title_small {font-size:0.85em; color:#342d65; text-transform:uppercase;}

#showcase #footer {width: 890px;padding: 20px 0 15px 0;margin: 0 auto 15px;border: 1px solid #dadada;border-width: 1px 0;color: #3F4152;overflow: hidden;zoom: 1;}
#showcase .footercontact a:link, #showcase .footercontact a:visited {color: #fff;border-bottom: 1px dotted #fff;}
#showcase .footercontact a:hover {color: #06f;border-bottom: 1px dotted #06f;}

/* ----------- jobs page -------------------------------- */
body#jobs{background: #B7BCC3 url(/images/bg_showcases.jpg) top center no-repeat;}
#jobs #content {padding-top:60px; min-height:440px;}
#jobs #footer {width: 890px;padding: 20px 0 15px 0;margin: 0 auto 15px;border: 1px solid #dadada;border-width: 1px 0;color: #3F4152;overflow: hidden;zoom: 1;}
#jobs .footercontact a:link, #showcase .footercontact a:visited {color: #fff;border-bottom: 1px dotted #fff;}
#jobs .footercontact a:hover {color: #06f;border-bottom: 1px dotted #06f;}


/* ----------- contact page -------------------------------- */
body#contactus{ background: #180032 url(/images/bg_portfolio.jpg) top center no-repeat;}
#contactus #content{padding:60px 50px 0 50px; background:transparent url(/images/bg_contact_form-trans.png) center top no-repeat; height:762px;}
#contactus .contact_form{margin-left:385px; font-size:1.8em; width:400px;}
#contactus .contact_form h2{color:#342d65;}
#contactus .contact_form p{color:#494949;}

a.url fn{font-size:1.8em; text-decoration:none;}
.contact_block {width:220px; float:left;}
.vcard,.vcard_download,.map_download {
background-color:#fff;
padding:10px; margin-bottom:5px;font-size:0.75em;
-moz-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px;
}
.map_download:hover {background-color:#AFD033; color:#fff;}
.vcard_download:hover {background-color:#AFD033;}

.org{font-weight:700; font-size:2.2em; margin:0.2em 0 0.5em 0;}
.tel{color:#66C; font-weight:700; font-size:1.4em;}
.small{font-size:0.75em;}
.form_col1_width{width:90px;}

/* ----------- contact confirm -------------------------- */
body#contact_confirm{ background: #180032 url(/images/bg_portfolio.jpg) top center no-repeat;}
#contact_confirm #content{padding:60px 50px 0 50px; height:762px;}
#contact_confirm h2 {color: #fff;height: 200px;line-height: 200px;text-align:center;}
#contact_confirm h2 span {font-weight: bold;font-size:1.5em;color: #fff;}
#contact_confirm strong {color: #fff;}
#contact_confirm p {text-align:center;}

/* ----------- blog page -------------------------------- */
body#blog{ background: #180032 url(/images/bg_portfolio.jpg) top center no-repeat;}
#blog #content {background-color:#fff; padding:50px; margin:20px 0;}
#blog #content h3{font-size:1.2em; color:#494949;}
#blog #footer {width: 890px;padding: 20px 0 15px 0;margin: 0 0 25px 0;border: 1px solid #A6A0E0;border-width: 1px 0;color: #A6A0E0;overflow: hidden;zoom: 1;}
#blog .footercontact a:link, #blog .footercontact a:visited {color: #e2e0f5;border-bottom: 1px dotted #e2e0f5;}
#blog .footercontact a:hover {color: #fff;border-bottom: 1px dotted #fff;}
.bighead{font-size:8em; font-family: Georgia, serif; line-height:1.5em; margin:0; padding:0; color:#CD4910;}

/* ----------- styles for cufon replaced titles -------------------------------- */
#webdesign #content #user {font-size: 2.875em;color: #4948A3;margin: 0 0 0.50em 0;}
#webdesign #content #blurb {font-size: 1.125em;color: #4948A3;margin: 0 0 40px 0;}
#webdesign #content #int {font-size: 1.125em;color: #4948A3;margin: 0;clear: both;}
#showcase #content #user, #jobs #content #user {font-size: 2.875em;color: #4948A3;margin: 0;}
#showcase #content #blurb {font-size: 1.125em;color: #4948A3;margin: 0 0 20px 0;}
#showcase #content #main_title {font-size: 2em;color: #342d65;margin: 0 0 20px 0;}

/*-------------Custom classes-----------------------------------*/

/* - clearing floats for modern browsers (IE 6,7 fixes are quarantined in separate CSS files)  */
.clearfloats:after {
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.flash_alternative_content {background-color:#fff; padding:20px; color:#111;}
.callforaction {margin:20px 0; color:#fff;}
a.white {color:#fff;}
a.phonelink{text-decoration:none; color:#06f;}
.thumb{float:left; padding:0 10px 10px 0; width:120px;}