/* GENERAL */

body { width:100%;height:100.01%;font:13px/20px Verdana, Helvetica, Arial, sans-serif;color:#333333;margin:0;padding:0;
       text-align:center;background-color:#dbdab0;border-bottom: 20px solid #333; }
a {color:#b9330a;}
img { border: 0 none; padding:0;margin:0;behavior: url(/iepngfix.htc) }
h1, h2, h3 {font-family:Arial;}

.noborder {border:0 none;}
img.noborder {border:0 none;}

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

.webapp {background:url('/images/icons/label-webapp.png') 0px 5px no-repeat;}
.website {background:url('/images/icons/label-website.png') 0px 5px no-repeat;}
.branding {background:url('/images/icons/label-branding.png') 0px 5px no-repeat;}
.icon {background:url('/images/icons/label-icon.png') 0px 5px no-repeat;}
.illustration {background:url('/images/icons/label-illustration.png') 0px 5px no-repeat;}
h2.webapp, h2.website, h2.branding, h2.icon, h2.illustration{background-position:left center; padding-left:60px;}
h1.webapp, h1.website, h1.branding, h1.icon, h1.illustration{background-position:0px 17px; padding-left:66px;}
h1.webapp, h1.website, h1.branding, h1.icon, h1.illustration{background-position:0px 17px; padding-left:66px;}

/* BOXES */

div#frame { width: 942px;margin:0 auto; text-align:left;}
div#header {height:120px;min-height:120px;max-height:120px;position:relative;width:942px;}
div#banner {width:942px;height:300px;background:url('/images/home-background.png') top right no-repeat;margin-bottom:0px;display:table }
div#content {}
div#footer {clear:both;width:942px;display:table;padding-top:50px;height:200px;background:url('/images/opoloo-footer.png') transparent bottom center no-repeat;}


div.logo {position:relative;left:-15px;width:200px;height:80px;float:left;}
div.nav {height:80px;vertical-align:text-bottom;position:absolute;left:185px;top:0px;}

div.content-two-cols {}
div.content-two-cols div.content-box {}
div.two-cols-left, div.two-cols-right {width:471px;float:left;display:table;}
div.two-cols-left {}
div.two-cols-right {}

div.content-three-cols {}
div.three-cols-left, div.three-cols-middle, div.three-cols-right {width:314px;float:left;}
div.three-cols-left {}
div.three-cols-middle {}
div.three-cols-right {}
div.three-cols-colspan {width:628px;margin:0;padding:0;}

div.div-item {padding-left:64px;padding-right:50px;margin-bottom:20px;}
div.div-item h2 {font-size: 14px;padding:0; margin:0;}
div.div-item h2 a, h1 a {color:#333333;text-decoration:none}
div.div-item p {margin-top:5px;}
div.webapps {background:url('/images/icons/webapps.png') 0 0 no-repeat;}
div.websites{background:url('/images/icons/webdesign.png') 0 0 no-repeat;}
div.identity {background:url('/images/icons/branding.png') 0 0 no-repeat;}
div.illustrationen {background:url('/images/icons/illustration.png') 0 0 no-repeat;}
div.icondesign {background:url('/images/icons/icondesign.png') 0 0 no-repeat;}

div#portfolio { height: 600px;}

/* MISC */

div.logo img {margin:15px 20px 15px 20px;background-color:transparent}
div.logo a {display:block}
div.logo h1 {text-indent:-5000px;display:block;position:absolute;}

div#header h1 {padding:0px;margin:0px;}
div#header p {margin-top:30px;}

p.intro {font-weight:bold;line-height:25px;padding-top:0px;font-size:16px;}

div#content h1 {text-transform:uppercase;padding-top:15px;}

div.nav a {font-size:26px;font-weight:bold;text-decoration:none;display:table;padding:0 15px 0 15px;
           color:#333333;height:80px;}
div.nav a.home:hover, a.home:hover {background:#f19725;}
div.nav a.portfolio:hover {background:#bebc35;}
div.nav a.service:hover {background:#e55f0a;}
div.nav a.about:hover {background:#ffffff;}
div.nav a.contact:hover {background:#faec31;}
div.nav a span {height:80px;;padding:0;margin:0;line-height:80px;display:block}

div.nav ul {margin:0px;padding:0px;height:80px;}
div.nav li {float:left;list-style-type:none;padding:0px;margin:0px;height:80px;}



/* Portfolio Preview Home */

div.prev-next {float:right;}
div#portfolio h2 {font-size:15px;line-height:15px;padding-top:10px;margin-bottom:25px;}
div#portfolio img, img.border {border:13px solid #333333;}
div#portfolio div.prev-next img {border: 0 none;}
div#portfolio p {margin-bottom:33px;}




/* Buttons */
/*
a.button, a.button:hover, a.button span, a.button:hover span {background: url('/images/button-map.png') right 0px no-repeat;
  padding:0;display:block;height:32px; color:#fff;text-decoration:none;padding-right:32px;vertical-align:baseline;
  font-weight: bold;line-height: 31px;font-size:13px;}
a.button span, a.button:hover span  {background-position:0 0; padding:0 0 0 10px;}
a.button, a.button span{width:10em;}
a.button:hover {background-position:right -64px;color:#333333;}
a.button:hover span {background-position:0px -64px;color:#333333;}

a.portfolio-button span, a.portfolio-button {width:17em;}
a.portfolio-button2 span, a.portfolio-button2 {width:18em;}
*/

a.button, a.button:hover, a.button span, a.button:hover span {background: url('/images/button-map.png') right 0px no-repeat;
  padding:0;display:table;height:32px; color:#fff;text-decoration:none;padding-right:32px;vertical-align:middle;
  font-weight:bold;line-height:31px;font-size:13px;}
a.button span, a.button:hover span  {background-position:0 0; padding:0 0 0 10px;display:block;height:32px}
a.button:hover {background-position:right -64px;color:#333333;}
a.button:hover span {background-position:0px -64px;color:#333333;}



/* Footer */

div#footer ul {margin:0px;padding:0px;}
div#footer li {float:left;list-style-type:none;padding:0px 10px 0px 0px;margin:0px;}
div#footer div.two-cols-right li { margin-right:25px; }
div#footer p {font-weight:bold;font-size:18px;padding:0;margin:0;}
div#footer a {font-weight:bold;font-size:14px;color:#333333;text-decoration:none;}
div#footer a:hover {text-decoration:underline;}
div#footer img {border:0 none;}

/* Errors */
.error, .notice, .warning, .message, .success {padding:.8em;margin-bottom:1em;border:2px solid #a00;font-size:123.1%;}
.error, .warning, #errorExplanation, .errorExplanation {color:#000;border-color:#a00;background-color:#ff2a2a;}
.notice, .message, .success {color:#000;border-color:#74ad49;background-color:#abffaa;display:inline-table;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}
#errorExplanation, .errorExplanation {padding:1em 1em 1em 1em;margin: 1em 0;background-color:#ff2a2a;border:2px solid #a00;display:table;}
.fieldWithErrors {background-color:#ff2a2a;padding:3px;margin:0px;display:inline-table; }
.formError {border:2px solid black; background-color:#f00;color: #fff; margin:0px 0px 8px 0px; padding:3px;}