/* html BODY */
body {
  font-family: Arial,sans-serif;
  font-size: 100%;
  background: #A5A5A5;
}

/* reset margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* image without border by default */
img {
  border-width: 0px;
}

/* invisible divs */
span.debug {
  display: none;
  font-family: Courier New;
  font-size: 8pt;
}
h3 {
  display: none;
}
div#sectionIntro h1 {
  display: none;
  font-family: Courier New;
  color: #000000;
  font-size: 15pt;
  font-weight : bold;
  text-align: center;
  text-decoration: none;
}

/* page BORDER1, BORDER2, BORDER3 */
div#border1 {
  margin: 3px auto;
  width: 793px;
  background: #A2A2A2;
}
div#border2 {
  margin: 3px auto;
  width: 787px;
  background: #9F9F9F;
}
div#border3 {
  margin: 3px auto;
  width: 781px;
  background: #9C9C9C;
}
/* page CONTAINER, contains all elements */
div#container {
  margin: 10px auto 0px auto;
  width: 775px;
  position: relative;
  text-align: left;
  padding: 0 0 15px 0;
  background: #999999;
  border: 0px solid #000;
}

/* page HEADER, contains headline and picture */
div#sectionIntro {
  background: url(../img/intro.jpg);
  width: 775px;
  height: 151px;
}

/* page Login/Logout/ChPwd */
div#sectionLoginLogout {
  text-align: right;
  position: absolute;
  top: 0px;
  left: 570px;
  padding: 119px 0 0 0;
}
div#sectionLoginLogout a {
  font-family: Courier New;
  font-size: 9pt;
  text-decoration: none;
  color: #CC9900;
  margin: .7ex;
}
div#sectionLoginLogout a:hover {
  color: #00AAFF;
}

/* page MENU, contains navigation bar */
div#sectionPageMenu {
  padding: 20px 0 0 0;
  text-align: center;
}
div#sectionPageMenu a {
  font-family: Courier New;
  font-size: 13pt;
  font-weight: bold;
  text-decoration: none;
  color: #FF9900;
  margin: .7ex;
}
div#sectionPageMenu a:hover {
  color: #0000FF;
}
div#sectionPageMenu span#activePage {
  font-family: Courier New;
  font-size: 14pt;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
  margin: .7ex;
}

/* page BODY, contains data lines, album lines, comment lines, links, etc. */
div#sectionTable {
}
div#sectionTable h2 {
  font-family: Comic Sans MS;
  color: #A5A5A5;
  font-size: 16pt;
  font-weight : bold;
  text-decoration: none;
  margin-left: 2ex;
}

/* first line in HOME */
div#lineWelcome,
/* line with design element */
div#lineDesignElement,
/* line with photo album, contains album name, picture, comment and link */
div#lineAlbum,
/* line with photo thumbs, contains picture */
div#lineThumbs,
/* line with Comment, contains comment, date, time, user and IP-address */
div#lineComment,
/* line with News, contains news, date and time */
div#lineNews,
/* line with Links, contains webaddress and comment */
div#lineLink,
/* line with Admin text, like AddNews and UnpackZip */
div#lineAdmin,
/* line with other text, like technic and contact */
div#lineBasicText,
/* line with foating high of boxLOG */
div#lineLogText {
  clear: both;
  margin: 1px 0 0 0;
  width: 100%;
}

/* 4 diferent formats, contains boxA, boxB and boxC */
div.formatX21, div.formatX41, div.format1X2, div.format4X1
{
  height: 110px;
  text-align: center;
}
/* box A, B, C */
div.boxA, div.boxB, div.boxC {
  height: 100px;
  border: 1px solid #FFF;
  margin: 4px;
  float: left;
  position: relative; 
}
div.boxA, div.boxC {
  width: 100px;
}
div.boxA {
  background: #FF9900;
}
div.formatX21 div.boxA, div.formatX21 div.boxC, div.formatX41 div.boxA,
div.formatX41 div.boxC, div.format4X1 div.boxC, div.formatX21 div.boxB,
div.formatX41 div.boxB {
  left: 0px;
} 
div.formatX21 div.boxB {
  width: 210px;
}
div.formatX41 div.boxB {
  width: 430px;
}
div.format1X2 div.boxA {
  left: 110px;
} 
div.format1X2 div.boxB {
  left: 110px;
  width: 210px;
}
div.format1X2 div.boxC {
  left: -330px;
} 
div.format4X1 div.boxA {
  left: 440px;
}
div.format4X1 div.boxB {
  left: -110px;
  width: 430px;
}

/* boxA contains COMMENT button */
div.boxA a {
  font-family: Courier New;
  color: #777777;
  font-size: 13pt;
  font-weight: bold;
  text-decoration: none;
}
div.boxA a:hover {
  color: #0000FF;
}

/* 4 diferent formats of lineWelcome, lineAlbum, lineComment and lineNews,
   it contains box1 and box4 */
div.format0410, div.format0140, div.format0014, div.format0041,
div.format0111110 {
  height: 110px;
  text-align: left;
}
div.box1, div.box4 {
  height: 100px;
  border: 1px solid #FFF;
  margin: 4px;
  float: left;
  position: relative; 
}
/* this box has floating height used for bigger content, like multiline forms
   e.g. form for adding of comments, form for adding of news */
div.boxLOG {
  min-height: 100px;
  border: 1px solid #FFF;
  margin: 4px;
  float: left;
  position: relative; 
}
div.box1 {
  width: 100px;
}
div.box4, div.boxLOG {
  width: 430px;
}
div.format0140 div.box1, div.format0140 div.box4, div.format0041 div.box4,
div.format0111110 div.box1, div.format0140 div.boxLOG {
  left: 110px;
} 
div.format0410 div.box1 {
  left: 550px;
} 
div.format0410 div.box4 {
  left: 0px;
}  
div.format0014 div.box1, div.format0014 div.box4 {
  left: 220px;
} 
div.format0041 div.box1 {
  left: 660px;
} 
/* box1 contains this elements: ... */ 
div.welcomeText1, div.commentDate, div.commentTime, div.commentIP, 
div.commentUser, div.newsDate, div.newsTime, div.basicTitle1 {
  font-family: Arial;
  font-size: 9pt;
  font-weight: bold;
  text-align: right;
  margin: 7px;
}
div.commentIP, div.commentUser {
  vertical-align: text-bottom;
}
div.basicTitle2 {
  font-family: Arial;
  font-size: 9pt;
  font-weight: bold;
  position: absolute;
  bottom: 0px;
  text-align: right;
  margin: 7px;
  width: 86px;
}
/* box4 contains this elements: ... */
div.albumLock, div.adminLock {
  margin: 7px;
  position: absolute;
  top: 0px;
}
div.albumName, div.linkAddress, div.adminLink {
  font-family: Arial;
  font-size: 9pt;
  font-weight: bold;
  text-align: right;
  color: #000;
  margin: 7px;
}
/* link upper right in box4 */
div.albumName a, div.linkAddress a, div.adminLink a {
  color: #000000;
  text-decoration: none;
}
div.albumName a:hover, div.linkAddress a:hover, div.adminLink a:hover {
  color: #0000FF;
}

div.welcomeText2 {
  font-family: Arial;
  font-size: 9pt;
  font-weight: bold;
  text-align: left;
  color: #FFF;
  margin: 7px;
} 
div.basicText1 {
  font-family: Arial;
  font-size: 8pt;
  font-weight: bold;
  text-align: left;
  color: #FFF;
  margin: 7px;
} 
div.welcomeText3, div.albumComment, div.commentText, div.newsText, 
div.linkComment, div.basicText2, div.adminComment {
  font-family: Arial;
  font-size: 8pt;
  font-weight: bold;
  position: absolute;
  bottom: 0px;
  text-align: left;
  color: #FFF;
  margin: 7px;
  width: 416px;
}

/* ALBUM picture, THUMB picture */
div.centredVertHoriz {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 100px;
  height: 100px;
}
div.centredVertHoriz * {
  vertical-align: middle;
}
/* trik pre IE/Mac \*//*/
div.centredVertHoriz {
  display: block;
  line-height: 0.6;
}
div.centredVertHoriz span {
  display: inline-block;
  height: 100%;
  width: 1px;
}
/**/
/* trik pre IE */
* html div.centredVertHoriz span {
  display: inline-block;
  height: 100%;
}

/* box for Picture, Exif info, Prev/Next */
div.boxPicture {
  margin: 5px;
  padding-top: 20px;
  text-align: center;
  background: #999999;
  border: 1px solid #FFF;
}
div.boxPicture div.lineExif {
  margin: 20px;
  font-size: 8pt;
  font-weight: bold;
  text-align: right;
}
div.boxPicture div.linePrevNext {
  margin: 5px auto 5px auto;
  width: 6ex;
  font-size: 12pt;
  font-weight: bold;
  color: #A5A5A5;
  border: 1px solid #A5A5A5;
}
div.boxPicture div.linePrevNext a {
  font-size: 12pt;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
}

/* forms: Form LABEL, Form INPUT, Form TEXTAREA */
form  {
  text-align: left;
  margin-bottom: 1px;
} 
form label {
  width: 70px;
  float:left;
  text-align: right;
  font-size: 9pt;
  color: #000;
}
form input, form textarea {
  margin-right: 5px;
} 
form select {
  width: 300px;
}

/* page FOOTER, contains copyright, warning, validation link, admin menu */
div.sectionFooter {
}
div.copyright {
  clear: both;
  background: url(../img/footer.jpg);
  margin-top: 30px;
  margin-bottom: 30px;
  font-family: Courier New;
  font-size: 9pt;
  text-align: center;
  font-weight : bold;
  padding-top: 15px;
  padding-bottom: 16px;
  color: #000000;
}
div.warning {
  font-family: Arial;
  font-size: 7pt;
  text-align: center;
  font-weight : bold;
  padding-bottom: 15px;
  color: #003366;
}

/* page VALID, contains XHTML and CSS validation */
div#sectionValid  {
  text-align: right;
  margin-right: 1ex;
}
div#sectionValid a {
  font-family: Courier New;
  font-size: 10pt;
  font-weight: bold;
  text-decoration: none;
  color: #FF9900;
  margin: .4ex;
}
div#sectionValid a:hover {
  color: #0000FF;
}