/*
 photoaddiction.net stylesheet 
 by Damien Debin <damien(at)debin.net>

 feel free to learn from the code, but
 do not take it and use it as is for your
 own. re-use the code in your own way.
 use it as a starting point, not as a
 standalone layout. 
*/

p#hintbox { display: block; } /* must be rule 0 ... cf. javascript in index.php */
html, body { height: 100%; margin: 0; padding: 0; }
body {
 font-size: 76%;
 color: #666;
}
h1, h2, h3, h4, p, li, div, textarea, input {
 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 color: #666;
 font-size: 1em;
}
a {
 font-weight: bold;
 color: #555;
 text-decoration: none;
}
strong, a.orange2:hover, a.orange:hover, #gallerylist h3, #titlebox .location  {
 color: #BBB;
}
p, h1, h2, h3, h4, div, form, ul, li, input, textarea, img, fieldset {
 margin: 0;
 padding: 0;
}
img, fieldset {
 border: 0;
}
h1, h2, h3, h4 {
 font-style: normal;
 font-weight: normal;
}
.clear {
 clear: both;
 margin: 0;
 padding: 0;
 width: 1px;
 height: 1px;
}
.mediumgray {
 color: #AAA;
}
.lightgray {
 color: #E2E2E2;
}
.yellow {
 color: #EFC12D;
}
.displaynone, hr {
 display: none;
}


div#header {
 width: 100%;
 height: 2.75em;
}
div#container {
 position: absolute;
 top: 2.5em;
 left: 0;
 height: 96%;
 width: 100%;
 overflow: visible;
 min-height: 700px;
 min-width: 700px;
}
div#photozone {
 position: absolute;
 top: 48%;
 left: 46%; /* cf. onResizeHideBox & index.php */
}
div#gallerylist  {
 position: absolute;
 top: 49%;
 right: 0;
 margin-top: -145px;
 min-width: 180px;
 width: 19%;
}
div#titlebox {
 position: absolute;
 top: 0;
 left: -134px;
 width: 130px;
 margin-top: 6px;
}
form#votebar {
 position: absolute;
 bottom: -20px;
 left: -16px;
 width: 12px;
}


div#header {
 text-align: left;
}
#header h1 {
 position: absolute;
 top: 3px;
 left: 4px;
}
#header h1 a {
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 200px;
 height: 34px;
 overflow: hidden;
 text-indent: -3000px;
}
div#topbar {
 background: #ECECEC;
 height: 29px;
 margin-left: 211px;
}
#topbar div.degrade {
 background: #F5F5F5;
 height: 29px;
 width: 12px;
 margin-right: 10px;
 float: left;
}
#topbar p.menuright, #topbar p.daybefore {
 color: #BBB;
 font-size: 13px;
}
#topbar p.menuright {
 float: left;
 padding: 6px 0 0 0;
}
#topbar p.daybefore  {
 float: right;
 padding: 6px 8px 0 0;
}
#topbar span.biggernav {
 line-height: 0;
 font-size: 18px;
}
a#colorswitch {
 float: right;
 overflow: hidden;
 text-indent: -3000px;
 margin: 7px 8px 0 0;
 display: block;
 height: 10px;
 width: 10px;
 border: 2px solid #888;
 background: black;
}


div#gallerylist {
 text-align: left;
 margin-right: 5px;
}
#gallerylist div.gallery {
 width: 182px;
 margin-right: auto;
 text-align: center;
 line-height: 0;
}
#gallerylist .gallery a, #gallerylist .gallery em, #gallerylist h3 {
 float: left;
 display: block;
}
#gallerylist div.thumbcol {
 width: 81px;
 float: left;
 margin-right: 10px;
}
#gallerylist h3 {
 width: 81px;
 font-size: 0.9em;
 height: 0.7em;
 padding: 0.5em 0em;
 text-align: center;
}
#gallerylist .gallery a, #gallerylist .gallery em {
 background: url(frame2.png) no-repeat top left;
 width: 81px;
 height: 82px;
 padding: 3px 0 0 0;
 margin: 0 0 6px 0;
}
#gallerylist br, #allgallery br, #gallerylist span, #allgallery span {
 display: none;
}


#photozone img.imgmain {
 background: #F4F4F4;
 padding: 9px;
 border: 1px solid #DDD;
}


div#titlebox {
 text-align: left;
}
#titlebox h2, p#hintbox {
 width: 126px;
}
#titlebox h2 {
 font-weight: bold;
 font-size: 1.2em;
 text-align: right;
}
p#hintbox {
 margin-top: 1em;
 text-align: right;
}


#votebar input {
 display: block;
 margin: 2px 0 0 0;
 padding: 0;
 height: 12px;
 width: 12px;
 overflow: hidden;
 text-indent: -3000px;
 border: 0;
}
#votebar input.vote-off {
 background: url(star_off.png) no-repeat center left;
}


div#addcomment {
 position: absolute;
 bottom: -22px;
 right: -3.5em;
 font-size: 0.9em;
 width: 1.5em;
 text-align: center;
}
#addcomment a.logocomment {
 padding-right: 1px;
 display: block;
 margin: 0 auto 1px auto;
 width: 10px;
 height: 10px;
 text-indent: -3000px;
 overflow: hidden;
}
#addcomment a.logocomment:hover {
 background-position: top right;
}


div#thanksbox {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 300px;
 height: 50px;
 margin-top: -25px;
 margin-left: -175px;
 text-align: left;
 border: #CCC 1px solid;
 padding: 10px 35px 15px 15px;
 background: white;
}
#thanksbox p.thanks {
 font-size: 1.3em;
}
#thanksbox div#closebox {
 padding: 4px 0 2px 7px;
}


div#closebox {
 width: 2.2em;
 height: 24px;
 padding-top: 4px;
 background: #EEE;
 border-left: #CCC 1px solid;
 border-bottom: #CCC 1px solid;
 position: absolute;
 top: 0;
 right: 0;
 text-align: center;
}
div#closebox a {
 color: black;
 font-size: 15px;
}
div#commentslist {
 position: absolute;
 top: 50%;
 left: 46.5%;
 height: 380px;
 width: 600px;
 margin-top: -205px;
 margin-left: -300px;
 display: none;
 padding-top: 30px;
 background: white;
 border: #CCC 1px solid;
}
#commentslist p.commentstitle {
 background: #E9E9E9;
 border-bottom: #CCC 1px solid;
 position: absolute;
 top: 0;
 left: 0;
 font-size: 14px;
 padding: 6px 0.5em 0 0.5em;
 height: 22px;
 margin: 0;
 width: 570px;
 text-align: left;
 font-weight: bold;
}
#commentslist ul {
 margin: 0;
 text-align: left;
 padding: 0;
 width: 368px;
 overflow: auto;
 height: 365px;
 float: right;
 list-style-type: none;
}
#commentslist li {
 background: url(puce.gif) no-repeat 0 0.77em;
 margin: 0 4px 0 0;
 padding: 0.5em 4px 0.6em 17px;
}
#commentslist form {
 margin: 5px 0 0 0;
 width: 200px;
 height: 370px;
 overflow: auto;
 padding: 0 12px;
 background: white;
 border-right: #CCC 1px dotted;
 float: left;
}
#commentslist form fieldset {
 text-align: center;
 clear: both;
}
#commentslist form legend {
 display: none;
}
#commentslist form label {
 margin: 6px 0 3px 0;
}
#commentslist form input, #commentslist form textarea {
 width: 190px;
 padding: 1px;
 margin-bottom: 6px;
}
#commentslist form input#submit {
 margin: 5px 0 0 0;
}
#commentslist form input#saveinfo {
 display: inline;
 width: 20px;
 padding: 0;
 margin-bottom: 0;
}


#gallerylist div#copyrightnotice {
 width: 172px;
 margin-right: auto;
 text-align: center;
 clear: both;
}
#copyrightnotice p.logo {
 padding: 10px 10px 0 10px;
 text-align: center;
}


div#allgallery  {
 margin: 3.5% auto;
 width: 888px;
}
#allgallery p.sortmenu {
 font-size: 1.3em;
 padding: 0 0 1.5em 0;
 text-align: center;
}
#allgallery div.allthumbs {
 clear: both;
}
#allgallery .allthumbs a, #allgallery .allthumbs em {
 display: block;
 float: left;
}
#allgallery .allthumbs a {
 background: url(frame2.png) no-repeat top left;
 width: 81px;
 height: 82px;
 padding: 3px 1px 0 3px;
 margin: 0 13px 28px 13px;
}
#allgallery .allthumbs em {
 width: 79px;
 height: 79px;
 padding: 0;
 margin: 0 32px 31px 0;
 border: 1px dashed #888;
}
#allgallery strong {
 border-bottom: 1px dotted #BBB;
 padding-bottom: 0.1em;
}
#allgallery p.showallmenu {
 margin: 0 0 40px 0;
 text-align: center;
 font-size: 1.15em;
}
#allgallery div#copyrightnotice {
 padding-bottom: 2em;
}


div#about  {
 width: 63.5%;
 float: left;
 padding: 4% 1.5% 0% 4%;
}
#about p.about {
 text-align: left;
 line-height: 135%;
 padding: 0 0 0 150px;
 font-size: 1.1em;
}
#about div.myimg {
 float: left;
 width: 131px;
 text-align: center;
}
#about img.borderdashed {
 margin-top: 5px;
 margin-bottom: 5px;
 border: 1px dashed #999;
}
#about strong {
 color: #999;
}


div#links {
 width: 23.5%;
 float: right;
 padding: 4% 4% 0% 1.5%;
 text-align: right;
}
#links h3 {
 font-size: 1.3em;
 margin: 0 0 0.15em 0;
}
#links p {
 margin-bottom: 0.6em;
}
#links ul {
 margin: 0 1px;
 padding: 0.1em 0 0.6em 0;
 list-style-type: none;
}
#links li {
 margin-bottom: 0.2em;
}
#links .y {
 color: #AA0;
}