@import "reset.css";
@import "default.css";
@import "navigation.css";

/*
 * red                  => 	color: #ff0000;
 * light gray		=>  	color: #989898;
 * dark gray		=>	color: #666;
 */

html,	body  {  height: 100%;}
body { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #000; background: #0C0C0C url(img/body_bg.png) repeat-x top left; color: #fff; line-height: 1.4em; word-spacing: 0.01em;} 

a { color: #ff0000; text-decoration: none; }
.white { color: #fff; }
h1, h2 { text-transform: uppercase; font-weight: bold; color: #fff; line-height: 1.0em;}

#wrapper { width: 1000px; margin: 0 auto; overflow: visible;  position: relative; height: auto !important; height: 100%; min-height: 100%;  }

#header { width: auto; background: #000; height: 40px; padding: 0 15px; overflow: visible;} 
#header h1 { line-height: 40px; font-size: 30px; float: left; color: #fff;   }
#header h1 a { color: #fff; text-decoration: none; outline: none;}
#header h1 span { color: #ff0000; }

#language-select { position: absolute; right: 10px; color: #fff; height: 1.2em; margin: 10px 0; font-size: 1em; line-height: 1em; width: auto; top:0; }
#language-select li { height: 1.2em; float: left;  }
#language-select li a { color: #fff; text-decoration: none; display: block; width: 100%; height: 100%; padding: 5px;}
#language-select li a:hover { text-decoration: none; }

#language-select:hover { height: auto; overflow: visible;}

#search-bar { height: 18px; width: 182px; padding: 3px 0px 0px 15px; margin: 8px 0 8px 0; border: 1px solid #000; background: #fff url(img/search.png) 205px center no-repeat; color: #000; font-size: 0.9em; cursor: default; top:0; position: absolute; right: 150px; } 

#ctleft { width: 620px; float: left; overflow: hidden; margin-left: 10px; display: inline;  }
#ctright { width: 350px; float: right;  overflow: hidden; display: inline;  }

div.block { background: #000;  color: #989898; padding: 10px; width: auto; margin-bottom: 10px; position: relative; overflow-x: hidden; z-index: 1;}
div.block h1 { line-height: 2em; }

#new-photo { width: 600px; overflow: hidden;}
#new-photo img { float: left;   } 

.red { color: #ff0000; }  

#most-recent { position: absolute; top: 10px; left: 10px; width: 101px; height: 101px; background: url(img/most_recent.png) no-repeat; overflow: hidden; } 

.image-overlay { display: block; height: 100px; width: 600px; position: absolute; bottom: 10px; left: 10px; background: url(img/blank.gif); }
.image-overlay .inner,
.image-overlay .bg { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; line-height: 1em; font-size: 1.1em;}
.image-overlay .inner { padding: 10px; }
.image-overlay .bg { background: #000; opacity: 0.65;}
a.white { font-weight: bolder; }
.image-overlay .inner h2 { line-height: 1.9em; font-size: 1.5em;}

.image-overlay span.date { border-right: 1px solid #fff; padding: 0 0.5em 0 0; margin: 0 0.4em 0 0; display: block; height: 1em; float: left; font-style: italic; }

#news-overview span.date { font-size: 1.3em; }

div#partners { width: 370px; background: none; padding: 0; border: none; }
div#partners h2 { color: #666; margin-left: 10px;}
div#partners img { border: 1px solid #666; float: left; margin-right: 20px;}
div#partners span { display: block; clear: left; text-align: right; padding-top: 20px; width: 350px;}
div#partners span a { color: #fff; text-decoration: none; }
div#partners span img { border: none; float: none; margin: 0 10px;}

dd.image table { text-align: center; border: 1px solid #666; width: 180px;}
dd.image table td  { height: 180px; width: 100%; }
dd.image table td img { border: none;}

dd.image { background: #000; padding: 10px; overflow: visible; }
dd.image img { vertical-align: middle; }

#shoot-overview { width: 650px; background: none; padding: 0;}
#shoot-overview dl { float: left; margin-right: 10px; width: 200px; display: inline;}
#shoot-overview dt { padding: 0 10px; font-size: 1.1em;}
#shoot-overview dd.title { height: 40px; padding-left: 10px; padding-top: 0.2em; overflow: hidden;}
#shoot-overview dd.title h2 { padding-top: 4px }
#shoot-overview span.date { display: block; font-style: italic; }
#shoot-overview a.float-right { margin-right: 40px; }

#tags a { color: #fff; }
#tags a:hover { color: #ff0000; }
div.first { padding: 15px 10px 25px 10px; }
div.first h1 { margin-bottom: 7px; } 

h2 a, h3 a { color: #fff; text-decoration: none; }
h2 a:hover, h3 a:hover { text-decoration: none; }

#auto-complete { display: none; position: absolute; top: 30px; right: 130px; width: 217px; background: #000; z-index: 99; border: 1px solid #989898;}
#auto-complete a {color: #fff; }

#news-overview label { width: 80px;}
#news-overview span { text-transform: uppercase; color: #fff; width: 250px; }
#news-overview a { color: #fff;}
#news-overview a:hover { text-decoration: none;}
h3 { display: inline; font-size: 1em;}
ul.newsOverview li { margin-bottom: 1em;}

/** LANGUAGE **/
html:lang(en) *:lang(nl),
html:lang(nl) *:lang(en) {display: none;}
html.nl .en,
html.en .nl { display: none; }

/** Albums **/
#album-overview { width: 620px; padding-left:20px;}
#album-overview dd.image { padding: 10px 0;}
#album-overview dl dd.title { height: 40px; padding-top: 0.2em; overflow: hidden;}  
#album-overview dl { float: left; width: 182px; padding: 5px 18px 5px 0;}
#album-overview dd.title h2 { padding-top: 4px }
#album-overview span.date { display: block; font-style: italic; }
#album-overview a.float-right { margin-right: 40px; }


body.albums .image-overlay { left: 0px; top: 0; text-align: left;  z-index: 2; height: 100%; width: 600px; border: 1px solid #989898;}
body.albums .image-overlay:hover .bg,
body.albums .image-overlay:hover .inner { display: block;}  

body.albums .image-overlay .bg { height: 110px; bottom: 0px; left: 0; top:auto; position: absolute; opacity: 0.8; /*background-color: #333333;*/ z-index: 3; display: none;}
body.albums .image { position: relative; overflow: visible; }
body.albums .inner { width: 90%; position: absolute; bottom: 0; top: auto; left: 0; height: 90px; z-index: 4; display: none; overflow: visible;} 
.image { text-align: center; overflow: visible;} 
.image img { display: block; margin: 0 auto;}

body.search #album-overview { padding-left: 10px;}
body.search div.block h1 { line-height: 1em; margin-bottom: 1em;}

#album-overview dl dd.title:hover {/* min-height: 40px; height: auto !important; height: 40px;*/}

div.image { background: url(img/loading.gif) center center no-repeat; height: auto; min-height: 200px;}

#login-form { width: 350px; font-size: 1.2em; margin: 20px auto; border:2px solid #333333; padding: 10px;}
#login-form span { float:right; }
#login-form label { color: #ff0000;}
#login-form input.text { padding: 2px 5px; width: 240px; border:1px solid #989898; background: #333333; color: #fff;}
#login-form li { line-height: 2.5em;}
#login-form li.buttons {text-align: right;}
#login-form li.buttons input { width: 95px; background: #333333; color: #fff; border: 1px solid #989898;}

.welcome { line-height: 40px; padding-left: 1em; font-size: 1.1em; }
.welcome a.white { color: #fff;}

span.pagination {
    display:block;
    width: 100%;
}