/* CSS Document for davidvandelden.com */

/* BODY & HTML /////////////////////////////////////////////////////////////////////////////*/
body { background: #3c3128 url("../images/background.jpg") top center repeat-y; font: 85% Arial, Helvetica, sans-serif; color: #333; line-height: 1.5;  }
html { font: 85% Arial, Helvetica, sans-serif; color: #333;  }

/* GENERAL /////////////////////////////////////////////////////////////////////////////*/
.date, .light { color: #999; font-size: 0.9em; }
.clear { clear: both; }
.textLabel { color: #b50000; font-weight: bold; }
a { color: #ff9a01; text-decoration: none; }
a:hover { color: #ff9a01; text-decoration: none; }
hr { border: 0; height: 1px; background-color: #e5e5e5; color: #e5e5e5; }
h1, h2, h3, h4 { margin-bottom: 15px; }
h1 { color: #111; font-size: 2.8em; letter-spacing: -1px; line-height: 1; margin-top: 10px; }
h2 { color: #111; font-size: 1.7em; }
h3 { color: #111; font-size: 1.5em; }
h2 a:link, h2 a:visited { color: #ff9a01; font-size: 1em; text-decoration: none; }
h2 a:hover { color: #333; }
img.bordered { border: 1px solid #e5e5e5; padding: 5px; }
img.borderedDark { border: 1px solid #222; padding: 1px; }
.bordered img { border: 1px solid #e5e5e5; padding: 5px; cursor: pointer; }
.bordered:hover img { border-color: #b5b5b5; }
.bordered:hover p { color: #333; }
.bordered:hover{ color: red; /* irrelevant definition to overcome IE bug */ }
.hoverButton { float: right; margin-top: 20px; }
a.toggleLink { background: url("../images/button_right.gif") top right no-repeat; padding: 5px 20px 5px 10px; text-decoration: none; color: #666; line-height: 3; }
a.toggleLink:hover { background: url("../images/button_right.gif") bottom right no-repeat; color: #ff9a01; }
p { font-size: 14px;}

/* CONTENT /////////////////////////////////////////////////////////////////////////////*/
#wrapper { margin: 0 auto; width: 924px; background: #fff; }
#topNav { padding: 0 20px 0 10px; }
#topNav #logo { float: left; }
#topNav #workMenu { float: right; }

#workMenu { margin-top: 19px; }
#workMenu ul { list-style: none; margin: 0; padding: 0; height: 20px; }
#workMenu li { display: inline; margin: 0; height: 20px; float: left; }
#workMenu ul li.motion a { background: url("../images/motion_item.gif") top center no-repeat; color: #fff; margin: 0 10px; text-indent: -999em; display: block; width: 52px; height: 20px; }
#workMenu ul li.static a { background: url("../images/static_item.gif") top center no-repeat; color: #fff; margin: 0 10px; text-indent: -999em; display: block; width: 45px; height: 20px; }
#workMenu ul li.web a { background: url("../images/web_item.gif") top center no-repeat; color: #fff; margin: 0 10px; text-indent: -999em; display: block; width: 30px; height: 20px; }
#workMenu ul li.application a { background: url("../images/application_item.gif") top center no-repeat; color: #fff; margin: 0 10px; text-indent: -999em; display: block; width: 86px; height: 20px; }
#workMenu ul li.motion a:hover,#workMenu ul li.static a:hover,#workMenu ul li.web a:hover,#workMenu ul li.application a:hover { background-position: bottom center; }
#workMenu ul li.mactive a { background-position: bottom center; border-bottom: 2px solid #A70000; }
#workMenu ul li.sactive a { background-position: bottom center; border-bottom: 2px solid #2B8120; }
#workMenu ul li.wactive a { background-position: bottom center; border-bottom: 2px solid #EB9B00; }
#workMenu ul li.aactive a { background-position: bottom center; border-bottom: 2px solid #510096; }

.breadCrumb { padding-bottom: 5px; }
.breadCrumb ul { list-style: none; margin: 0; padding: 0; }
.breadCrumb li { display: inline; margin: 0; padding: 0; font-style: italic; color: #bbb; }
.breadCrumb ul li a { background: url("../images/crumb_link.gif") top right no-repeat; color: #fff; text-decoration: none; padding: 2px 20px 2px 10px; font-style: normal; color: #ff9a01; text-transform: lowercase; }
.breadCrumb ul li a:hover { color: #fff; }
.breadCrumb ul li.sublink a { background: url("../images/crumb_sublink.gif") top right no-repeat; text-transform: lowercase; }
.breadCrumb ul li.active { background: url("../images/crumb_active.gif") top right no-repeat; color: #fff; text-decoration: none; padding: 2px 20px 2px 8px; font-style: normal; color: #666; text-transform: lowercase;}

#mainContent { padding: 10px 20px 30px 20px; }
#mainContent .leftContent { width: 480px; float: left; margin-bottom: 20px; }
#mainContent .rightContent { width: 373px; float: right; margin-bottom: 20px; }
#mainContent .rightContent .categories { float: right; }
#mainContent .rightContent .categories img { margin-right: 10px; }
#mainContent .rightContent .attributes { float: left; margin-top: 29px; width: 100%; }
#mainContent .rightContent .attributes .name { font-weight: bold; color: #333; }
#mainContent .mediaContent { margin-top: 10px; }
#mainContent .mediaContent img { float: left; margin: 0 0 9px 0; border: 1px solid #e5e5e5; }
#mainContent .mediaContent img.big { margin: 0 9px 0 0; }
#mainContent .mediaContent .divider { float: left; width: 10px; margin-top: 10px; }
#mainContent .mediaContent .video { margin-top: 12px; }

.frontNewsWrap .item { float: left; width: 432px; margin: 10px 5px; }
.frontNewsWrap .item img { margin-bottom: 5px; }
.frontNewsWrap .divider { float: left; width: 20px; margin-top: 10px; }

#flowpanes { width: 924px; height: 471px; margin: 10px 0; position:relative; overflow:hidden; clear:both; }
#flowpanes div { float:left; display:block; width:924px; cursor:pointer; } 
#flowpanes .items { width:20000em; position:absolute; clear:both; margin:0; padding:0; } 
#flowtabs a { background: url("../images/flowbanner_inactive.gif") no-repeat; text-indent: -9999em; display: block; padding: 0; }
#flowtabs a.current { background: url("../images/flowbanner_active.gif") no-repeat; }
#flowtabs { display: inline; list-style-type: none; margin: 0; padding: 0; }
#flowtabs li { float: left; width: 15px; height: 8px; margin:0; padding: 0; }
#flownav { margin: 0; float: right; width: 70px; }


/* FOOTER /////////////////////////////////////////////////////////////////////////////*/
#footer { background: #000 url("../images/footer_bg.jpg") no-repeat; width: 924px; }
#footer .item { float: left; width: 422px; margin: 20px; }
#footer .icon { float: left; margin: 10px 10px 0 0; }
#footer #contactFormArea { width: 380px; }
#footer .text, #footer .textarea { border: 1px solid #252525; background: #0b0b0b; padding: 5px; color: #999; width: 400px; margin: 0 0 5px 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em;  }
#footer .textarea { height: 80px; min-height: 80px; }

#footer input.blur, #footer textarea.blur { color: #333; }
#footer #contactFormArea label { color: #666; display: block; padding: 0 0 4px 0; }
#footer #contactFormArea label.error { color: #7e0000; display: block; font-size: .8em; float: right; }
#footer input.error { border: 1px dotted #7e0000; }
#footer textarea.error { border: 1px dotted #7e0000; }
#footer input.button { background: url("../images/send.gif") no-repeat; border: 0; color: #111; width: 84px; height: 25px; cursor: pointer; text-indent: -9999px; }

div.caption { padding: 0; margin: 0; text-align: left; text-decoration: none; /*-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;*/ }
div.caption img { display: block; margin: 0 auto; }
div.caption p { margin: 0; padding: 0 0 3px 10px; color: #ff9a01; font-size: 1.2em; }

#footer p#loadBar, #footer p#emailSuccess { color: #333; margin-bottom: 10px; }
#footer p#loadBar img, #footer p#emailSuccess img { vertical-align: top; }