@charset "utf-8";
@import "player.css";

/**
 * Base Common Page Styles
 */
html, body {height:100%;}
body {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 11.5px;
    height:100%;
    background:#cbd8a0;
    color:#706f63;
    line-height:18px;
}
body.hide {display: none}

a {color:#666666; text-decoration:none;}
a:link, a:visited {text-decoration:none;}
a:hover, a:active{text-decoration:none;}

p {padding-bottom:24px}

h1, h2, h3, h4, h5, h6 {font-weight:normal; padding-bottom:16px}
h1 {font-size:20px;}
h2 {font-size:18px}
h3 {font-size:16px}
h4 {font-size:14px}
h5 {font-size:13px}
h6 {font-size:12px}

/**
 * Clearing Styles
 */
.clrfix {overflow:hidden;}
.clear {clear:both; font-size:0; height:0; line-height:0;}
.clear-left {clear:left;}
.clear-right {clear:right;}

/**
 * Container Layouts
 */
#wrapper {width: 100%; height: 100%}
#wrapper td {vertical-align: middle}
#wrapper-box {background: #FFF;padding: 20px 0;}
#wrapper-box:before {content: ""; background: url(../images/top-shadow.png); width: 100%; height: 7px; margin-top:-27px; position: absolute}
#wrapper-box:after {content: "";background: url(../images/bottom-shadow.png); width: 100%; height: 7px; margin-top:20px; position: absolute}

.l-780 #inner {width: 990px; height: 520px}
.l-1005 #inner {width: 1215px; height: 670px}
.l-1230  #inner {width: 1440px; height: 820px}


#content {
    padding: 20px 20px 20px 0;
    background: #FFF;
}
.l-780 #content {width: 950px; height: 480px}
.l-1005 #content {width: 1175px; height: 630px}
.l-1230  #content {width: 1400px; height: 780px}

#footer {height: 20px; text-align: center; color: #96958D; margin-top: 30px; font-size: 10px; position: relative}
.l-780 #footer {width: 990px;}
.l-1005 #footer {width: 1215px;}
.l-1230 #footer  {width: 1440px;}
#footer a {font-size: 10px; color: #96958D; text-decoration: none}

#side-left {width: 170px; float: left;}
.l-780 #side-left {height: 480px}
.l-1005 #side-left {height: 630px}
.l-1230 #side-left  {height: 780px}
#side-right {float: right;}
#background {overflow: hidden; position: relative;  }
#background > img {position: absolute; top: 0; left: 0;}
.l-780 #side-right, .l-780 #background {width: 780px; height: 480px}
.l-1005 #side-right, .l-1005 #background {width: 1005px; height: 630px; }
.l-1230 #side-right, .l-1230 #background  {width: 1230px; height: 780px;}
#logo {height: 150px; overflow: hidden;}

#notice-box {font-size: 13px; position: absolute; display: none; background: white; opacity: 0.7; padding: 4px; border-radius: 5px;}

#background, #photo-box, #text-photo {
    -webkit-user-select: none;                /* disable cut copy paste */
    -webkit-touch-callout: none;              /* disable callout, image save panel */
    -webkit-tap-highlight-color: transparent; /* "turn off" link highlight */
}
/**
 * Additional styles
 */
.box {text-align: center; margin: 0px auto;}
.none {display: none}
.index {min-height: 500px;}
.loading {background: url('../images/loader.gif') no-repeat scroll 50% 50% #FFF !important; }

/**
 * Photos slider
 */
#photo-box-t {float: left;  }
.l-780 #photo-box-t {width: 720px; height: 480px;}
.l-1005 #photo-box-t {width: 945px; height: 630px}
.l-1230 #photo-box-t  {width: 1170px; height: 780px}
#photo-box {text-align: center; vertical-align: middle}

#photo-thumbs-t {width: 55px; float: right; text-align: center;}
.l-780 #photo-thumbs-t {height: 480px}
.l-1005 #photo-thumbs-t {height: 630px}
.l-1230 #photo-thumbs-t  {height: 780px}

#photo-thumbs {width: 60px; overflow: hidden; position: relative}
.l-780 #photo-thumbs {height: 400px}
.l-1005 #photo-thumbs {height: 550px}
.l-1230 #photo-thumbs  {height: 700px}
#photo-thumbs-t .arrows {height: 20px; padding-left: 19px;}
#photo-thumbs-t .arrows.down {height: 9px; padding-top: 1px;}
#photo-thumbs-t .next, #photo-thumbs-t .prev {visibility: visible; }

#photo-slider {position: absolute; width: 45px; top: 0px; left: 15px}
#photo-slider .thumb {width: 45px; height:45px; position: relative;}
.l-780 #photo-slider .thumb {margin: 0 0 6px}
.l-1005 #photo-slider .thumb {margin: 0 0 5px}
.l-1230 #photo-slider .thumb  {margin: 0 0 5px}
#photo-slider .thumb img {opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);}
#photo-slider .thumb a:hover img, #photo-slider .active img {opacity:1; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
#photo-slider .thumb .img {width: 45px; height: 45px; position: absolute; right:0; background-color: #ffffff}

.slideshow-control {padding-top: 15px; padding-left: 7px; width: 59px;}
#photo-slideshow  {color: #757575; text-align: center; font-size: 11px;line-height: 1.4;}

#video-box { margin-bottom: 10px}
.l-780 #video-box {width: 780px; height: 395px}
.l-1005 #video-box {width: 1005px; height: 545px}
.l-1230 #video-box  {width: 1230px; height: 695px}
#video-slider-wrapper {height:75px; overflow: hidden; position: relative;left: 13px;}
.l-780 #video-slider-wrapper {width: 742px;}
.l-1005 #video-slider-wrapper {width: 956px;}
.l-1230 #video-slider-wrapper  {width: 1185px;}
#video-slider {position: absolute; width: 10000px; top: 0px; left: 0px}
#video-slider .thumb {height:75px; position: relative; text-align: left; float: left}
.l-780 #video-slider .thumb {width: 150px;}
.l-1005 #video-slider .thumb {width: 137px;}
.l-1230 #video-slider .thumb {width: 149px;}
#video-slider .thumb img {opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); position: absolute}
#video-slider .thumb a {width: 75px; height: 144px;  background-color: #ffffff;}
#video-slider .thumb a:hover img, #video-slider .active img {opacity:1; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
#video-left {background: url(../images/gallery-sprite.png) -9px 0 no-repeat; height: 32px; width: 9px;margin-left: 5px;float: left;}
#video-right {background: url(../images/gallery-sprite.png) -27px -1px no-repeat; height: 32px; width: 9px;position: relative;float: right;}
#video-right:hover {background-position: -18px 0}
/*#video-left:hover {background-position: 0px 0}*/
#video-arrows {
    position: relative;
}
#video-arrows div {cursor: pointer}

.l-780 #video-arrows {width: 778px;top: 20px;}
.l-1005 #video-arrows {width: 997px; top: 20px;}
.l-1230 #video-arrows  {width: 1225px; top: 23px;}
/**
* Login / password styles for private photo gallery
*/
#auth-box {height: 340px; padding-top: 150px}
.l-780 #auth-box {width: 780px;}
.l-1005 #auth-box {width: 1005px; padding-top: 200px}
.l-1230 #auth-box  {width: 1230px; padding-top: 250px}
#auth {text-align: left; margin: 0px auto; width: 320px;  padding: 20px; background: #ffffff}
#auth p {padding-bottom: 10px;}
#auth div {padding-bottom: 5px; text-align: left}
#auth label {float: left; text-align: right; width: 80px; padding-right: 10px; line-height: 28px }
#auth input[type=text], #auth input[type=password] {border: 1px solid #fff; width:200px; padding: 5px; font: 11px/16px Verdana,Arial,sans-serif; background-color: #f6f2ef; color: #725f4f;}
#auth input[type=submit] {border: 1px solid #fff; background: #eeeeee; color: #888; font-weight: bold; padding: 3px 5px; cursor: pointer; margin-left: 90px}

/**
 * Menu
 * Basic code - don't modify
 */
#menu {position: relative; width: 170px}
.l-780 #menu {height: 340px}
.l-1005 #menu {height: 490px}
.l-1230 #menu  {height: 640px}
#menu ul {list-style:none; margin: 0 auto; padding: 0; width: 130px}
#menu ul li {text-align:center;margin-top: 2px; }
#menu ul li a {
    padding: 3px 7px;
    display:block;
    text-transform: uppercase;
}
#menu > ul > li.active  > a, #menu > ul > li.open > a {
    background-color: #CBD8A0;
    color: #4B4F4D;
}
#menu > ul > li a:hover {
    background-color: #CBD8A0;
    color: #4B4F4D;
}
#menu > ul > li.open > ul {display: block}
#menu > ul > li > ul {display: none; margin: 4px auto;}
#menu > ul > li.submenu > ul > li.active  > a, #menu > ul > li.submenu > ul > li  > a:hover {
    background: none;
    color: black;
}
#menu > ul > li.submenu > ul > li > a {
    padding: 1px 7px;
    font-size: 11px;
    line-height: 1;
}

#langs {bottom: 8px; position: absolute; left: 50%; margin-left: -32px; text-transform: uppercase;}

/**
 * Text page container layouts
 */
#text-box {float: left;   }
.l-780 #text-box {width: 437px; height: 480px;}
.l-1005 #text-box {width: 555px; height: 630px;}
.l-1230 #text-box  {width: 673px; height: 780px;}
#text-photo {float: right; overflow: hidden}
.l-780 #text-photo {width: 343px; height: 480px;}
.l-1005 #text-photo {width: 450px; height: 630px;}
.l-1230 #text-photo  {width: 557px; height: 780px;}

.arrows {height: 15px}
.arrows a.prev {width: 33px; height: 9px; display: inline-block; background: url('../images/text-sprite.png') no-repeat 0 0; visibility: hidden}
/*.arrows a.prev:hover {background-position: 0px -9px}*/
.arrows a.text:hover {background-position: 0px -9px}
.arrows a.next {width: 33px; height: 9px; display: inline-block; margin-top: 6px;  background: url('../images/text-sprite.png') no-repeat 0 -18px; visibility: hidden}
.arrows a.next:hover {background-position: 0px -27px}

#text-photo.left {float: left}
#text-box.right {float: right}

#text {text-align: left; padding: 10px; position:relative; overflow:hidden;}
.l-780 #text {width: 417px; height: 460px;}
.l-780 #text.w-arrows {height: 440px;}
.l-1005 #text {width: 535px; height: 610px;}
.l-1005 #text.w-arrows {height: 590px;}
.l-1230 #text {width: 653px; height: 760px;}
.l-1230 #text.w-arrows {height: 727px;}
#text .items{position:absolute;top: 0;}
.l-780 #text .items {width: 417px;}
.l-1005 #text .items {width: 535px;}
.l-1230 #text .items {width: 653px;}

/**
 * Typography for text (nust be unify with css/editor.css)
 */
#text {font:normal 11px Verdana, Arial, sans-serif; line-height:16px; color:#888;}
#text h1 {font-weight:bold; padding-bottom: 16px; font-size:14px; color: #616161}
#text h2 {font-weight:bold; padding-bottom: 16px; font-size:13px; color: #616161}
#text h3 {font-weight:bold; padding-bottom: 16px; font-size:12px; color: #616161}
#text h4 {font-weight:bold; padding-bottom: 16px; font-size:11px; color: #616161}
#text h5 {font-weight:bold; padding-bottom: 16px; font-size:11px; color: #616161}
#text h6 {font-weight:bold; padding-bottom: 16px; font-size:11px; color: #616161}
#text p {padding-bottom: 16px}
#text a {color: #336699}
#text ul, ol {padding-left: 10px; padding-bottom: 16px}
#text ul li {list-style-type: circle;}
#text ol li {list-style-type: decimal;}

#contact-box {margin-top: 20px; height: 270px;}
#contact-box .text {border: 1px solid #fff; width:350px; padding: 5px; font: 11px/16px Verdana,Arial,sans-serif; background-color: #f6f2ef; color: #725f4f;}
#contact-box .text-box {margin-bottom: 10px; text-align: center; color: #6a5a3d;}
#contact-box .button-box {margin-bottom: 10px; margin: 0px auto; width: 362px; text-align: right;}
#contact-box .submit {border: 1px solid #fff; background: #eeeeee; color: #888; font-weight: bold; padding: 3px 5px; cursor: pointer;}
#contact-box .form-name {color: #756e73; font-weight: bold; width: 362px; margin: 0px auto; margin-bottom: 10px}

#error {color: #ff3333; width: 362px; margin: 0px auto; margin-bottom: 10px; display:none}
#message {width: 362px; margin: 0px auto; margin-bottom: 10px;}
#noscript {width: 100%; position: absolute; top: 0; z-index: 9999; padding: 5px 0px; background-color: #de4343; border-color: #c43d3d; color: #fff; text-align: center}
#jplayer {position: relative}
#loadcontent {display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index: 9999;}

.left-cursor {cursor: url(../images/left.cur), default;}
.right-cursor { cursor: url(../images/right.cur), default;}


.no-js #background, .no-js #video-slider-wrapper, .no-js #photo-box-t {
    overflow-y: visible;
}
.no-js #background > img, .no-js #photo-box-t > img {
    position: relative;
    margin-bottom: 5px;
    text-align: center;
}
.no-js #text {
    overflow-y: visible;
    width: 407px;
}
.no-js #menu {
    overflow-y: auto;
    height: 330px;
}
.no-js #menu > ul > li > ul {
    display: block;
}
.no-js #video-box {overflow-y: auto; width:780px; height: 480px;}
.no-js #video-box a {margin-bottom: 5px}
.no-js #video-box img {max-width:760px; max-height: 480px;}