/******************************************************************
 * Edo Maajka CSS
 * @author	Ivan Maros
 * @since	14.03.2008
 ******************************************************************/

/******************************************************************
 * General
 ******************************************************************/
* {padding: 0; margin: 0;}
body, td {font: normal 11px/18px Arial, Helvetica, sans-serif; color: #3B2C25;}
body {background-color: #FFF; margin: 7px 0; padding: 0; text-align: center;}
a, a:link, a:visited, a:active, a:focus {color: #CC252B; text-decoration: none;}
a:hover {color: #3B2C25;}
img {border-width: 0;}
p {margin: 0 0 1.2em;}
hr {border: 0; height: 1px; color: #3B2C25; background-color: #666; margin: 0 0 5px;}
ul, li {list-style: none; margin: 0; padding: 0;}
table, td {vertical-align: top; margin: 0; padding: 0; border: 0;}
form select option {padding-right: 7px;}
.input-box {font: normal 11px Arial, Helvetica, sans-serif; border: 1px solid #999; color: #333; padding: 1px 3px;}
.warn_color {font-size: 11px; color: #F00; display: block;}
.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.block {display: block;}
.noborder {border: 0 ! important;}
.bold {font-weight: bold;}
h1, h2, h3, h4, h5 {margin: 0 0 .6em; color: #3B2C25;}

/******************************************************************
 * Structure
 ******************************************************************/
#container {position: relative; width: 760px; margin: 0 auto; padding: 0; text-align: left;}
#header, #content, #footer {clear: left; position: relative; width: 760px;}
#main-content {float: right; width: 590px;}
#extras {float: left; width: 140px; padding-bottom: 120px;}

/******************************************************************
 * Header
 ******************************************************************/
#header {height: 188px; background: url(images/em_bg_header.gif) no-repeat 0% 0%;}
#header h1 {position: absolute; left: 10px; top: 10px;}
#header ul {position: absolute; left: 10px; top: 130px;}
#header ul li {position: relative; float: left; padding: 0 22px 0 0; font-size: 12px; font-weight: bold; line-height: 18px;}
#header ul li a {float: left; display: block; width: 48px; height: 18px; text-indent: -9999px; background: #FFF url(images/em_menu_home.gif) no-repeat 0% 0%;}
#header ul li a:hover, #header ul li.current a {background-position: 0% -20px;}
#header ul li a#mn-biografija {width: 101px; background-image: url(images/em_menu_biografija.gif);}
#header ul li a#mn-diskografija {width: 124px; background-image: url(images/em_menu_diskografija.gif);}
#header ul li a#mn-press_clipping {width: 54px; background-image: url(images/em_menu_press.gif);}
#header ul li a#mn-fotke {width: 55px; background-image: url(images/em_menu_fotke.gif);}
#header ul li a#mn-booking {width: 78px; background-image: url(images/em_menu_booking.gif);}
#header ul li ul {position: absolute; top: 18px; left: 0px; display: none; background: #FFF; padding-top: 4px;}
#header ul li:hover ul, #header ul li.sfhover ul {display: block;}
#header ul li ul li {height: 22px;}
#header ul li ul li a, #header ul li.current ul li a {color: #3B2C25; background: none; font: bold 12px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; text-indent: 0px; width: 200px;}
#header ul li ul li a:hover, #header ul li.current ul li a:hover,
#header ul li ul li.current a, #header ul li.current ul li.current a {color: #CC252B;}
#header #pionir {position: absolute; top: 0px; right: 0px;}
#header #pionir img, #header #pionir object {display: block;}

/******************************************************************
 * Content
 ******************************************************************/
#content {margin-top: 30px; w\idth: 740px; padding: 0 10px 2px; background: #FFF url(images/em_bg_content.jpg) no-repeat 0% 100%;}
#content #breadcrumbs {position: absolute; right: 15px; top: -18px; font-size: 10px; text-align: right;}

#extras h4 {font-size: 11px; font-weight: bold;}
#extras dt {padding: 15px 10px 12px; background: #FFF url(images/em_separator_extras.jpg) no-repeat 0% 0%;}
#extras dd {padding: 0 10px 7px;}
#extras a.img-link {display: block; width: 140px; height: 18px; text-indent: -9999px; background: url(images/em_menu_forum.gif) no-repeat 0% 0%;}
#extras a.img-link:hover, #extras dt.current a.img-link {background-position: 0px -20px;}
#extras a#x-forum {background-image: url(images/em_menu_forum.gif);}
#extras a#x-video {background-image: url(images/em_menu_video.gif);}
#extras a#x-linkovi {background-image: url(images/em_menu_linkovi.gif);}
#extras a#x-koncerti {background-image: url(images/em_menu_koncerti.gif);}
#extras span#x-newsletter {display: block; width: 101px; height: 18px; text-indent: -9999px; background: url(images/em_menu_newsletter.gif) no-repeat 0% 0%;}
#extras dd ol li {padding-bottom: 7px;}
#extras dd ol li h4 {margin: 0; padding: 0;}
#extras dd ol li a {display: block; width: 120px;}
#newsletter-body {background: #FFF url(images/em_separator_extras.jpg) no-repeat 0% 100%;}
#newsletter-box input.input-box {width: 100px;}
#newsletter-box label strong {display: block; color: #F00;}

#main-content {padding-top: 2px; background: #FFF url(images/em_separator_maincontent.jpg) no-repeat 0% 0%;}
#main-content h2 {color: #333; font-size: 36px; line-height: 44px; font-weight: normal; margin-bottom: 12px; text-transform: uppercase;}
#main-content h3 {color: #CC252B; font: normal 18px/24px "Trebuchet MS", Arial, Helvetica, sans-serif; margin-bottom: 2px; margin-top: 12px;}
#main-content h4 {color: #666; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; line-height: 14px; font-weight: normal;}
#content-intro-wrapper {padding-bottom: 1px; background: #FFF url(images/em_separator_maincontent.jpg) no-repeat 0% 100%;}
#content-intro {height: 130px; he\ight: 85px; padding-top: 45px; line-height: 130px; padding-left: 300px; background: url(images/em_vignette_home.jpg) no-repeat 0% 100%;}
body#cat_diskografija #content-intro {background-image: url(images/em_vignette_diskografija.jpg);}
body#cat_biografija #content-intro {background-image: url(images/em_vignette_biografija.jpg);}
body#cat_press_clipping #content-intro {background-image: url(images/em_vignette_press.jpg);}
body#cat_booking #content-intro {background-image: url(images/em_vignette_booking.jpg);}
body#cat_linkovi #content-intro {background-image: url(images/em_vignette_linkovi.jpg);}
body#cat_koncerti #content-intro {background-image: url(images/em_vignette_koncerti.jpg);}
body#cat_fotke #content-intro, body#cat_sluzbene_fotke #content-intro, 
body#cat_privatne_fotke #content-intro, body#cat_koncerti_fotke #content-intro {background-image: url(images/em_vignette_fotke.jpg);}
#main-content div.static-text {padding: 12px;}
#main-content div.tile-box {padding: 0 12px 12px;}
#main-content a.more {clear: both; display: block; text-align: right;}


#content #page-end {position: absolute; width: 140px; height: 120px; left: 10px; bottom: 1px;}
#content #main-content div.content-box {float: left; width: 100%; padding-bottom: 10px; margin-bottom: 12px; background: url(images/cy_separator_maincontent.gif) no-repeat 50% 100%;}
#content #main-content div.lead-pic {position: relative; float: left; margin-top: 3px; margin-right: 4px; padding: 4px; border: 1px solid #B3D7EF; border-color: #F5F5F5 #CCC #CCC #F5F5F5;}
#content #main-content div.lead-pic a, #content #main-content div.lead-pic img {display: block; float: left;}
#content #main-content div.lead-pic div {font-size: 10px;}
#content #main-content span.date {font-weight: normal; color: #999;}
#content #main-content div.paging-info {text-align: center; font-weight: bold;}
#content #main-content div.paging-info a,       #content #main-content div.paging-info span {color: #CC252B; padding: 3px 6px; border: 1px solid #FFF;}
#content #main-content div.paging-info a:hover, #content #main-content div.paging-info span {color: #888; border-color: #888;}
#content #main-content div.songs {float: right; width: 440px;}
#content #main-content div.songs ol {padding-top: 4px; float: left; width: 440px;}
#content #main-content div.songs ol li {position: relative; float: left; width: 440px; w\idth: 432px; padding: 0 4px; line-height: 18px;}
#content #main-content div.songs ol li.alt {background-color: #E5E5E5;}
#content #main-content div.songs ol li a {position: absolute; display: block; width: 16px; height: 16px; top: 1px;}
#content #main-content div.songs ol li a.lyrics {right: 100px;}
#content #main-content div.songs ol li a.audio {right: 70px;}
#content #main-content div.songs ol li a.video {right: 40px;}
#content #main-content div.songs ol li a.video2 {right: 10px;}
#content #main-content div.cover {width: 115px; w\idth: 105px; text-align: center;}
#content #main-content div.cover span {display: block; float: left; width: 100%; padding-top: 4px; font: bold 13px/20px Arial, Helvetica, sans-serif; text-transform: uppercase; }
#content #main-content div#lyrics {display: none; background-color: #FFF; border: 1px solid #CCC; padding: 4px; height: 150px; overflow: auto;}

/* Gallery specific */
#content ul#thumbnails {padding: 0; margin: 0; padding-top: 20px;}
#content ul#thumbnails li {height: 156px; overflow: hidden;}
#content ul#thumbnails li a {display: block; width: 122px; w\idth: 102px; height: 146px; he\ight: 136px; float: left; text-align: center; margin-right: 10px; padding: 10px 10px 0; background: url(images/em_bg_thumbnail.gif) no-repeat 0% 0%;}
#content ul#thumbnails li a.last {margin-right: 0;}
#content ul#thumbnails li a span.pic_image {position: relative; display: block; width: 102px; w\idth: 100px; height: 102px; he\ight: 100px; border: 1px solid #CCC; padding: 1px; cursor: pointer; overflow: hidden;}
#content ul#thumbnails li a:hover span.pic_image {border-color: #CC252B;}
#content ul#thumbnails li a span.pic_image img {position: relative; margin: 0 auto; border: none;}
#content ul#thumbnails li a span.pic_title {display: block; height: 32px; margin: 0; padding: 0; overflow: hidden; font: bold 11px/28px "Trebuchet MS", Arial, Helvetica, sans-serif; cursor: pointer;}

/* ------------------------------------------------------------------------ */
/* Booking form specific */
/*#content #frmBooking {padding: 7px 0;}*/
#content #frmBooking div {padding: 7px 0;}
#content #frmBooking ol li  {margin-left: 25px; padding: 7px 0; list-style: decimal;}
#content #frmBooking ol label {padding: 4px 0;}
#content #frmBooking {font-weight: bold;}
#content #frmBooking .input-box {width: 200px; background-color: #F5F5F5;}
#content #frmBooking label {display: block;}
#content #frmBooking h2 {font-size: 12px; font-weight: bold;}
#content #frmBooking h4 {color: #CCC; font-size: 11px; font-weight: normal;}

#content .frm-buttons {clear: both; text-align: left;}
#content .frm-buttons input {background-color: #E2E7F1; border: 1px solid #999; font-size: 11px; font-weight: bold; padding: 2px 10px; margin-right: 7px;}
#content .frm-error-message {display: block; color: #F00;}
#content .err-message {display: block; color: #F00; font-weight: normal;}
/* ------------------------------------------------------------------------ */

div.confirmation, div.notice {padding: 12px 7px; color: #F00; background-color: #F5F5F5; border: 1px solid #CCC; font-weight: bold;}

div#poll ul.control li {padding-bottom: 4px;}
img#spinner {display: block; position: absolute; top: 0px; right: 10px;}

/******************************************************************
 * Extras
 ******************************************************************/
#extras h3 {color: #666; font-size: 16px; line-height: 18px; font-weight: normal; margin-bottom: 7px;}


/******************************************************************
 * Footer
 ******************************************************************/
#footer {padding-top: 12px;}
#footer a#metastudio {position: absolute; display: block; width: 33px; height: 26px; right: 10px; top: 12px; text-indent: -9999px; background: #FFF url(images/metastudio_.gif) no-repeat 0% -26px;}
#footer a#metastudio:hover {background-position: 0% 0%;}

/******************************************************************
 * Slimbox
 ******************************************************************/
#lbOverlay {position: absolute; left: 0; width: 100%; background-color: #000; cursor: pointer; z-index: 90;}
#lbCenter, #lbBottomContainer {position: absolute; left: 50%; overflow: hidden; background-color: #fff; z-index: 91;}
.lbLoading {background: #fff url(images/loading.gif) no-repeat center;}
#lbImage {border: 10px solid #fff;}
#lbPrevLink, #lbNextLink {display: block; position: absolute; top: 0; width: 50%; outline: none; z-index: 92;}
#lbPrevLink {left: 0;}
#lbPrevLink:hover {background: transparent url(images/prevlabel.gif) no-repeat 0% 15%;}
#lbNextLink {right: 0;}
#lbNextLink:hover {background: transparent url(images/nextlabel.gif) no-repeat 100% 15%;}
#lbBottom {font-family: Verdana, Helvetica, sans-serif; font-size: 10px; color: #666; line-height: 1.4em; text-align: left; border: 10px solid #fff; border-top-style: none;}
#lbCloseLink {display: block; float: right; width: 66px; height: 22px; background: transparent url(images/closelabel.gif) no-repeat center; margin: 5px 0;}
#lbCaption, #lbNumber {margin-right: 71px;}
#lbCaption {font-weight: bold;}
#lbCaption #lbDesc {font-weight: normal; color: #777;}