/**
 * @section   : Lay-out CSS
 * @project   : Damen Romijn
 * @author    : Boye Oomens <boye@e-sites.nl>
 * @media     : all
 * @version   : 1.0
 */

/* Algemene container, header en logo */
#wrapper {width:965px; padding:0 15px; margin:0 auto 50px auto; background:#f4f5f7; position:relative;}
#header {height:129px; padding-bottom:7px; position:relative;}
#logo {margin:0 0 0 22px; float:left;}
#logo a {width:251px; height:117px; display:block; background:url(/images/logos/damenromijn.png) no-repeat -7px -7px; text-decoration:none;}
#logo span {visibility:hidden;}

/* Topnavigatie */
#topnav {height:44px; margin:0; position:absolute; top:-7px; right:140px; padding:0; z-index:1;}
#topnav li {height:30px; padding:7px 0; display:block; float:left; background:url(/images/backgrounds/topNavItem.png) repeat-x top left; position:relative; z-index:1;}
#topnav li:hover {background:url(/images/backgrounds/topNavItemHover.png) repeat-x top left;}
#topnav a {height:16px; color:#95a3ad; text-transform:uppercase; text-decoration:none; display:inline-block; padding:7px 10px; position:relative; z-index:1;}
#topnav .divider {width:1px; height:15px; position:absolute; right:0; top:14px; display:block; font-size:0; line-height:0; background:url(/images/backgrounds/topNavDivider.png) no-repeat; z-index:2;}
#topnav li:hover a,
#topnav a:hover {color:#fff;}
#topnav .first {background:url(/images/backgrounds/nav.png) no-repeat top left;}
#topnav .first:hover {background:url(/images/backgrounds/navHover.png) no-repeat left top;}
#topnav .first a {padding-left:17px;}
#topnav .last {background:url(/images/backgrounds/nav.png) no-repeat top right; margin-right:7px;}
#topnav .last .divider {display:none;}
#damenromijn #topnav .last:hover {background:url(/images/backgrounds/navHover.png) no-repeat right top;}
#topnav .last a {padding-right:14px;}

/* damenromijn tv */
.drtv {position:absolute; top:0px; right:22px; width:118px; height:31px; padding:0; margin:0; text-indent:-8000px; outline:none; z-index:2; background:url("/images/logos/drtv.png") no-repeat top left;}
.drtv:hover {background:url(/images/logos/drtvHover.png) no-repeat top left;}

/* Twitterbanner */
.twitterBanner {position:absolute; top:100px; left:-75px; display:block; width:60px; height:262px; background:url(/images/sprites/twitter.png) no-repeat top left; text-indent:-3000em; overflow:hidden;}
.twitterBanner:hover {background-position:0 -262px;}

/* Blokken die terugkomen op elke pagina */
.contentBlock {width:264px; height:319px; margin:0 56px 15px 15px; font-size:110%; position:relative; float:left; background:url(/images/backgrounds/contentBlock.png) no-repeat top left;}
.contentBlock h2 {width:250px; height:26px; text-align:center; font-size:120%; text-transform:uppercase; padding:4px 0 0 0; color:#fff; background:url(/images/backgrounds/contentBlockHeading.png) no-repeat top left; margin:4px 0 0 7px;}
.contentBlock .arrow {width:26px; height:53px; cursor:pointer; outline:0; position:absolute; top:130px; text-indent:-2000em; overflow:hidden; display:block; background-image:url(/images/sprites/scrollArrows.png); background-repeat:no-repeat;}
.contentBlock .disabled {cursor:default;}
.contentBlock .prev {left:-20px; background-position:0 -53px;}
.contentBlock .prev.disabled {left:-20px; background-position:0 0;}
.contentBlock .prevActive {background-position:0 -53px;}

.contentBlock .next {right:-20px; background-position:-28px -53px;}
.contentBlock .next.disabled {right:-20px; background-position:-28px 0;}
.contentBlock .nextActive {background-position:-28px -53px;}

.contentBlock .scrollable {width:250px; height:275px; position:relative; overflow:hidden; margin:1px 0 0 7px;}
.contentBlock .items {width:6500px; position:absolute; top:0; left:0; clear:both; list-style:none; margin:0;}
.contentBlock .items li {width:220px; height:245px; padding:15px; float:left; display:block; margin:0;}
.contentBlock .blockImg {width:218px; height:218px; margin:-3px 0 0 0; border:1px solid #95a3ad;}
.contentBlock .more {display:block; padding:2px 0; text-decoration:none;}
.contentBlock .items ul {width:220px; margin:0; padding:0; border-bottom:1px solid #95a3ad; overflow:hidden;}
.contentBlock .items ul li {float:none; height:auto; padding:0 0 10px 0;}
.contentBlock .items h4 {font-size:100%;}
.contentBlock .items h4 a {color:#455560; text-decoration:none; font-weight:bold;}
.contentBlock .items h4 a:hover {color:#f89829;}
.contentBlock .date {display:block; padding:2px 0; margin:0 0 2px 0; border-top:1px solid #95a3ad; border-bottom:1px dashed #95a3ad;}
.contentBlock .tags {display:block; padding:2px 0; border-bottom:1px solid #95a3ad; color:#455560;}
.contentBlock .items p {margin:0; color:#95a3ad; line-height:130%;}

.resources {list-style:none; margin:0; padding:0; overflow:hidden; float:left;}
.resources li {float:left; position:relative; width:21px; height:21px; margin-right:4px; background:url(/images/sprites/icons.png) no-repeat; display:block;}
.resources .print {background-position:0px;}
.resources .clips {background-position:-25px;}
.resources .enieuwsbrief {background-position:-100px;}
.resources .evenement {background-position:-125px;}
.resources .huisstijl {background-position:-50px;}
.resources .presentatie {background-position:-150px;}
.resources .website {background-position:-75px;}
.resources .magazine {background-position:-176px;}
.projectDetail .description {clear:both; padding-top:15px;}
.link {float:right; position:relative;}

.team h4,
.projects h4 {font-size:100%;}
.team h4 a,
.projects h4 a {display:block; padding:2px 0; border-bottom:1px solid #95a3ad; text-decoration:none; color:#455560;}
.team h4 a:hover,
.projects h4 a:hover {color:#f89829;}

/* Actief contentBlock */
.activeBlock h2 {background:url(/images/backgrounds/contentBlockHeadingActive.png) no-repeat top left;}

/* Algemene content sectie */
#content {width:935px; clear:left; padding:0 15px 0 15px; margin-bottom:15px; font-size:120%; background:url(/images/backgrounds/mainContent.png) repeat-y top left;}

#columnLeft {width:257px; margin:7px 0 0 0; float:left;}
#columnLeft .section {width:257px; height:10px;}
#columnLeft .top {background-position:0 -41px;}
#columnLeft .body {width:251px; min-height:100px; padding:0 0 10px 6px; background:url(/images/backgrounds/leftColumn.png) repeat-y top left; color:#fff;}
#columnLeft .body h3 {text-transform:uppercase; color:#455560; font-weight:bold; font-size:100%; margin:10px 0 0 0;}
#columnLeft .bottom {background-position:0 -51px;}

/* Tabs menu */
#tabs {width:251px; overflow:hidden; position:relative; top:-17px; margin:0; list-style:none; font-size:120%; z-index:1;}
#tabs li {display:block; float:left; margin:0; position:relative; z-index:1;}
#tabs a {height:21px; padding:5px 0; font-weight:bold; color:#fff; outline:0; text-decoration:none; display:block; text-transform:uppercase; position:relative; z-index:1;}
#tabs .left,
#tabs .singleLeft {width:104px; text-align:left; padding-left:15px; background-position:0 0; padding-right:14px; z-index:2;}
#tabs .center {width:14px; height:31px; position:absolute; top:0; right:0; z-index:2; background-position:-120px -31px;}
#tabs .right {width:104px; text-align:right; padding-right:14px; background-position:-134px 0; z-index:2;}
#tabs .disabled {width:104px; text-align:right; padding-right:14px; background-position:-134px -62px;}

#tabs .active .left,
#tabs .active .singleLeft {background-position:0 -31px; z-index:1;}
#tabs .active .left .center {background-position:-120px 0; right:-1px; z-index:2;}
#tabs .active .singleLeft .center {background-position:-120px -62px; right:0; z-index:2;}
#tabs .active .center {display:block;}
#tabs .active .right .center {left:-5px; z-index:3000;}
#tabs .active .right {background-position:-134px -31px;}

.tabContent {padding:0 15px;}

#middelen a {text-transform:uppercase; color:#fff;}
#middelen a:hover {color:#f89829;}

/* Sorteer tabs */
#innerTabs {margin:0 0 -6px 0; list-style:none; font-size:100%; overflow:hidden;}
#innerTabs li {float:left; color:#455560; display:block; margin:0 2px 1px 0; padding:2px 0 0 0; position:relative;}
#innerTabs a {display:inline-block; padding:0 5px 4px 5px; text-decoration:none; color:#fff; background:#ecb359 url(/images/buttons/sort.png) repeat-x top left;}
#innerTabs .active a,
#innerTabs a:hover {background:#c7ccd0 url(/images/buttons/sortActive.png) repeat-x top left; color:#f89829;}

/* Lijstweergave aan de linkerkant */
.listView {width:250px; margin:0 0 0 -14px; padding:0; list-style:none;}
.listView li {padding:0;}
.listView a {width:236px; color:#fff; display:block; text-decoration:none; font-weight:bold; cursor:pointer; padding:2px 0 2px 14px;}
#damenromijn .listView .active,
.listView a:hover {color:#455560; background:#fff url(/images/backgrounds/activeListItem.png) no-repeat top right;}
.listView ul {margin:0; list-style:none;}
.listView ul li {padding:0;}
.listView ul a {width:236px; padding:2px 0 2px 14px; display:block; color:#fff;}
.listView ul a:hover {color:#f89829;}
.listView ul ul a {font-weight:normal;}
.listView li ul li a{padding-left:20px; width:230px;}
.sitemap {overflow:hidden; padding:0; margin:0; list-style:none;}
.sitemap li {margin-top:15px; width:50%; float:left; position:relative;}
.sitemap li ul {list-style:none; margin:0; padding:0;}
.sitemap li ul li {padding:0; margin:0; float:none;}

/* Rechter kolom */
#columnRight {width:678px; float:right;}
#columnRight .section {width:685px; height:21px; position:relative;}
#columnRight .top {background-position:-7px 0; top:-6px;}
#columnRight .body {min-height:200px; margin:-10px 0 -6px 0; padding:0 15px; background:url(/images/backgrounds/rightColumn.png) repeat-y top left;}
#columnRight .body p {margin:0; padding-bottom:1.2em;}
#columnRight .body h1,
#columnRight .body h2 {padding-bottom:8px; font-size:140%;}
#columnRight .body .centeredHeading {width:640px; height:25px; font-size:120%; padding-top:20px; text-align:center; color:#455560; text-transform:uppercase; background:#e6Eaed url(/images/backgrounds/whiteHeading.png) no-repeat bottom center; border-bottom:1px dashed #95a3ad; margin:0;}
#columnRight .bottom {bottom:-6px; background-position:-7px -20px;}

/* Nieuwsberichten */
.article {width:640px; overflow:hidden; padding-bottom:10px;}
.article .thumb {width:114px; float:left; }
.article .thumb img {margin:0 0 0 -5px;}
.article .name {}
.article .function {color:#455560;}
.article .details {width:519px; float:left; margin:0 0 0 5px; border-bottom:1px solid #95a3ad; padding-bottom:10px;}
.article h2 {border-bottom:1px dashed #95a3ad; margin:0 0 5px 0; color:#455560; text-transform:uppercase;}
.article p {clear:left;}
.article .date {width:259px; display:block; padding:5px 0; color:#455560; float:left;}
.article .cat {width:259px; display:block; padding:5px 0; float:left; text-align:right;}
.article .author,
.article .more {width:259px; display:block; float:left;}
.largeImg {width:636px; height:396px; border:1px solid #435762; clear:left;}

#teamOverview {width:640px; margin:0; padding:15px 0 0 0; list-style:none; overflow:hidden; border-top:1px dashed #95a3ad;}
#teamOverview li {width:151px; height:195px; margin:0 12px 0 0; display:block; float:left; font-size:90%;}
#teamOverview a {width:139px; height:183px; padding:6px; display:block; text-decoration:none;}
#teamOverview a:hover {background:url(/images/backgrounds/teamActive.png) no-repeat top left;}
#teamOverview img {width:137px; height:137px; border:1px solid #95a3ad; margin-bottom:2px;}
#teamOverview span {display:block;}
#teamOverview .function {color:#455560;}
#teamOverview .hover {width:139px; height:183px; padding:6px; display:block; text-decoration:none; background:url(/images/backgrounds/teamActive.png) no-repeat top left;}

#employees {position:relative; margin:4px 0 0 0;}
#employees .scrollable {width:585px; margin:auto; height:116px; position:relative; overflow:hidden;}
#employees .items {width:2500px; position:absolute; top:0; left:0; clear:both; list-style:none; margin:0; margin:0; list-style:none;}
#employees .items .name {width:80px; text-transform:uppercase; display:block; color:#455560; text-align:center;}
#employees .items li {display:block; float:left; margin:0 1px 0 0;}
#employees .items a {width:86px; height:106px; padding:5px 15px; display:block; text-decoration:none; font-size:90%;}
#employees .items a:hover {background:url(/images/backgrounds/employeeHoverSmall.png) no-repeat top left;}
#employees .items img {width:80px; height:80px; border:1px solid #d9dde0;}
#employees .arrow {width:26px; height:53px; cursor:pointer; outline:0; position:absolute; top:30px; text-indent:-2000em; overflow:hidden; display:block; background-image:url(/images/sprites/scrollArrowsLight.png); background-repeat:no-repeat;}
#employees .disabled {cursor:default;}
#employees .prev {left:0; background-position:0 -53px;}
#employees .prev.disabled {left:0; background-position:0 0;}
#employees .prevActive {background-position:0 -53px;}
#employees .next {right:0; background-position:-28px -53px;}
#employees .next.disabled {right:0; background-position:-28px 0;}
#employees .nextActive {background-position:-28px -53px;}

.employee,
.projectDetail {border-bottom:1px dashed #95a3ad; margin-bottom:15px;}
.employee .details,
.projectDetail .details {border:none; padding-bottom:0;}

.projectDetail {margin-left:11px; width:620px;}
.projectDetail .details{margin-left:11px; width:495px;}

/* Bladeren */
.browse {width:520px; clear:left; list-style:none; margin:0; padding:5px 0 5px 114px; text-align:center;}
.browse li {display:inline; padding:0 4px 0 0;}
.browse a {text-decoration:none;}
.browse .active,
.browse a:hover {color:#455560;}

/* Flash element (video player) */
#videoPlayer {width:644px; overflow:hidden; padding-bottom:10px;}
#videoPlayer object {outline:0;}

/* Footer */
#footer {position:relative; clear:both; padding:15px 0 0 22px; height:20px;}
#footer .copyright {position:relative; bottom:10px; text-transform:uppercase; color:#95a3ad;}

/* Bedrijven regatta */
#regatta {position:absolute; bottom:-50px; right:427px; display:block; width:192px; height:85px; background:url(/images/logos/bedrijvenRegatta.png) no-repeat left; text-indent:-2000em;}
#regatta:hover {background-position:right;}

/* Logos in de footer */
#socialNetworkLogos {width:394px; margin:0; padding:0 0 0 20px; list-style:none; overflow:hidden; background:#e6eaea url(/images/backgrounds/bottomLogos.png) no-repeat right top; position:absolute; right:0; bottom:0;}
#socialNetworkLogos li {height:35px; float:left; display:block; margin:0;}
#socialNetworkLogos a {height:35px; text-indent:-2000em; overflow:hidden; display:block; background-image:url(/images/logos/socialnetworks.png); background-repeat:no-repeat;}
#socialNetworkLogos #twitter {width:103px;background-position:0 0;}
#socialNetworkLogos #twitter:hover {background-position:0 -36px;}
#socialNetworkLogos #youtube {width:93px; background-position:-103px 0;}
#socialNetworkLogos #youtube:hover {background-position:-103px -36px;}
#socialNetworkLogos #linkedin {width:99px; background-position:-196px 0;}
#socialNetworkLogos #linkedin:hover {background-position:-196px -36px;}
#socialNetworkLogos #flickr {width:77px;background-position:-317px 0;}
#socialNetworkLogos #flickr:hover {background-position:-317px -36px;}

/* Sprites */
.section {background-image:url(/images/sprites/section.png); background-repeat:no-repeat; font-size:0; line-height:0;}
#tabs a,
#tabs .center {background-image:url(/images/sprites/tabs.png); background-repeat:no-repeat;}