/*	-------------------------------------------------------------
Jeugdraad
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Description:	Base stylesheet
Filename:			base.css
Version:			1.0
Date:					Jun 16 2008
-------------------------------------------------------------	*/


/*	-------------------------------------------------------------
Base HTML Styles
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

html {
    height: 100%;
    width: 100%; }

body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background: url(../img/page-bg.gif) top center no-repeat;
    font-family: Courier New; }

* html body {
    text-align: center; }

a {
    outline: none; }

img {
    border: none; }

* html img {
    behavior: url(../pngbehavior.htc) }

/*	-------------------------------------------------------------
Container
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

#container {
    width: 821px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: left;
/*background: url(../img/banner.jpg) top left no-repeat;*/ }

* html #container {
    padding: 250px 0 0 0; }

/*	"It's getting hot in here!" header
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

h2#header {
    width: 231px;
    height: 15px;
    margin: 0;
    padding: 0;
    text-indent: -9999em;
    position: absolute;
    top: 0;
    left: 0;
/*background: url(../img/its-getting-hot-in-here.jpg) top left no-repeat;*/ }


/*	-------------------------------------------------------------
Masthead
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

#masthead {
    height: 93px;
    padding: 305px 0 0 0;
    position: relative;
    /*background: url(../img/masthead-bg.png) bottom left no-repeat;*/
    background: url(../img/header.jpg) top left no-repeat; }

* html #masthead {
    margin: 250px 0 0 0;
    width: 815px;
    height: 209px;
    padding: 118px 0 0 0;
    margin: 0;
    background: none;
    position: static;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/masthead-bg.png',sizingMethod='image'); }

#masthead #voetafdruk {
    height: 118px;
    width: 118px;
    display: block;
    position: absolute;
    right: 17px;
    bottom: 95px;
    text-indent: -9999em; }

/*	Menu
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

#masthead ul {
    width: 100%;
    height: 350px;
    margin: 0 0 0 40px;
    padding: 0;
    list-style: none; }

#masthead ul li {
    margin: 2px 32px 0 0;
    float: left; }

#masthead ul li a {
    font-family: Myriad Pro, Arial;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700; }

* html ul li a {
    position: relative;
    z-index: 10; }

#masthead ul li a:hover, #masthead a.selected {
    color: #ffd800; }



/*	-------------------------------------------------------------
Content
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

#content {
    padding: 10px 40px;
    position: relative;
    font-family: Courier New;
    font-size: 14px;
    line-height: 22px; }

#content h1, #content h2, #content h3, #content h4, #content h5 {
    height: 19px;
    line-height: 19px;
    font-family: Courier New, Myriad Pro, Arial;
    font-weight: 700;
    /*text-transform: uppercase;*/
    background: #fff;
    color: #000;
    background: none;
    font-size: 16px;
    padding: 0;
    margin: 10px 0 10px 0; }

#content h1 {
    margin: 0 0 10px 0;
    line-height: 30px;
    font-size: 35px; }

#content a {
    color: #f00;
    text-decoration: none; }

#content a:hover {
    text-decoration: underline; }

button {
    border: none;
    background: #000;
    color: #fff;
    font-weight: 700;
    padding: 2px 5px;
    cursor: pointer; }

button:hover {
    color: #ffd800; }

input, textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px; }

label {
    display: block;
    float: left;
    width: 150px; }



/*	-------------------------------------------------------------
Rating
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

ul.star { 
    list-style: none;
    margin: 5px 0 0 0;
    padding: 0;
    width: 350px;
    height: 20px;
    float: left;
    background: url(../img/stars-jr.gif) repeat-x;
    cursor: pointer; }

* html ul.star {
    top: 0px;
    left: 0px;
    float: left;
    position: relative; }

.star li {
    padding: 0;
    margin: 0;
    display: block;
    width: 85px;
    height: 20px;
    position: absolute;
    text-decoration: none;
    text-indent: -9000px; }

.star li.curr {		
    background: url(../img/stars-jr.gif) left 25px;
    font-size: 1px; }

#last-image {
    position: absolute;
    top: 45px;
    left: 410px; }

* + html #last-image { /* IE 7 hack */
    top: 65px; }

* html #last-image { /* IE 6 hack */
    top: 65px; }

#last-image h1 {
    padding: 0;
    margin: 0;
    background: #fff;
    color: #000; }

a#skip-image {
    height: 30px;
    width: 40px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    background: #000;
    color: #fff;
    display: block;
    text-align: center;
    line-height: 30px; }

a#skip-image:hover {
    color: #ffd800;
    text-decoration: none; }

h2#comments-header, h2#leave-a-comment-header, h2#images-header, h2#nieuwe-foto {
    color: #fff;
    padding: 0 0 0 110px;
    font-size: 14px;
    background: #000 url(../img/header-bg.gif) top left no-repeat; }

#profiel-button {
    height: 39px;
    width: 65px;
    font-size: 14px;
    color: #fff;
    background: #000;
    line-height: 39px;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    display: block;
    text-transform: uppercase;
    position: absolute;
    right: 80px;
    top: 420px; }

#profiel-button:hover {
    color: #ffd800; }

#mod-paging a {
    margin: 0 10px 0 0;
}

.mod-page-sel {
    font-weight: 700;
}
/*	-------------------------------------------------------------
Footer 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

#footer {
    width: 850px;
    height: 162px;
    clear: both;
    background: url(../img/footer-bg.gif) bottom left no-repeat;
    margin: 30px 0 0 -15px; }


.rand { 
    background: #000 url(../img/rand.gif) top left repeat-x;
    padding-top: 15px; }