/* =====================================================================================================
*    title: Strcprstskrzkrk v1                                                                         *
*     site: www.strcprstskrzkrk.cz                                                                     *
*    media: all                                                                                        *
*   design: Ondřej Šorm, strcprstskrzkrk.cz [ondras.sorm@email.cz]                                     *
*     code: Miroslav Jahoda, Polygrafix [mirek@polygrafix.cz]                                          *
*     date: 08/2009                                                                                    *
===================================================================================================== */

/* Reset and basic configuration
----------------------------------------------------------------------------------------------------- */
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: 75%/1.3em arial, helvetica, tahoma, verdana, sans-serif; color: rgb(0,0,0); background: rgb(244,244,244);}
#wrapper {}
strong {font-weight: bold;}
em {font-style: italic;}
ul, ol {list-style: none;}
.clear {display: block; visibility: hidden; clear: both; height: 1px; line-height: 1px;}
.i, hr {display: none;}
.last {margin-right: 0 !important;}

/* Swatches
----------------------------------------------------------------------------------------------------- */
/*.error, .ok, .notice {width: 300px; margin: 50px auto 10px; padding: 10px; text-align: center; font-weight: bold; color: rgb(255,255,255); background-color: rgb(255,76,26);}
.ok {background-color: rgb(147,175,43) !important;}
.notice {background-color: rgb(32,25,215) !important;}*/
.error, .ok, .notice {width: 510px; margin-left: 158px; font-size: 90px; line-height: 1.33em;}

.yellow, li.yellow a {color: rgb(255,255,60) !important;}
.orange, li.orange a {color: rgb(242,204,48) !important;}
.red, li.red a {color: rgb(219,0,0) !important;}
.fuchsia, li.fuchsia a {color: rgb(219,0,142) !important;}
.violet, li.violet a {color: rgb(112,8,250) !important;}
.purple, li.purple a {color: rgb(192,0,250) !important;}
.magenta, li.magenta a {color: rgb(226,115,251) !important;}
.pinky, li.pinky a {color: rgb(235,173,252) !important;}
.silver, li.silver a {color: rgb(190,190,190) !important;}
.neutral, li.neutral a {color: rgb(127,127,127) !important;}
.black, li.black a {color: rgb(0,0,0) !important;}
.brown, li.brown a {color: rgb(99,42,6) !important;}
.beige, li.beige a {color: rgb(147,82,19) !important;}
.khaki, li.khaki a {color: rgb(90,82,19) !important;}
.green, li.green a {color: rgb(46,82,19) !important;}
.grass, li.grass a {color: rgb(91,161,38) !important;}
.mentol, li.mentol a {color: rgb(135,240,132) !important;}
.acid, li.acid a {color: rgb(144,255,200) !important;}
.cyan, li.cyan a {color: rgb(144,255,255) !important;}
.ice, li.ice a {color: rgb(105,186,253) !important;}
.blue, li.blue a {color: rgb(0,0,250) !important;}
.royalblue, li.royalblue a {color: rgb(0,0,150) !important;}

.bg-yellow {background-color: rgb(255,255,60) !important;}
.bg-orange {background-color: rgb(242,204,48) !important;}
.bg-red {background-color: rgb(219,0,0) !important;}
.bg-fuchsia {background-color: rgb(219,0,142) !important;}
.bg-violet {background-color: rgb(112,8,250) !important;}
.bg-purple {background-color: rgb(192,0,250) !important;}
.bg-magenta {background-color: rgb(226,115,251) !important;}
.bg-pinky {background-color: rgb(235,173,252) !important;}
.bg-silver {background-color: rgb(190,190,190) !important;}
.bg-neutral {background-color: rgb(127,127,127) !important;}
.bg-black {background-color: rgb(0,0,0) !important;}
.bg-brown {background-color: rgb(99,42,6) !important;}
.bg-beige {background-color: rgb(147,82,19) !important;}
.bg-khaki {background-color: rgb(90,82,19) !important;}
.bg-green {background-color: rgb(46,82,19) !important;}
.bg-grass {background-color: rgb(91,161,38) !important;}
.bg-mentol {background-color: rgb(135,240,132) !important;}
.bg-acid {background-color: rgb(144,255,200) !important;}
.bg-cyan {background-color: rgb(144,255,255) !important;}
.bg-ice {background-color: rgb(105,186,253) !important;}
.bg-blue {background-color: rgb(0,0,250) !important;}
.bg-royalblue {background-color: rgb(0,0,150) !important;}
        
.bd-yellow, #gallery li.yellow, #item div.yellow {border: 1px solid rgb(255,255,60) !important;}
.bd-orange, #gallery li.orange, #item div.orange {border: 1px solid rgb(242,204,48) !important;}
.bd-red, #gallery li.red, #item div.red {border: 1px solid rgb(219,0,0) !important;}
.bd-fuchsia, #gallery li.fuchsia, #item div.fuchsia {border: 1px solid rgb(219,0,142) !important;}
.bd-violet, #gallery li.violet, #item div.violet {border: 1px solid rgb(112,8,250) !important;}
.bd-purple, #gallery li.purple, #item div.purple {border: 1px solid rgb(192,0,250) !important;}
.bd-magenta, #gallery li.magenta, #item div.magenta {border: 1px solid rgb(226,115,251) !important;}
.bd-pinky, #gallery li.pinky, #item div.pinky {border: 1px solid rgb(235,173,252) !important;}
.bd-silver, #gallery li.silver, #item div.silver {border: 1px solid rgb(190,190,190) !important;}
.bd-neutral, #gallery li.neutral, #item div.neutral {border: 1px solid rgb(127,127,127) !important;}
.bd-black, #gallery li.black, #item div.black {border: 1px solid rgb(0,0,0) !important;}
.bd-brown, #gallery li.brown, #item div.brown {border: 1px solid rgb(99,42,6) !important;}
.bd-beige, #gallery li.beige, #item div.beige {border: 1px solid rgb(147,82,19) !important;}
.bd-khaki, #gallery li.khaki, #item div.khaki {border: 1px solid rgb(90,82,19) !important;}
.bd-green, #gallery li.green, #item div.green {border: 1px solid rgb(46,82,19) !important;}
.bd-grass, #gallery li.grass, #item div.grass {border: 1px solid rgb(91,161,38) !important;}
.bd-mentol, #gallery li.mentol, #item div.mentol {border: 1px solid rgb(135,240,132) !important;}
.bd-acid, #gallery li.acid, #item div.acid {border: 1px solid rgb(144,255,200) !important;}
.bd-cyan, #gallery li.cyan, #item div.cyan {border: 1px solid rgb(144,255,255) !important;}
.bd-ice, #gallery li.ice, #item div.ice {border: 1px solid rgb(105,186,253) !important;}
.bd-blue, #gallery li.blue, #item div.blue {border: 1px solid rgb(0,0,250) !important;}
.bd-royalblue, #gallery li.royalblue, #item div.royalblue {border: 1px solid rgb(0,0,150) !important;}
        
/* Links 
----------------------------------------------------------------------------------------------------- */
a:link {color: rgb(0,0,0); text-decoration: none;}
a:visited {color: rgb(0,0,0); text-decoration: none;}
a:hover {color: rgb(0,0,0); background-color: rgb(183,255,201); text-decoration: none;}
a:focus, a:active, a img, a object {border: 0; outline: 0;}

/* Layout 
----------------------------------------------------------------------------------------------------- */
#bg {position: absolute; z-index: 2; width: 100%; height: 100%;}
#bump {float: left; width: 100%; height: 50%; text-align: center;}
#intro {clear: both; position: relative; margin: 0 auto;}
#wrapper {position: absolute; z-index: 3; width: 100%; height: 100%;}
  
#loading {position: absolute; top: 6px; left: 158px; text-decoration: blink; color: rgb(0,0,0);}
#nav {float: left; width: 140px; margin: 13px 8px 0 0; padding-left: 10px; line-height: 1.4em;}
#gallery {margin: 22px 13px 9px;}
#item {margin: 22px 13px 9px 158px;}
#content {margin: 22px 13px 9px 158px;}

/* Header and titles
----------------------------------------------------------------------------------------------------- */
h1 {position: relative; margin: 5px 0 10px -10px; font-size: 140%; color: rgb(0,0,0);}
  h1 .edit {position: absolute; top: 5px; left: 100px; display: block; width: 48px; height: 47px;}
    h1 a.edit img {width: 48px; height: 47px;}
    h1 a:hover {background: none;}
  h1 #options {top: -5px; left: 10px;}

/* Navigation
----------------------------------------------------------------------------------------------------- */
#nav li {position: relative; padding-left: 5px; color: rgb(0,0,0);}
  #nav a, #nav a:visited, #nav a:hover {text-decoration: none; color: rgb(0,0,0);}

#nav li.edit {position: absolute; top: 0; left: 38px; display: block; width: 24px; height: 23px;}
  #nav li.edit a img {display: none; width: 24px; height: 23px;}
  #nav li.edit a:hover {background: none;}
  #nav li.edit a:hover img {display: block;}

#nav p {padding: 3px 0 0 5px; color: rgb(152,152,152);}
#nav li form {margin-left: -5px;}
  #nav li select {font: 100%/1.3em arial, tahoma, verdana, sans-serif; color: rgb(0,0,0);}

/* Page
----------------------------------------------------------------------------------------------------- */
#searchform {position: absolute; top: 14px; left: 677px; z-index: 60;}
  #searchform input.input {position: relative; top: -6px; padding: 2px 5px; font: 100%/1.3em arial, tahoma, verdana, sans-serif; color: rgb(0,0,250); border: 2px inset rgb(152,152,152);}

#archive li {display: block;}
  #archive strong {background: rgb(144,255,255);}

#gallery li {float: left; position: relative; margin-right: 6px; overflow: hidden;}
#gallery .insert {height: 172px;}
  .portraitSmall {width: 60px; height: 80px; margin-bottom: 90px; overflow: hidden;}
  .portraitMedium {width: 90px; height: 120px; margin-bottom: 50px; overflow: hidden;}
  .portraitLarge {width: 120px; height: 160px; margin-bottom: 10px; overflow: hidden;}
  .landscapeSmall {width: 80px; height: 60px; margin-bottom: 110px; overflow: hidden;}
  .landscapeMedium {width: 120px; height: 90px; margin-bottom: 80px; overflow: hidden;}
  .landscapeLarge {width: 160px; height: 120px; margin-bottom: 50px; overflow: hidden;}
  
    #gallery a {display: block; height: 100%; overflow: hidden; background-color: rgb(255,255,255);}
    #gallery span.title, #item span.title {display: block; overflow: hidden; line-height: 1em; word-wrap: break-word;}
    .portraitSmall span.title {width: 50px;}
    .portraitMedium span.title {width: 80px;}
    .portraitLarge span.title {width: 110px;}
    .landscapeSmall span.title {width: 70px;}
    .landscapeMedium span.title {width: 110px;}
    .landscapeLarge span.title {width: 150px;}
      #gallery .title, #item .title {padding: 5px;}

  #gallery img.thumbnail {position: absolute; top: 0; left: 0;}
  #gallery a:hover img.thumbnail {display: none;}
  #gallery .edit {position: absolute; top: 0; left: 0; z-index: 20; display: block; width: 48px; height: 47px; background: none;}
    #gallery .edit img {display: none; width: 48px; height: 47px;}
    #gallery .edit:hover img {display: block;}
  #gallery .remove {position: absolute; top: 0; right: 0; z-index: 40; display: block; width: 37px; height: 37px; background: none;}
    #gallery .remove img {display: none; width: 29px; height: 29px; padding: 4px;}
    #gallery .remove:hover img {display: block; height: 29px;}
  #gallery .insert a {width: 20px; height: 18px; padding: 2px 5px 0; color: rgb(219,0,250); background: none; border: 1px solid rgb(219,0,250);}
  #gallery .insert a:hover {color: rgb(0,0,250); background: none; border: 1px solid rgb(0,0,250);}
    #gallery .insert span {width: 20px;}

#title {float: left; overflow: hidden; margin-right: 13px; word-wrap: break-word; background: rgb(255,255,255);}
#show-container {display: table;}
#show {display: table-row;}
  #show li {display: table-cell; vertical-align: top; padding-right: 13px;}
    #show div.movie {text-align: center; background: rgb(237,237,237);}
    #show div.text {white-space: nowrap; border: none !important;}
.mp3 {width: 320px; height: 20px;}

/* Content form
----------------------------------------------------------------------------------------------------- */
  #contentform input {font: 100%/1.3em arial, tahoma, verdana, sans-serif;}
  #contentform input[type="text"] {border: 2px inset rgb(198,198,198);}
  #contentform input.submit {font-size: 160%; color: rgb(0,0,250); background: none; border: 1px solid rgb(0,0,250); cursor: pointer;}
  #contentform textarea {width: 90%; height: 523px; overflow: auto; margin-bottom: 10px; font: 14px/1.25em arial, tahoma, verdana, sans-serif; color: rgb(69,36,250); background: rgb(255,255,255); border: none;}
  #contentform textarea:focus, #contentform textarea:active {outline: none; border: none;}

#paramsContainer {color: rgb(0,0,0);}
#color {float: left; margin: 1px 0 20px;}
#typesize {position: absolute; top: 250px; left: 20px;}
  #typesize h4 {margin-bottom: 12px; font-size: 140%;}
  #fontsize {height: 18px; margin-bottom: 8px;}
  #fontsizeInputContainer {width: 57px; height: 18px;}
    #paramsContainer li {position: relative; overflow: hidden; width: 25px; height: 19px; margin-bottom: 5px;}
    #fontsize li {width: 22px; height: 16px; float: left;}
      #paramsContainer li input {position: absolute; top: -100px; left: -100px; }
      #paramsContainer li label {display: block; position: absolute; top: 0px; left: 0px; cursor: pointer; width: 19px; height: 19px; overflow: hidden;}
      #fontsize li label {width: 14px; height: 14px; float: left; border: 1px solid rgb(0,0,0);}
        #paramsContainer li label span {display: none;}
      #fontsize label {background-image: url('../images/fontsize_chart.gif'); background-repeat: no-repeat;}
      #fontsize .fs-44 {background-position: -75px 0;}
      #fontsize .fs-36 {background-position: -60px 0;}
      #fontsize .fs-28 {background-position: -45px 0;}
      #fontsize .fs-18 {background-position: -30px 0;}
      #fontsize .fs-14 {background-position: -15px 0;}

#fontsizeInput {float: left; width: 25px; height: 16px; margin-top: -1px; padding: 0 2px; text-align: center;}
#fontsizeInputLabel {margin-left: 5px;}

/* IE6
----------------------------------------------------------------------------------------------------- */
* html #gallery .remove img, * html #gallery .edit img {display: block;}

/* IE7 
----------------------------------------------------------------------------------------------------- */
*:first-child+html .body-item {width: 11000px;}
  *:first-child+html #item {width: 10000px;}
    *:first-child+html #show-container {float: left;}
      *:first-child+html #show li {float: left;}