@import url('common_styles.css');

.head {height: 37px; padding-bottom: 15px;}
.head h1 {height: 37px; text-indent: -9999px; float: right;}
.head h1.warszawa {background: url(../i/headers/tomo_w_warszawie.png) no-repeat 100% 0; width: 265px;}
.head h1.sopot {background: url(../i/headers/tomo_w_sopocie.png) no-repeat 100% 0; width: 224px;}

.menu_nav, .middle_col, .right_col {background: url(../i/h_line.gif) no-repeat 0 0; padding-top: 20px; float: left; display: inline; height: 335px;}

.middle_col2, .right_col2 {background: url(../i/h_line.gif) no-repeat 0 0; padding-top: 20px; float: left; display: inline; height: 335px;}

.menu_nav {width: 160px;}
.middle_col {width: 270px; margin-left: 50px; position: relative;}
.right_col {width: 388px; margin-left: 40px; position: relative;}

.middle_col2 {width: 388px; margin-left: 50px; position: relative;}
.right_col2 {width: 270px; margin-left: 40px; position: relative;}


.menu_nav li {font: 12px/22px "Segoe UI", Arial, Helvetica, sans-serif; text-align: right;}
.menu_nav li span {font-weight: bold; color: #f4de9b;}
.middle_col .talerzyk {position: absolute; top: -41px; left: 8px;}

.right_col .content {width: 388px; height: 435px; overflow: hidden;}
.right_col .content .c0, .right_col2 .content .c1 {width: 194px; float: left;}
.right_col .content p {margin-bottom: 20px; font: 12px/22px "Segoe UI", Arial, Helvetica, sans-serif; text-align: justify;}

.right_col .content2 {width: 388px; height: 635px; overflow: hidden;}
.right_col .content2 .c0, .right_col2 .content .c1 {width: 194px; float: left;}
.right_col .content2 p {margin-bottom: 20px; font: 12px/22px "Segoe UI", Arial, Helvetica, sans-serif; text-align: justify;}

.right_col2 .content {width: 270px; height: 435px; overflow: hidden;}
.right_col2 .content .c0, .right_col2 .content .c1 {width: 194px; float: left;}
.right_col2 .content p {margin-bottom: 20px; font: 12px/22px "Segoe UI", Arial, Helvetica, sans-serif; text-align: justify;}

.right_col2 .content2 {width: 388px; height: 635px; overflow: hidden;}
.right_col2 .content2 .c0, .right_col2 .content .c1 {width: 194px; float: left;}
.right_col2 .content2 p {margin-bottom: 20px; font: 12px/22px "Segoe UI", Arial, Helvetica, sans-serif; text-align: justify;}


.right_col #contentCtr {height: 242px; overflow: hidden; position: relative;}
.right_col #contentCtr .content {position: absolute; top: 0; left: 0; width: 388px; overflow: hidden;}
.right_col #contentCtr .content p {margin-bottom: 22px}

.right_col #imgCtr {position: relative;}
.right_col #imgCtr .loading {width: 388px; height: 236px; position: absolute; top: 0; left: 0; background: #000; z-index: 2;}
.right_col #imgCtr p {margin: 107px 0 0 0; text-align: center; letter-spacing: 0.2em;}
.right_col #imgCtr p.error {color: #f99; letter-spacing: 0.1em;}
.right_col #imgCtr img {position: absolute; top: 0; left: 0; z-index: 1; border: 1px solid #434343; margin-bottom: 25px;}
.right_col #imgCtr a {position: absolute; right: 0; top: 265px;}

.middle_col #mini {height: 258px; width: 270px; overflow: hidden;}
.middle_col ul {overflow: hidden;}
.middle_col ul li {float: left; display: inline; margin: 0 0 22px 21px; height: 64px; width: 76px; overflow: hidden;}
.middle_col ul li.first {clear: left: float: left; margin-left: 0;}
.middle_col ul li a img {border: 1px solid #434343;}
.middle_col ul li a:hover img, .middle_col ul li a.active img {border: 1px solid #f4de9b;}

.middle_col #str {width: 270px; height: 7px; line-height: 7px; position: absolute; top: 290px;}
.right_col #str {width: 388px; height: 7px; line-height: 7px; position: absolute; top: 290px;}
#str ul {margin: 0 auto; height: 7px; line-height: 7px; overflow: hidden;}
#str li {float: left; display: inline; width: 7px; height: 7px; margin: 0 7px; background: url(../i/strBg.gif) no-repeat 0 -7px;}
#str li.current {background-position: 0 0;}
#str li.hover {background-position: 0 -14px; cursor: pointer;}