/**********************
MAIN STYLESHEET
Propodo.nl
**********************/

/**** Basic & Fallback Typography ****/
h1, h2, h3, h4, h5, h6, p, ul, ol, li, td {font-family: sans-serif; color: #231f20;}
/**** Base Styles ****/
html, body{background-color: #f7f7f7;}
a{outline: none;}
#blockWrapper{width:900px;height:600px;position:absolute;left:50%;top:50%;margin-left:-450px;margin-top:-300px;}
#blockWrapper div{height: 300px; float: left;}
h1{font-size: 18px; text-transform: lowercase; line-height: 20px;}
h2{color: #786853; font-size: 16px; text-transform: lowercase;}
p, ul, li{font-size: 13px; line-height: 18px;}

/**** Base Colors ****/
.brownBg {background-color: #786853;}
.greenBg {background-color: #c8d20d;}
.brown {color: #786853;}
.green {color: #c8d20d;}

/**** Navigation ****/
#menuSq{background-color: #c8d20d; width: 300px;}
ul#mainMenu {margin: 75px 0 0 32px; padding: 0;}
ul#mainMenu li {list-style-type: none; font-size: 18px; line-height: 24px;}
ul#mainMenu li a{text-transform: lowercase; text-decoration: none; color: #786853;}
ul#mainMenu li a:hover{color: #FFF;}
ul#mainMenu li a.active{color: #FFF;}

/**** Homepage Items ****/
.miniItemSq{width: 300px;}
.miniItemSq h1{margin: 10px 0 0 25px; width: 220px; color: #786853;}
.miniItemSq p{margin: 15px 0 10px 25px; width: 250px;}
.readMore a{margin: 0 0 0 25px; font-size: 14px; color: #786853; text-decoration: none; text-transform: lowercase;}
.readMore a:hover{color: #FFF;}

/**** Subpage items ****/
.bigItemSq{background-color: #c8d20d; width: 600px; height:300px; position:relative;}
.bigItemSq h1{margin: 20px 0 0 25px; width: 220px; color: #786853;}
.bigItemSq p{margin: 15px 0 10px 25px; width: 550px;}
.bigItemSq ul{margin: 15px 0 10px 25px; width: 550px;}

/**** Image galleries ****/
a.browse{cursor: pointer;}
a.left{width: 17px; height: 25px; background: url(/gfx/core/arrowLeft.png); margin: 0 0 0 16px; display: block; position: absolute; top: 137px; left: 0; z-index: 101;}
a.right{width: 17px; height: 25px; background: url(/gfx/core/arrowRight.png); margin: 0 16px 0 0; display: block; position: absolute; top: 137px; right: 0; z-index: 101;}

a.disabled {visibility:hidden !important;} 	
div.scrollable{position:relative; overflow:hidden; width: 600px; height: 300px;}
div.scrollable div.items { width:20000em; position:absolute; } 
div.scrollable div.items div{float:left; position:relative; width: 600px;}
div.scrollable div.items div .galleryImage{position:absolute; z-index: 99;}
span.imageDescription{padding: 5px; width: auto; font-family: sans-serif; height: auto; background: url(/gfx/core/imageDescriptionBg.png); font-size: 12px; color: #FFF; position:absolute; z-index:100; bottom:0; right:0;}

/**** Contentlistings (Actueel, etc.) ****/
h2 a{color: #786853; text-decoration: none;}
h2 a:hover{color: #FFF;}
.bigItemSq ul li p{margin: 0px 0 10px; padding: 0;}
div.scrollable div.items div h1{margin: 20px 0 0 0; width: 500px;}
div.scrollable div.items div p{margin: 15px 0 10px 0; width: 550px;}
div.scrollable div.items div img{float:left; margin: 0 25px 05px 0;}