/* =====================================================================================================
*    title: Charlie Straight v1                                                                        *
*     site: www.charliestraight.com                                                                    *
*    media: all                                                                                        *
*   design: Jiří Toman, Toman Graphic Design [info@toman-design.com]                                   *
*     code: Miroslav Jahoda, Polygrafix [mirek@polygrafix.cz]                                          *
*     date: 05/2009                                                                                    *
===================================================================================================== */

/* Reset a základní nastavení
----------------------------------------------------------------------------------------------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, a, em, strong, abbr, acronym, address, ol, ul, li, dl, dt, dd, form, fieldset, legend, label, blockquote, hr {margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; vertical-align: baseline;}
html, body {width: 100%; height: 100%;}
body {font: 70%/1.2em verdana, tahoma, sans-serif; color: rgb(0,0,0); background: rgb(254,240,0);}
#bg {position: absolute; width: 1280px; height: 1024px; overflow: hidden; z-index: 5;}
#wrapper {position: absolute; width: 1280px; height: 1024px; z-index: 10;}
strong {font-weight: bold;}
em {font-style: italic;}
ul, ol {list-style: none;}
/*p, address {margin-bottom: 0.6em;}*/
.clear {display: block; visibility: hidden; clear: both; height: 1px; line-height: 1px;}
.i, hr {display: none;}
.last {margin-right: 0 !important;}

/* Vzorník a chyby
----------------------------------------------------------------------------------------------------- */
.error, .ok, .notice {clear: left; margin: 0 0 10px; padding: 10px; text-align: center; font-weight: bold; color: rgb(255,255,255); background-color: rgb(215,25,32);}
.ok {background-color: rgb(147,175,43) !important;}
.notice {background-color: rgb(32,25,215) !important;}
.error strong {padding: 2px 3px 3px; border: 1px dotted rgb(161,7,13);}
.error span.arrow {padding-right: 22px; background: url('../images/arrow.gif') right 50% no-repeat;}
.cyan {color: rgb(0,160,233);}
.yellow {color: rgb(254,240,0);}
.magenta {color: rgb(218,0,133);}

/* Odkazy 
----------------------------------------------------------------------------------------------------- */
a:link {color: rgb(0,160,233); text-decoration: none;}
a:visited {color: rgb(0,0,0); text-decoration: underline;}
a:hover {color: rgb(0,160,233); text-decoration: underline;}
a.external {color: rgb(0,160,233); /*padding-right: 22px; background: url('../images/external.gif') top right no-repeat;*/}

#nav a, #footer a, #social a {color: rgb(255,255,255);}

.title a:link, .title a:hover, .title a:visited {font-weight: bold; color: rgb(0,160,233); text-decoration: none;}
.title a:hover {text-decoration: underline;}

/* Layout 
----------------------------------------------------------------------------------------------------- */
#header {position: absolute; top: 0; left: 0; z-index: 20;}
  #header a {position: absolute; top: 0; left: 0; display: block; width: 245px; height: 235px;}

#main {margin-left: 282px; width: 677px;}
  #nav {position: absolute; width: 340px; top: 20px; z-index: 30;}
  #page {position: absolute; margin: 213px 0 0 2px; z-index: 40;}
  
#footer {position: absolute; bottom: 6px; left: 285px; color: rgb(255,255,255);}
/*#footer {clear: left; margin-left: 285px; padding: 10px 0; color: rgb(255,255,255);}*/
  #footer .design {font-weight: normal;}
  #footer p {margin: 0;}

#langs {position: absolute; top: 14px; right: 143px; width: 25px; height: 15px; font-size: 110%; color: rgb(255,255,255);}
  #langs li {margin-bottom: 5px;}
    #langs a {display: block; height: 15px; font-weight: bold; color: rgb(255,255,255);}

#social {position: absolute; top: 0; right: 0; width: 136px; font-size: 110%; color: rgb(255,255,255);}
  #social ul {width: 112px; margin-bottom: 7px; padding: 12px; background: url('../images/bg_social.gif') top left repeat;}
    #social li {margin-bottom: 2px;}
    #bandzone {height: 23px;}
    #facebook {height: 27px;}
    #myspace {height: 34px;}
    #youtube {height: 30px;}
    #itunes {height: 30px;}
    #amazon {height: 27px;}
      #social li a {display: block;}
  #social h4 {padding-right: 12px; text-align: right; line-height: 1.5em;}
  #social a {font-weight: bold;}
  
#twitter {position: absolute; top: 0; left: 510px; z-index: 30; width: 420px; padding: 1px 45px 4px; font-size: 90%; color: rgb(0,160,233); background: url('../images/bg_twitter.gif') top left no-repeat;}
  #twitter strong a:link, #twitter strong a:hover, #twitter strong a:visited {color: rgb(0,160,233); font-weight: bold; text-decoration: none;}
  #twitter strong a:hover {text-decoration: underline;}
#jollypop {position: absolute; top: 83px; left: 837px;}

/* Hlavička a nadpisy 
----------------------------------------------------------------------------------------------------- */
h4 {font-weight: bold;}
  h4 a {font-weight: bold;}
  .nextGig h4 a, .gigs h4 a, .newsArchive h4 a {font-weight: normal; text-decoration: underline;}
  .nextGig h4 a:hover, .gigs h4 a:hover, .newsArchive h4 a:hover {text-decoration: none;}
  .list h4 a:link, .list h4 a:hover, .list h4 a:visited {}
  .list h4 a:visited {text-decoration: none; color: rgb(0,117,180);}
  .list h4 a:hover {text-decoration: underline;}

/* Navigace 
----------------------------------------------------------------------------------------------------- */
#nav li {width: 340px; height: 22px;}
  #nav li a {display: block; width: 340px; height: 22px; font-weight: bold;}
    /*#nav li a span {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 22px;}
    #nav a.gigs span {background: url('../images/li_gigs.png') top left no-repeat;}*/
    #nav li a span {display: none;}
  #nav a.gigs {background: url('../images/li_gigs.png') top left no-repeat;}
  #nav a.listen {background: url('../images/li_listen.png') top left no-repeat;}
  #nav a.video {background: url('../images/li_video.png') top left no-repeat;}
  #nav a.shop {background: url('../images/li_shop.png') top left no-repeat;}
  #nav a.pictures {background: url('../images/li_pictures.png') top left no-repeat;}
  #nav a.press {background: url('../images/li_press.png') top left no-repeat;}
  #nav a.guestbook {background: url('../images/li_guestbook.png') top left no-repeat;}
  #nav a.contact {float: left; width: 85px; background: url('../images/li_contact.png') top left no-repeat;}
  #nav a.partners {float: left; width: 255px; background: url('../images/li_partners.png') top left no-repeat;}
  #nav a:hover, #nav .active a, #nav a.contact.active, #nav a.partners.active {background-position: bottom left;}
  #nav a:focus, #nav a:active {outline: none; border: none;}

/* Stránka 
----------------------------------------------------------------------------------------------------- */
.main {float: left; position: relative; margin-right: 5px; width: 313px; min-height: 351px; max-height: 690px; overflow: auto; padding: 11px; background: rgb(255,255,255);}
.mainImg {width: 321px; min-height: 359px; padding: 7px; text-align: center;}
.showVideo {width: 653px; padding: 11px;}
.showListen {width: 350px; padding: 0;}
.showShop {width: 392px; padding: 11px;}
.showPictures {width: 653px; padding: 11px;}
.showPress {width: 653px; padding: 11px;}
.showGuestbook {width: 662px; padding: 7px;}
.showContact {width: 436px; min-height: 315px; max-height: 654px; border-bottom: 36px solid rgb(255,255,255); color: rgb(0,160,233);}

.side {float: left; width: 335px; color: rgb(0,0,0);}
  .side .news, .side .nextGig {height: 103px; margin-bottom: 5px; padding: 11px 11px 7px; background: rgb(255,255,255);}
  .side .nextGig {height: 110px;}
  .side .gigs, .side .newsArchive {padding: 11px 11px 7px; background: rgb(255,255,255);}
  .side .newsArchive {height: 585px;}
    .side .text {height: 54px; overflow: hidden;}
      .side h4 {}
      .side p {margin-bottom: 0;}
    .side .more {height: 13px; margin: 0 -2px 0 0; text-align: right;}
      .side .more a {padding-right: 21px; color: rgb(0,160,233); background: url('../images/arrow.gif') right 3px no-repeat;}
        .side .more a:hover {text-decoration: none;}
  .side li {position: relative; height: 25px; margin-bottom: 5px; line-height: 25px; color: rgb(0,160,233);}
    /*.side li span.more {display: block; float: right; width: auto; height: 25px; margin-top: -25px; line-height: 25px; background: url('../images/bg_yellow.gif') top left repeat; border-left: 1px solid rgb(0,160,233);}*/
    .side li span.more {display: block; position: absolute; top: 0; right: 0; width: auto; height: 25px; line-height: 25px; background: url('../images/bg_yellow.gif') top left repeat; border-left: 1px solid rgb(0,160,233);}
      .side li span.more a {display: block; margin-right: 5px; padding: 0 21px 0 9px; font-weight: normal; background: url('../images/arrow_cyan.gif') right 8px no-repeat;}

.title {height: 19px; margin: -11px -11px 7px; padding: 11px; line-height: 19px; background: url('../images/bg_lightcyan.gif') top left repeat;}
.nextGig .title, .gigs .title, .showAll {background: url('../images/bg_yellow.gif') top left repeat;}
.showAll {margin-top: 11px;}
.showNews .title {background: url('../images/bg_cyan.gif') top left repeat;}
  .title h2 {display: inline; font-weight: bold; color: rgb(0,160,233);}
  .showAll h2 {color: rgb(218,0,133);}
  .title span, .title strong {color: rgb(0,160,233);}
  .title em {font-weight: bold;}

.list {padding: 8px 0;}
.list li {margin-bottom: 8px; padding: 0 0 8px; color: rgb(0,160,233); border-bottom: 1px solid rgb(0,160,233);}
.list li.last {margin: 0; border: none;}
  .list li h4 {margin-bottom: 7px;}
  .list li .more {display: inline; padding-right: 18px; color: rgb(0,160,233); background: url('../images/arrow.gif') right 3px no-repeat;}
    .list li .more a {padding: 2px 4px; background: rgb(254,240,0);}
    .list li .more a:visited {color: rgb(0,160,233);}
    .list li .more a:hover {text-decoration: none; color: rgb(255,255,255); background: rgb(0,160,233);}

.expand {height: 14px; line-height: 14px; text-align: right;}
  .expand a {padding-right: 14px; color: rgb(218,0,133); background: url('../images/arrow_down.gif') top right no-repeat;}

#expand {/*position: absolute; bottom: 11px; right: 11px;*/ padding-top: 10px;}
#expand_contacts {position: absolute; bottom: 0; left: 0; width: 436px; padding: 0 11px; background: rgb(255,255,255);}
  #expand_contacts a {padding: 1px;}
  #expand h3 {text-align: right;}
  #expand h3.more {text-align: left;}
    #expand h3 a {padding-right: 14px; color: rgb(218,0,133);}
    #expand h3.more a {padding-right: 21px; color: rgb(0,160,233); background: url('../images/arrow.gif') right 3px no-repeat;}
    #expand h3.down a {background: url('../images/arrow_down.gif') top right no-repeat;}
    #expand h3.up a {background: url('../images/arrow_up.gif') top right no-repeat;}
  .bookmarks {/*width: 307px;*/ margin-top: 7px; padding: 4px 0 8px; font-size: 90%; border-top: 1px solid rgb(0,160,233);}
    .bookmarks h3 {display: inline; color: rgb(0,160,233);}
    .bookmarks ul, .bookmarks li {display: inline; line-height: 16px;}
    .bookmarks li {padding-left: 0;}
      .bookmarks a {padding: 1px 0 1px 19px; line-height: 16px; color: rgb(31,82,123);}
      .bookmarks a:hover {color: rgb(218,0,133);}
      .facebook a {background: url('../images/bookmarks.gif') 0 0 no-repeat;}
      .reddit a {background: url('../images/bookmarks.gif') 0 -32px no-repeat;}
      .digg a {background: url('../images/bookmarks.gif') 0 -64px no-repeat;}
      .delicious a {background: url('../images/bookmarks.gif') 0 -96px no-repeat;}
      .googlecal a {background: url('../images/bookmarks.gif') 0 -128px no-repeat;}
      .ical a {background: url('../images/bookmarks.gif') 0 -160px no-repeat;}

h5.pagination {padding-bottom: 7px; line-height: 1.6em; text-align: right;}
  h5.pagination a {padding: 1px;}
  h5.pagination .selected {padding: 1px 4px; color: rgb(0,160,233); border: 1px solid rgb(218,0,133);}
  h5.pagination a.writeMessage {padding: 2px 4px; letter-spacing: 2px; background: rgb(254,240,0);}
    h5.pagination a.writeMessage:visited {color: rgb(0,160,233);}
    h5.pagination a.writeMessage:hover {text-decoration: none; color: rgb(255,255,255); background: rgb(0,160,233);}

#mainImg {width: 321px;}
.showNews img {padding-bottom: 0.6em;}

#gigsFlash {height: 370px; margin: -11px -11px 0; padding: 0;}

.showListen h4 {margin: 5px 0; text-align: center;}
  .showListen h4 a {color: rgb(0,160,233);}
    #listen:focus, #listen:active {outline: 0; border: 0;}
    #listen {font-weight: bold; text-align: center;}
.showListen ul {padding: 11px;}
  .showListen li {margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid rgb(230,230,230);}
    .showListen li h4 {display: inline; margin: 0; text-align: left;}
    .showListen li a {float: right; color: rgb(218,0,133);}

.side .lyrics {width: 220px; height: 333px; overflow: auto; padding: 11px 11px 7px; background: rgb(255,255,255);}
  .side .lyrics h2 {height: 18px; margin-bottom: 6px; line-height: 18px; font-weight: bold; color: rgb(218,0,133);}
  .side .lyrics li {height: 18px; line-height: 18px;}

a.pressImg {display: block;}
  img.pressImg {display: block; border: 1px solid rgb(0,160,233);}

.shopIntro {margin-bottom: 11px;}
  .shopIntro p {margin-bottom: 0.6em;}
.shopItem {position: relative; min-height: 120px; padding-bottom: 11px; color: rgb(0,160,233);}
.shopItemImage {width: 221px; margin-right: 10px;}
  .shopItemImage img {display: block;}
.shopItemDetails {position: absolute; bottom: 11px; left: 234px;}
  .shopItemDetails h3, .shopItemDetails h4 {margin-top: 0.6em; font-weight: bold; color: rgb(218,0,133);}
  .shopItemDetails h5 {margin-top: 1.2em;}
  .shopItemDetails p {margin: 0;}
  .shopItem .more span {margin: -2px 0 0 -2px; padding-right: 18px; color: rgb(0,160,233); background: url('../images/arrow.gif') right 2px no-repeat;}
    .shopItem .more a {padding: 2px 4px; background: rgb(254,240,0);}
    .shopItem .more a:visited {text-decoration: none; color: rgb(0,160,233);}
    .shopItem .more a:hover {text-decoration: none; color: rgb(255,255,255); background: rgb(0,160,233);}

.shopForm {position: absolute; top: 0; left: 420px; width: 448px; max-height: 690px; overflow: auto; padding: 7px 7px 15px; color: rgb(0,160,233); background: rgb(255,255,255);}
  /*.shopForm .img {float: right;}
    .shopForm .img img {width: 157px;}
  .shopForm .short {width: 285px;}
  .shopForm .long {clear: both;}*/
    .shopForm form h2 {width: 433px; padding: 7px 0 10px; font-size: 18px; text-align: right;}
    .shopForm ol {width: 422px; margin: 11px 0 11px 11px; font-size: 10px; line-height: 18px;}
      .shopForm li {position: relative; padding: 8px 11px; margin-bottom: 1px; list-style: none; color: rgb(0,160,233); background: rgb(242,241,243); border: 1px solid rgb(201,201,201); border-width: 0 0 1px 1px;}
        .shopForm li strong {font-size: 12px; font-weight: bold; color: rgb(218,0,133);}
          .shopForm li strong span {position: static; font-weight: bold; color: rgb(0,160,233);}
        .shopForm li em {font-style: normal; font-weight: bold; color: rgb(0,160,233);}
        .shopForm li p {margin: 0 0 0 30px;}
        .shopForm li span {position: absolute; top: 30%; right: 11px; color: rgb(201,201,201);}
          .shopForm li span a {display: block; padding: 0 6px; font-weight: bold; text-decoration: none; color: rgb(201,201,201); background: rgb(247,247,248); border: 1px solid rgb(201,201,201);}
          .shopForm li span a:hover {color: rgb(255,255,255); background: rgb(218,0,133); border: 1px solid rgb(255,255,255);}
        .shopForm li .num {width: 20px; margin-right: 10px; text-align: center;}
    .shopForm dt, .shopForm dd {height: 23px; margin-bottom: 2px; line-height: 23px;}
    .shopForm dt {float: left; clear: left; width: 120px; padding-right: 5px; text-align: right; color: rgb(218,0,133);}
    .shopForm dd, .shopForm textarea {width: 300px; margin-left: 125px; padding: 0 4px; background: rgb(247,247,248); border: 1px solid rgb(201,201,201); border-width: 0 0 1px 1px;}
    .shopForm textarea {padding: 4px 0 4px 4px;}
      .shopForm input, .shopForm select, .shopForm textarea {font: 100% verdana, tahoma, sans-serif; color: rgb(0,160,233);}
      .shopForm dd .input {width: 300px; height: 16px; padding: 2px 0; background: rgb(247,247,248); border: none;}
    .shopForm h4 {margin-left: 125px; padding: 10px 0 5px; color: rgb(0,160,233);}
    .shopForm select {margin-left: 125px; color: rgb(218,0,133);}
    .shopForm h3 {width: 415px; height: 17px; margin-top: 15px; padding-right: 21px; font-weight: normal; line-height: 17px; text-align: right; background: url('../images/arrow_bg.gif') right 1px no-repeat;}
      .shopForm h3 img {position: relative; top: 2px; margin-right: 3px;}
      .shopForm h3 .submit {padding: 2px 4px; background: rgb(254,240,0); border: none;}
      .shopForm h3 .submit:hover {color: rgb(255,255,255); background: rgb(0,160,233); cursor: pointer;}
    .shopForm .footer {margin: 20px 0 0; padding: 11px;}

.showGuestbook h3 {margin-bottom: 10px; font-weight: bold; text-align: right;}
  .showGuestbook h3 a {padding-right: 18px; color: rgb(0,160,233); background: url('../images/arrow.gif') right 3px no-repeat;}
.showGuestbook .message {margin-bottom: 8px; padding: 13px 13px 2px; border: 1px solid rgb(0,160,233);}
  .showGuestbook .title {height: 14px; line-height: 14px; background: url('../images/bg_lightcyan.gif') top left repeat;}
    .showGuestbook .title a {font-weight: bold;}
    .showGuestbook .title span {padding-left: 10px; font-weight: bold;}
    .showGuestbook .reply {height: 13px; margin: 5px -2px 5px 0; text-align: right;}
      .showGuestbook .reply a {padding-right: 18px; color: rgb(218,0,133); background: url('../images/arrow.gif') right 3px no-repeat;}
  .showGuestbook .message .message {margin: 7px -11px 0; border-color: rgb(254,240,0);}
    .showGuestbook .message .message .title {background: url('../images/bg_yellow.gif') top left repeat;}

#post {position: absolute; top: 0; left: 680px; clear: left; width: 254px; height: 224px; padding: 13px 18px; color: rgb(0,160,233); background-color: rgb(226,242,253);}
  #post input, #post textarea {font: 100%/1.2em verdana, tahoma, sans-serif; color: rgb(0,160,233); background-color: rgb(226,242,253); border: 1px solid rgb(0,160,233);}
  #post label, #post .input {margin-bottom: 3px;}
  #post label {margin-right: -5px;}
  #post .input {width: 200px; margin-left: 5px; font-weight: bold; border-width: 0 0 1px 0;}
  #post #question {width: 40px;}
  #post textarea {width: 240px; height: 118px; margin: 12px 0 5px; padding: 5px 6px;}
  #post .submit {width: 54px; padding: 0 24px 0 0; background: url('../images/arrow.gif') 35px 3px no-repeat;}
  #post .submit:hover {cursor: pointer; background: url('../images/arrow_cyan.gif') 35px 3px no-repeat rgb(255,255,255);}
  #post .close {position: absolute; top: 12px; right: 17px; color: rgb(0,160,233);}
  #post .close:hover {text-decoration: none; color: rgb(218,0,133);}

.galleryInfo {padding-bottom: 1.2em; color: rgb(218,0,133);}
  .galleryInfo h2 {padding-bottom: 0.6em; font-weight: bold;}

.showPictures ul {}
  .showPictures li {width: 133px; height: 198px; float: left; margin: 0 32px 12px 0;}
  .showPictures li.posledni {margin-right: 0;}
    .showPictures li div {position: relative; height: 184px; text-align: center; background: url('../images/bg_pictures.gif') 0 0 repeat;}
     .showPictures li div div {position: absolute; left: 0; bottom: 7px; width: 133px; height: auto; background: none;}
      .showPictures li h3 {padding: 0 7px 7px; font-weight: bold; color: rgb(218,0,133);}
        .showPictures li h3 a {font-weight: bold; color: rgb(218,0,133);}
    .showPictures li h5 {height: 14px; line-height: 14px; text-align: right;}
      .showPictures li h5 a {padding-right: 18px; color: rgb(218,0,133); background: url('../images/arrow.gif') right 3px no-repeat;}

.back {clear: both; padding: 0 8px 12px 0; text-align: right;}
  .back span {padding-left: 18px; color: rgb(0,160,233); background: url('../images/arrow_back.gif') left 3px no-repeat;}
    .back a {padding: 2px 4px; background: rgb(254,240,0);}
    .back a:visited {color: rgb(0,160,233);}
    .back a:hover {text-decoration: none; color: rgb(255,255,255); background: rgb(0,160,233);}

/* IE6
----------------------------------------------------------------------------------------------------- */
* html #header {left: 0;}
* html #nav li {margin: 0 0 -2px 0;}
  * html #nav li a:hover {background-position: left -43px;}
/** html .side li span.more {margin-top: -25px;}*/
* html .shopItem .more a {display: inline-block;}  
* html .shopForm li span {top: 8px;}
* html .shopForm dd {margin: 0 !important; padding: 0 !important;}
* html #page {width: 690px;}

/* IE7 
----------------------------------------------------------------------------------------------------- */
*:first-child+html #nav li {margin: 0 0 -2px 0;}