/*-----------------------------------------------------------------------------
Layout styles for Uznai section

version:   1.0
date:      10/04/08
author:    Alexander Chuprin
email:     a.s.chuprin@gmail.com
website:   www.chuprin.com

-----------------------------------------------------------------------------*/

#main #container { position: relative; min-height: 660px; background: url(../images/uznai/uznai_bg.gif) 0 0 no-repeat #d8c792; }
* html #main #container { height: 660px; }
#main #container .clearfix { padding: 44px 0 10px 12px; }

#display { position: relative; zoom: 1; }

#map { position: relative; zoom: 1; width: 628px; height: 615px; margin: -31px 0 0 31px; background: url(../images/uznai/map_bg.jpg) no-repeat; }
#map .title { position: absolute; left: 49px; top: 47px; margin: 0; }
#map object, #map embed { position: relative; z-index: 1; margin-top: 27px; }
#map .frame { position: absolute; z-index: 997; top: 66px; left: 0; width: 628px; }
#map .frame div { position: absolute; z-index: 997; }
#map .frame .top { position: absolute; left: 0; top: 0; width: 100%; background: url(../images/uznai/frame_top.png) no-repeat; height: 16px; }
#map .frame .left { width: 26px; height: 472px; left: 0; top: 16px; background: url(../images/uznai/frame_left.png) no-repeat; }
#map .frame .bottom { width: 628px; height: 43px; left: 0; top: 488px; background: url(../images/uznai/frame_bottom.png) no-repeat; }
#map .frame .right { width: 40px; height: 472px; top: 16px; right: 0; background: url(../images/uznai/frame_right.png); }

#how { position: relative; float: left; width: 472px; height: 171px; background: url(../images/uznai/how_bg.gif) no-repeat; }
#how .title { position: absolute; left: 37px; top: 3px; margin: 0; }
#how .more { display: none; position: absolute; right: 42px; top: 9px; }
#how .content { position: absolute; left: 35px; top: 47px; }
#how ul { margin: 0; }
#how ul li { float: left; width: 190px; margin: 0 15px 0 0; padding: 0; background: none; line-height: normal; }
#how ul li img { float: left; margin-right: 5px; }
#how ul li p { margin: 5px 0; }

#question { display: none; position: relative; float: left; width: 195px; height: 159px; margin: 10px 0 0 12px; background: url(../images/uznai/question_bg.gif) no-repeat; }
#question .title { position: absolute; left: 17px; top: 8px; margin: 0; }
#question .bubble { position: absolute; left: 24px; top: 41px; width: 119px; height: 53px; padding: 10px; background: url(../images/uznai/question_bubble_bg.gif) no-repeat; }
#question .more { position: absolute; left: 34px; top: 102px; } 

.col-1 { float: left; width: 185px; margin-right: -3px; }
#uznai-logo { margin: 0 0 0 4px; }
#uznai-logo img { display: block; }

#last-records { position:relative; z-index: 998; width: 186px; height: 366px; background: url(../images/uznai/lr_bg.gif) no-repeat; }
#last-records .content { position: relative; top: 34px; width: 117px; height: 290px; overflow: auto; margin: 0 0 0 32px; }
#last-records ul { margin: 0; }
#last-records ul li { margin-bottom: 12px; padding: 0; background: none; text-align: center; }
#last-records ul li img { text-decoration: none; }

.col-1 #question { margin: 0 0 0 -8px; background-image: url(../images/uznai/how_bg_2.gif); }

.col-2 { position: relative; zoom: 1; float: right; width: 515px; margin: -12px 0 0; }
.col-2 .bg { background: url(../images/uznai/col_2_bg.gif) repeat-y; }
.col-2 .bg-1 { position: relative; background: url(../images/uznai/col_2_top.gif) no-repeat; }
.col-2 .bg-2 { padding-top: 95px; min-height: 400px; //height: 400px; overflow: hidden; zoom: 1; background: url(../images/uznai/col_2_bottom.gif) 100% 100% no-repeat; }
.col-2 .col-2-bottom { height: 59px; background: url(../images/uznai/col_2_bottom_2.png); }
* html .col-2 .col-2-bottom  { zoom: 1; background-image:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/uznai/col_2_bottom_2.png',sizingMethod='image'); }

.col-2 .headline { position: absolute; width: 426px; left: 41px; top: 66px; font-size: 1.1em; color: #64296a; margin: 0; text-align: center; font-weight: normal; }
.col-2 .content { position: relative; width: 440px; margin: 0 0 0 36px ; }
#story-nav { position: relative; top: 0; display: inline; float: right; width: 60px; margin: 0; }
#story-nav a { float: left; width: 28px; height: 28px; margin-right: 2px; text-indent: -99999px; }
#story-nav .current { clear: both; padding: 6px 0 0; font-size: 1.1em; text-align: center; font-weight: bold; }
#story-nav a.prev { background: url(../images/story_nav_prev.png) no-repeat; }
#story-nav a.next { float: right; background: url(../images/story_nav_next.png) no-repeat; }
#story-nav a.prev:hover { background: url(../images/story_nav_prev_o.png) no-repeat; }
#story-nav a.next:hover { background: url(../images/story_nav_next_o.png) no-repeat; }
.listing { padding: 8px 15px; overflow: auto; zoom: 1; background: #f8e4b9; }
.listing h2 { float: left; width: 340px; font: normal 2em Rotonda Bold; margin: 0; color: #d9277a; }
.listing p { float: left; width: 340px; margin: 7px 0 3px; font: normal 1.2em Rotonda Regular ; }

#qa { padding: 7px 10px 10px; }
#qa h2 { margin-bottom: 0; }
#qa dl { margin: 5px 0; background: url(../images/uznai/dots.gif) 0 100% repeat-x;  }
#qa dt { padding: 12px 5px; background: url(../images/uznai/dots.gif) repeat-x; overflow: hidden; zoom: 1; }
#qa dt span { float: left; width: 70%; font-size: 1.1em; font-weight: bold; }
#qa dt a { float: right; }
#qa dd { display: none; margin: 0 0 12px; padding: 10px 20px; font-weight: bold; font-size: 1.1em; }
#qa dd { background: #f9df72; color: #a23520; }
.button-row .button { float: none; display: block; width: 126px; margin: 0 auto; }

#ask { padding: 15px 20px; overflow: hidden; zoom: 1; }
#ask .buttonrow { overflow: hidden; zoom: 1; }
#ask .textarea { margin: 10px 0; }
#ask .textarea textarea { height: 150px !important; }