@font-face { font-family:SMDIN; src:url(includes/din1451alt.eot) /* EOT file for IE */ }
@font-face { font-family:SMDIN; src:url(includes/DINNextLTPro-Regular.ttf) /* TTF file for CSS3 browsers */ }
@font-face { font-family:SMDIN_Bold; src:url("includes/din1451alt_G.eot") /* EOT file for IE */ }
@font-face { font-family:SMDIN_Bold; src:url("includes/DINNextLTPro-Bold.ttf") /* TTF file for CSS3 browsers */ }




body { margin:13px 0; font-family:SMDIN, Tahoma; Arial, helvetica, sans-serif; font-size:100%; color:#4d5d68; background:#fff }

a { color:#0000ff }
a:hover { color:#ff0000 }
img { border:0 }
h1 { margin:0; padding:0; font-size:100%; color:#007580; font-family:SMDIN_Bold, Tahoma; Arial, helvetica, sans-serif; font-weight:normal }
h2 { font-size:110%; font-family:SMDIN_Bold, Tahoma; Arial, helvetica, sans-serif; font-weight:normal }
h3 { font-size:100%; font-family:SMDIN_Bold, Tahoma; Arial, helvetica, sans-serif; font-weight:normal }
p { margin:0 0 10px; padding:0 }
hr { height:1px; border:0; color:#999999; background:#999999 }


/* Layout */
.bg-top { position:absolute; top:10px; left:0; width:100%; height:369px }
.bg-bottom { position:absolute; top:389px; left:0; width:100%; height:360px }
.bg-bottom-shadow { position:absolute; top:749px; left:0; width:100%; height:21px; background:url(graphics/bg-bottom-shadow.jpg) 0 0 repeat-x }

.bg-white { background:#fff }
.bg-green { background:#aac02c }
.bg-dgrey { background:#4d5d68 }
.bg-orange { background:#ee6821 }
.bg-teal { background:#007580 }
.bg-beige { background:#d4d0ba }

.lensflare { width:992px; height:100%; margin:0 auto }

.layout { position:relative; width:992px; margin:0 auto; padding-top:71px }



/* Header */
.header { width:100% }
.logo { float:left; margin-left:48px }

/* Main Menu */
.mainmenu { float:right; margin:11px 77px 0 0; font-size:80% }
.mainmenu a { margin-left:14px; color:#fff; text-decoration:none }
.mainmenu a.on { color:#001f2d; font-family:SMDIN_Bold, Tahoma; Arial, helvetica, sans-serif; font-weight:normal }
.mainmenu a:hover { color:#001f2d }




/* Content */
.titletext { color:#fff; font-size:190%; line-height:140% }


.infoboxes { margin:60px 0 0 148px }
.infobox { width:258px; height:198px; font-size:90%; line-height:120%; background:url(graphics/boxes/infobox-shadow.png) 0 0 no-repeat }
.infobox a { text-decoration:none }
.infobox strong { line-height:150% }
.infobox .content .slideshow img { width:238px; height:178px }

.infobox_label { margin:0 0 10px 10px; color:#aac02c; font-size:120%; font-family:SMDIN_Bold, Tahoma; Arial, helvetica, sans-serif; font-weight:normal }

.infobox .content { width:218px; height:168px; margin:0 auto; padding:10px 10px 0 15px }
.infobox .content.work { width:238px; height:168px; padding:0 }
.infobox .content.teal { color:#fff; background:#007580 }
.infobox .content.teal a { color:#fff }
.infobox .content.teal a:hover { color:#fff; text-decoration:underline }
.infobox .content.green { color:#fff; background:#aac02c }
.infobox .content.green a { color:#4d5d68 }
.infobox .content.green a:hover { color:#4d5d68; text-decoration:underline }




/* Content Boxes */
.contentbox { width:560px; height:335px; margin:65px 0 0 342px; padding:10px; font-size:90%; line-height:150%; background:#fff url(graphics/boxes/contentbox-shadow.jpg) 0 100% no-repeat }
.contentbox .content { padding:23px 0 0 23px }
.contentbox .content h1 { margin-bottom:10px; color:#005d78; font-size:150% }
.contentbox .content a { color:#fff; font-weight:bold; text-decoration:none }
.contentbox .content a:hover { text-decoration:underline }
.contentbox .content.green { color:#fff; background:#aac02c }
.contentbox .content.green h1 { font-family:SMDIN, Tahoma; Arial, helvetica, sans-serif }
.contentbox .content.teal { color:#fff; background:#007580 }
.contentbox .content.teal h1 { font-family:SMDIN, Tahoma; Arial, helvetica, sans-serif; font-weight:normal; color:#d4d0ba }

.contentbox.twothirds { width:580px; height:161px; margin:65px 0 0 57px; padding:20px 0 0 24px; font-size:100%; line-height:150%; background:#fff }
.contentbox.fullwidth { width:843px; height:470px; margin:65px 0 0 57px; padding:22px 0 0 24px; font-size:100%; line-height:150%; background:#fff }

.contentbox .titlebox { width:474px; height:152px; margin:0 0 0 50px; background:url(graphics/boxes/titlebox-bg.png) 0 0 no-repeat }
.contentbox .titlebox.fullwidth { width:746px; height:189px; margin:0 0 0 45px; background:url(graphics/boxes/titlebox-bg-fullwidth.png) 0 0 no-repeat }
.contentbox .titlebox .titlecontent { width:425px; height:108px; margin:0 auto; padding:20px 0 0 25px }
.contentbox .titlebox.fullwidth .titlecontent { width:691px; height:135px }
.contentbox .titlebox .titlecontent h1 { color:#fff; font-size:170%; line-height:120%; font-family:SMDIN, Tahoma; Arial, helvetica, sans-serif; font-weight:normal }
.contentbox .titlebox .titlecontent.teal { background:#007580 }



/* Clients */
.client { float:left; width:207px; height:126px; margin:0 0 5px 53px; padding:25px 0 0 0; text-align:center; background:url(graphics/boxes/client-bg.png) 0 0 no-repeat }



/* Work */
.box.clientlist { position:absolute; top:185px; left:27px }
.box.clientlist .bottom { width:264px; height:86px; background:url(graphics/boxes/clientlist-bg-bottom.png) 0 100% no-repeat }
.box.clientlist .bg { background:url(graphics/boxes/clientlist-bg.png) 0 0 repeat-y }
.box.clientlist .boxcontent { position:relative; height:341px; margin:0 0 -50px 0; padding:0 0 0 20px; font-size:90% }

.clientlist h1 { margin:0 0 10px; color:#001f2d; font-size:130%; font-family:SMDIN, Tahoma; Arial, helvetica, sans-serif; font-weight:normal }
.clientlist .option { margin:0 0 3px 0 }
.clientlist .option a { color:#fff; text-decoration:none }
.clientlist .option.dark a { color:#007580 }
.clientlist .option.on a, .clientlist .option.dark.on a { font-family:SMDIN_Bold, Tahoma; Arial, helvetica, sans-serif; font-weight:normal }
.clientlist .option a:hover { text-decoration:underline }

.clientquote { padding:10px 20px 0 0; color:#aac02c; font-size:95%; line-height:150% }
.clientquotename { float:right; padding-right:40px; color:#fff }


/* Portfolio */
.portfoliobox { position:relative; top:60px; width:612px; height:382px; margin:0 0 0 330px; padding:0 0 0 9px; background:url(graphics/boxes/portfoliobox-shadow.png) 0 0 no-repeat }
.images { position:relative; float:left; padding:8px }
.caption { position:absolute; top:345px; left:15px; font-size:65% }
.caption strong { color:#007580; font-weight:normal }
.caption a { color:#4d5d68; text-decoration:none }
.caption a:hover { text-decoration:underline }
.slideshow { position:relative }
.slideshow img { cursor:pointer }
.portfoliobox .images .slideshow img, .portfoliobox .images img { width:578px; height:331px }
/* Vertical */
/*
#nav { position:absolute; top:12px; left:520px; width:20px }
#nav .slidenumber { float:left; width:21px; padding:0 0 2px; font-size:70%; background:url(graphics/slideshow-nav.gif) 100% 0 no-repeat; text-align:center; cursor:pointer }
#nav a { float:left; color:#fff; text-decoration:none; margin:0 0 5px; padding:3px 4px 0 3px }
#nav .slidenumber.activeSlide { background:url(graphics/slideshow-nav-on.gif) 100% 0 no-repeat }
#nav a:focus { outline:none }
*/
/* Horizontal */
#nav { position:absolute; top:343px; left:550px }
#nav .slidenumber { float:left; width:16px; margin-right:3px; font-size:50%; background:url(graphics/slideshow-nav.gif) 100% 0 no-repeat; text-align:center; cursor:pointer }
#nav a { float:left; color:#fff; font-weight:normal; text-decoration:none; padding:2px 0 2px 3px }
#nav .slidenumber.activeSlide { background:url(graphics/slideshow-nav-on.gif) 100% 0 no-repeat }
#nav a:focus { outline:none }


/* Testimonials */
.contentbox.testimonials { position:relative; width:589px; height:337px; margin:65px 0 0 342px; padding:10px; font-size:130%; line-height:130%; background:#fff url(graphics/boxes/contentbox-shadow.jpg) 0 100% no-repeat }
.contentbox .content.testimonials { height:314px; color:#fff; background:#aac02c url(graphics/boxes/testimonials-bg.gif) 0 0 no-repeat }

.testimonial { padding-right:20px }
.testimonial .name { margin:20px 0 10px 0; color:#4d5d68; font-size:90%; text-align:right }

#nav_horiz { position:absolute; top:320px; left:20px }
#nav_horiz .slidenumber { float:left; width:21px; margin-right:3px; font-size:50%; background:url(graphics/testimonial-nav.gif) 100% 0 no-repeat; text-align:center; cursor:pointer }
#nav_horiz a { float:left; color:#fff; font-weight:normal; text-decoration:none; margin-top:-3px; padding:0 0 0 3px }
#nav_horiz .slidenumber.activeSlide { background:url(graphics/testimonial-nav-on.gif) 100% 0 no-repeat }
#nav_horiz a:focus { outline:none }







/* Contact Details */
.contactdetails { float:right; margin:5px 78px 0 0; color:#fff; font-size:110%; text-align:right; line-height:140% }
.contactdetails.dark { color:#4d5d68 }
.contactdetails strong { font-family:SMDIN_Bold, Tahoma; Arial, helvetica, sans-serif; color:#aac02c; font-size:130%; font-weight:normal }
.contactdetails a { color:#fff; text-decoration:none }
.contactdetails.dark a { color:#4d5d68 }
.contactdetails a:hover { text-decoration:underline }



/* Buttons */
.prevnext { position:absolute; top:620px; left:920px; width:100px; height:38px; font-size:60%; cursor:pointer }
.prevnext .single { height:26px; padding:12px 0 0 3px; background:#aac02c }
.prevnext .both.previous { height:16px; padding:3px 0 0 3px; background:#007580 }
.prevnext .both.next { height:16px; padding:3px 0 0 3px; background:#aac02c }
.prevnext a { color:#fff; text-decoration:none }
.prevnext a:hover, .prevnext .single:hover a, .prevnext .both.previous:hover a, .prevnext .both.next:hover a { color:#001f2d }




/* Footer */
.footer { position:absolute; top:700px; left:158px; font-size:75%; color:#fff; line-height:130% }
.footer.dark, .footer.dark a { color:#4d5d68 }
.footer strong { margin-left:10px; color:#aac02c; font-family:SMDIN_Bold, Tahoma; Arial, helvetica, sans-serif; font-weight:normal }
.footer a { color:#fff; text-decoration:none }
.footer a:hover { text-decoration:underline }
.footer .copyright { font-size:70% }
.footer .copyright strong { margin-left:0 }




/* Misc */
.floatleft { float:left }
.floatright { float:right }
.alignleft { text-align:left }
.alignright { text-align:right }
.aligncenter { text-align:center }
.clear { clear:both; height:0; line-height:0; font-size:1%; /*for IE*/ }
.clear_left { clear:left; height:0; line-height:0; font-size:1%; /*for IE*/ }
.clear_right { clear:right; height:0; line-height:0; font-size:1%; /*for IE*/ }

#trace, .trace { border:solid 1px #ff0000 }