/* project www.stop-spalovne.cz */

/* HTML tags */
body {font:0.9em Arial, Helvetica, sans-serif; line-height:1.458em; color:#000; background:#fff url(../img/body-bg.png) repeat-x 0 0;}
a {text-decoration:underline; color:#e08004;}
a:hover, a:focus, a:active {text-decoration:none;}
p {color:#000; font-size:0.9em; margin-bottom:7px;}
h2 {font-size:1.2em; text-align:center; margin-bottom:40px; margin-top:30px; position:relative; overflow:hidden; height:20px;}
h3 {font-size:1.3em; margin:0 0 10px; line-height:1.4em; position:relative; overflow:hidden; height:25px;}
h3 span {position:absolute; top:0; left:0; display:block; width:100%; height:100%;}

/* Layout */
#container {margin:0 auto; width:960px;}
#header {position:relative; height:266px; background:url(../img/header.jpg) no-repeat 0 0;}
.divider {height:26px; font-size:1px; clear:both; overflow:hidden; display:block; margin:20px 0; padding:0; width:960px; background:url(../img/divider.png) no-repeat 0 0;}

/* Header */
#logo {display:block; overflow:hidden; width:457px; height:132px; position:absolute; top:25px; right:0; margin:0;}
h1 {position:absolute; overflow:hidden; width:960px; height:108px; display:block; bottom:0; left:0;}
h1 span {position:absolute; top:0; left:0; display:block; width:960px; height:108px; background:url(../img/h1.jpg) no-repeat 0 0;}

/* Content */
h2 span {position:absolute; top:0; left:0; background:url(../img/h2.png) no-repeat 0 0; display:block; width:960px; height:20px;}
#prologue {float:left; width:505px; padding:40px 0 0 20px;}
#prologue h3 {text-align:center; margin-bottom:30px;}
#prologue h3 span {background:url(../img/prologue-h3.png) no-repeat 0 0;}
#prologue p {text-align:justify;}
#prologue p#sign {margin:20px 0 0 0; width:290px; text-align:center; float:right; font-size:11px; color:#333;}
#prologue p#sign strong {font-size:14px;}
#big {width:415px; float:right; margin:0 0 20px 0; background:#fff url(../img/big-photo.png) no-repeat 0 0;}
#big a {width:415px; height:455px;}
#big img {padding:15px 13px 16px 13px;}

#story {padding:0 20px;}
#story h3 {padding-left:10px; margin-bottom:25px;}
#story h3 span {background:url(../img/story-h3.png) no-repeat 10px 0;}
#story .col {float:left; width:285px; padding:0 10px; text-align:justify;}
#story .center {border-left:1px solid #d4d4d4; border-right:1px solid #d4d4d4;}
#story .photo {width:306px; margin:30px 0 40px 0; background:#fff url(../img/story-photo.png) no-repeat 0 0;}
#story .photo a {width:306px; height:214px;}
#story .photo img {padding:9px 11px 13px 11px;}
#story p {text-indent:15px; margin-bottom:0;}
#story p.first {text-indent:0;}
#story .photo .description {display:block; font-size:0.9em; line-height:1.4em; padding:5px 6px 5px 25px; position:relative; background:#fff url(../img/photo-description.png) no-repeat 5px 3px;}

#reasons {overflow:hidden; background:url(../img/reason-line.png) repeat-y 483px 0; margin:0 0 40px 0;}
#reasons .col {float:left; width:480px;}
#reasons .snd {padding-top:65px; *padding-top:68px;}
#reasons .col img {margin-bottom:15px;}
#reasons .col p {padding:0 20px; margin-bottom:12px;}
#reasons .col p strong {text-transform:uppercase; font-size:1.2em;}
#reasons .col p strong span {font-size:1.6em;}

#gallery {overflow:hidden;}
#gallery h3 {padding-left:20px;}
#gallery h3 span { background:url(../img/gallery-h3.png) no-repeat 0 0;}
#gallery .photo {width:182px; margin:10px 12px 20px 0; background:#fff url(../img/gallery-photo.png) no-repeat 0 0;}
#gallery .last {margin-right:0;} 
#gallery .photo a {width:182px; height:138px;}
#gallery .photo img {padding:9px 8px 9px 9px;}

#who {overflow:hidden;}
#who h3 {padding-left:20px;}
#who h3 span {background:url(../img/who-h3.png) no-repeat 0 0;}
#who .photo {width:173px; margin:10px 10px 20px 12px; background:#fff url(../img/who-photo.png) no-repeat 0 0;}
#who .last {margin-right:0;} 
#who .first {margin-left:0;}
#who .line {float:left; background:#d4d4d4; width:1px; height:310px; display:block; overflow:hidden; font-size:1px; margin:15px 0 0 0;}
#who .photo a {width:173px; height:236px;}
#who .photo img {padding:12px 9px 14px 9px;}
#who .photo .description {display:block; font-size:0.9em; line-height:1.4em; padding:5px 0 5px 6px; position:relative; background:#fff url(../img/photo-description.png) no-repeat 5px 3px;}
#who .photo .description strong {display:block; margin-left:18px; margin-bottom:10px;}

#time {height:270px;}
#time h3 {padding-left:20px; height:30px;}
#time h3 span {background:url(../img/time-h3.png) no-repeat 0 0;}
#timeline {width:960px; height:100px; background:#fff url(../img/timeline-bg.png) no-repeat 0 0; margin:50px 0 0 0; position:relative;}
#timeline .year { display:block; position:absolute; top:-25px; text-align:center; background:url(../img/year.png) no-repeat 50% 100%; width:40px; height:25px;}
#timeline .bubbleInfo {position:absolute; width:16px; height:16px; display:block; top:-5px;}
#timeline .trigger {display:block; background:url(../img/bullet.png) no-repeat 50% 50%; width:16px; height:16px; text-indent:-9999px; cursor:help; outline:none;}
#timeline .popup {position:absolute; width:250px; height:auto; background:#fff url(../img/arrow.png) no-repeat 50% 0; cursor:help; padding:45px 0 0 0; font-size:0.8em; text-align:center;}
#timeline .popup .headline {display:block; height:auto; padding:0; font-weight:bold;}
#timeline .popup .text {padding:0; display:block; color:#414141;}

.photo {float:left; margin:0;}
.photo p {margin:0; padding:0; line-height:0;}
.photo a {display:block; text-decoration:none;}
.photo img {display:block;}

/* Footer */
#footer { border-top:1px solid #A9A9A9; padding-top:10px;}
#footer p.left {margin-bottom:30px; text-align:left;}
#footer p.right {margin-bottom:30px; text-align:right;}