/*-----------------------------------
Maraska main CSS stylesheet 
-------------------------------------*/

/************************ CSS RESET ***/
@import url("reset.css");

/************************ GENERAL ***/
body  { background: #fff; font-family: arial, sans-serif; }
#container  { width: 944px; margin: 0px auto; }
#wrapper  { overflow: hidden; zoom: 1; background: url(../images/border-01.png) 693px 0px repeat-y; margin-bottom: 40px; }

button  { height: 18px; line-height: 12px; font-size: 11px; padding: 0 4px; font-family: "Trebuchet MS", arial, sans-serif; background: #fff url(../images/gradient-02.png) bottom left repeat-x; border: 1px solid #d8d8d8; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #c3c3bf; cursor: pointer; }

/************************ HEADER ***/
#header { position: relative; padding-top: 145px; height: 233px; }
#header a { display: block; position: absolute; top: 21px; left: 328px; width: 273px; height: 118px; background: url(../images/maraska-logo.png); text-indent: -9999px; overflow: hidden; color: #333; }
#header img { display: block; position: absolute; }

/************************ INTRO ***/
#intro  { height: 483px; background: url(../images/intro-bkg.jpg); position: relative; }
#intro div  { position: absolute; top: 320px; left: 250px; width: 420px; text-align: center; padding-bottom: 10px; }
#intro div h2 { color: #333; font-size: 28px; font-weight: bold; font-family:"Georgia",serif; margin-bottom: 15px; }
#intro div .button {float: left; width: 80px; height: 25px; line-height: 22px; font-size: 12px; font-weight: bold; font-family:"Verdana",sans-serif; color: #fff; text-decoration: none; text-transform: uppercase; background: url(../images/button-01.png); margin: 0 -100px 20px 120px; }
#intro div p  { clear: left; font-size: 12px; font-weight: bold; font-family:"Verdana",sans-serif; color: #545148; }
#intro div p a  { color: #333; }
#intro div p a:hover  { text-decoration: none; }

#intro .lang  { top: 330px; right: 20px; position: absolute; }
#intro .lang dt { color: #c5b57b; }
#intro .lang dt span  { color: #716c58; }
#intro .lang dd { background-color: #efe6c7; }

/************************ CONTENT & NAVIGATION ***/
#content  { float: left; width: 693px; }

#navigation { overflow: hidden; zoom: 1; padding: 15px 0 30px 0; }
#navigation li  { float: left; padding-left: 30px; }
#navigation li.first { padding-left: 0 !important; }
#navigation li a  { text-decoration: none; text-transform: uppercase; color: #9a9a9a; font-size: 15px; line-height: 18px; font-weight: bold; font-family: verdana, arial, sans-serif; }
#navigation li a:hover,
#navigation li.on a { color: #993333 !important; }

.text { margin-right: 55px; font-size: 12px; line-height: 18px; color: #050101; }
.text h1  { font-size: 24px; line-height: 27px; font-weight: normal; font-family: verdana, arial, sans-serif; margin-bottom: 20px; }
.text h2  { font-size: 14px; line-height: 18px; font-weight: bold; margin-bottom: 15px; }
.text .text-block h2  { margin-bottom: 8px; }
.text .text-block h2 a  { color: #050101; }
.text h3  { font-size: 12px; line-height: 18px; font-weight: bold; }
.text p { margin-bottom: 20px; }
.text table { border: 0; margin-bottom: 20px; }
.text th,
.text td  { padding-right: 10px; }
.text a { text-decoration: none; color: #993333; }
.text a:hover { text-decoration: underline; }
.text .img-right  { float: right; margin: 0 0 20px 35px; }
.text .img-left  { float: left; margin: 0 35px 20px 0; }
.text .text-block .img-right { margin: 0 0 5px 15px; }
.text .text-block .img-left { margin: 0 15px 5px 0; }
.text .date { display: block; font-size: 10px; color: #888; }
.text ul  { list-style: disc; margin-left: 20px; }

.text div { overflow: hidden; zoom: 1; }
.text div .gallery  { overflow: hidden; zoom: 1; margin: 25px 0 15px 0; list-style: none; }
.text div .gallery li { float: left; width: 80px; margin: 0 5px 5px; line-height: 13px; font-size: 11px; color: #999; text-align: center; height: 129px; overflow: hidden; zoom: 1; }
.text div .gallery li a { color: #fff; }
.text div .gallery li img { display: block; cursor: pointer; margin-bottom: 3px; }

.text .text-block { background: url(../images/border-03.png) bottom left repeat-x; padding: 10px 0 5px 0; }

.pagination { background: #ededed url(../images/border-03.png) bottom left repeat-x; text-align: center; list-style: none; margin: 0 !important; }
.pagination li  { display: inline; line-height: 28px; font-size: 12px; font-weight: bold; color: #686868; }
.pagination li.on { background: #b11f26; }
.pagination li.on a { color: #fff; }
.pagination li a  { line-height: 28px; padding: 0 5px; font-size: 12px; font-weight: bold; color: #686868; }
.pagination li.prev a,
.pagination li.next a { padding: 0; }
.pagination li a img  { vertical-align: middle; }
.pagination li.off a img  { opacity: 0.4; filter: alpha(opacity=40); }

.about-us { background:url(../images/about-us-bg.jpg) no-repeat; width: 944px; float: left; }
.about-us h2 { margin:30px 0 15px 30px; color: #77632d; font-size: 18px; font-weight: bold; font-family:"Georgia",serif; }

#maraska-through-history { overflow:auto; width:943px; }
#maraska-through-history #years { overflow:hidden; }
#maraska-through-history #years li { float:left; font-family:"Georgia",serif; font-size: 18px; line-height: 24px; font-weight:bold; margin-left:32px; width:60px; }
#maraska-through-history #happenings { height:403px; overflow:auto; }
#maraska-through-history #happenings li { position:relative; width:310px; height:403px; float:left; border:1px solid #fff; border-width:0 1px; margin-right:2px; }
#maraska-through-history #happenings li .wrapp { position:absolute; bottom:0; left:0; height:187px; width:280px; background:url(../images/about-us-item-bg-01.png); color:#fff; padding:0 10px 0 20px; zoom: 1; }
#maraska-through-history #happenings li .wrapp h3 { font-family:"Georgia",serif; font-size: 40px; font-weight:bold; line-height:45px; margin-bottom: 3px; }
#maraska-through-history #happenings li .wrapp p { margin:5px 0 0; }
#maraska-through-history #happenings li .wrapp .scroll { position: static; height: 133px; width:280px; padding: 0; margin: 0; background: none; overflow: auto; font-size: 12px; line-height: 14px; }

.js #maraska-through-history { overflow:hidden; width:943px; }
.js #maraska-through-history #happenings { overflow:hidden; }
.js #maraska-through-history #happenings-wrapper { height:458px; position:relative; overflow:hidden; }
.js #maraska-through-history #happenings { position:absolute; margin-top:5px; }
.js #maraska-through-history #slider-1 { width:944px; height:22px; position:relative; background:#9c151a url(../images/about-us-slider-bg.png); margin:10px 1px 0; }
.js #maraska-through-history #slider-1 .ui-slider-handle { position:absolute; z-index:1; width:101px; height:33px; top:-5px; left:0; background:url(../images/about-us-slider-handle.png) no-repeat; cursor:e-resize;  }

#products-through-history #products { overflow:hidden; background:#efe7d3; border-bottom:1px solid #e3ddcb; }
#products-through-history #products li { position:relative; float:left; width:130px; height:289px; padding-top:38px; padding-right:10px; }
#products-through-history #products li.period_2,#products-through-history #products li.period_4 { background:#f9f6ea; }
#products-through-history #products li h3 { position:absolute; bottom:25px; left:0; font-family:"Verdana",sans-serif; color:#686868; font-size:11px; line-height: 14px; font-weight:bold; width:130px; height:33px; text-align:center; }

.js #products-through-history #slider-2 { width:944px; height:22px; position:relative; background:#000; margin:10px 1px 0; }
.js #products-through-history #slider-2 .ui-slider-handle { position:absolute; z-index:1; width:101px; height:33px; top:-5px; left:0; background:url(../images/about-us-slider-handle.png) no-repeat; cursor:e-resize;  }

/************************ SIDEBAR ***/
#sidebar  { float: right; width: 236px; padding: 13px 0 25px 14px; }

.lang  { overflow: hidden; zoom: 1; font-family: verdana, arial, sans-serif; margin-bottom: 27px; width: 236px; }
.lang dt  { float: left; color: #dedede; font-size: 9px; line-height: 19px; font-weight: bold; text-transform: uppercase; }
.lang dt span  { color: #7a7a7a; }
.lang dt span.on  { color: #333333 !important; }
.lang dd { display: none; }
.lang dd.on  { display: block; float: right; border: 1px solid #e3dfd1; background: #fcfcfb url(../images/arrow-01.png) 104px 2px no-repeat; cursor: pointer; }
.lang dd.on a { display: block; font-size: 11px; line-height: 17px; color: #686868; text-decoration: none; padding: 0 18px 0 9px; width: 94px; }
.lang dd.on a:focus { outline: none; }

#sidebar ul { border-bottom: 1px solid #dedede; }
#sidebar ul li  { border-top: 1px solid #dedede; padding: 2px 1px; }
#sidebar ul li a  { display: block; padding: 4px 13px; font-size: 14px; line-height: 17px; color: #333; text-decoration: none; }
#sidebar ul li a:hover,
#sidebar ul li.on a { background: #ededed; }

#sidebar ul li.on ul  { border: none; margin-bottom: -2px; }
#sidebar ul li.on ul li a { background: #fff; padding-left: 33px; color: #7c7c7c; }
#sidebar ul li.on ul li a:hover,
#sidebar ul li.on ul li.on a { color: #333; background: #f6f6f6; }

#sidebar ol li  { display: none; }
#sidebar ol li.on { display: block; background: url(../images/dropdown-02-head.png); cursor: pointer; height: 26px; }
#sidebar ol li.on a { font-size: 14px; color: #fff; text-decoration: none; display: block; width: 203px; height: 21px; padding: 5px 20px 0 13px; }

#contact-form { width: 210px; padding: 10px 17px 10px 18px; margin-left: -11px; border: 1px solid #dedede; background: #f6f5f5 url(../images/gradient-01.png) bottom left repeat-x; color: #333; }
#contact-form h2  { font-size: 13px; line-height: 18px; margin-bottom: 5px; font-weight: bold; }
#contact-form p  { font-size: 12px; line-height: 18px; margin-bottom: 10px; }
#contact-form em  { color: #fd4703; }
#contact-form label  { font-size: 11px; line-height: 14px; display: block; margin-bottom: 3px; }
#contact-form input { border: 1px solid #dedede; background: #fff; margin-bottom: 8px; width: 200px; padding: 2px 4px; font-size: 12px; line-height: 18px; }
#contact-form textarea { border: 1px solid #dedede; background: #fff; margin-bottom: 8px; width: 200px; height: 70px; padding: 2px 4px; font-size: 12px; line-height: 18px; font-family: arial, sans-serif; overflow: auto; }
#contact-form .note { font-size: 11px; line-height: 14px; color: #999; }
#contact-form button  { float: right; margin-left: 10px; }
#contact-form input.error,
#contact-form textarea.error  { background: #efa6a6; }
#contact-form span.error  { display: block; margin: -6px 0 6px 0; font-size: 11px; line-height: 14px; color: #fd4703; }
#contact-form img { display: block; margin: -4px 0 10px 0; }

/************************ FOOTER ***/
#footer { padding: 45px 0; position: relative; }
#footer p { font-size: 11px; line-height: 16px; color: #9a9a9a; text-align: right; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; padding: 0 4px; margin-bottom: 15px; }
#footer p a { color: #9a9a9a; text-decoration: none; float: left; }
#footer .signature  { display: block; position: absolute; top: 0px; left: 333px; width: 276px; height: 65px; background: url(../images/maraska-signature.png); text-indent: -9999px; }
#footer .dimedia { font-size: 11px; color: #000; text-decoration: none; }
#footer .dimedia:hover,
#footer .dimedia span  { color: red; }

/************************ SPECIAL STYLES FOR PAGES ***/
.home #header { height: 342px; }
.home #wrapper  { background: #e9dba9; margin-bottom: -25px; height: 96px; position: relative; padding: 20px 0 0 39px; }
.home #wrapper #navigation li  { padding-left: 35px; }
.home #wrapper #navigation li a { color: #43423d; }
.home #footer .signature  { background: url(../images/maraska-signature-02.png); }
.home #wrapper .lang  { top: 34px; right: 10px; position: absolute; }
.home #wrapper .lang dt { color: #c5b57b; }
.home #wrapper .lang dt span  { color: #716c58; }
.home #wrapper .lang dd { background-color: #efe6c7; }

.intro #header { height: auto; } 

.history #header { height: auto; } 
.history #wrapper { background: #fff; }
.history #navigation { padding-bottom: 15px; }

.contact #wrapper { background: url(../images/border-02.png) 693px 0px no-repeat; }
.contact .text { padding-left: 10px; }
.contact .text h1 { margin-left: -10px; }
.contact .text h2 { margin-left: -10px; background: #ededed; padding: 5px 10px; }

/************************ DROPDOWN ***/
.dropdown_box { position: absolute; top: 0; left: 0; display: none; border: 1px solid #e3dfd1; border-top: none; background: #fcfcfb; } 
.dropdown_box ul  { padding: 2px 0 0 0; }
.dropdown_box ul li a { display: block; font-size: 11px; padding: 0 18px 0 9px; line-height: 17px; color: #686868; text-decoration: none; font-family: verdana, arial, sans-serif; }
.dropdown_box ul li a:hover { background: #dedede; }

.dropdown_box_02 { width: 233px; position: absolute; top: 0; left: 0; display: none; background: url(../images/dropdown02-bkg.png) bottom left no-repeat; } 
.dropdown_box_02 ul  { margin: 18px 12px 5px 10px; border-top: 1px solid #ddd; }
.dropdown_box_02 ul li  { border-bottom: 1px solid #ddd; } 
.dropdown_box_02 ul li a { display: block; font-size: 11px; line-height: 15px; color: #333; text-decoration: none; font-family: arial, sans-serif; padding: 3px 10px 3px 12px; background: url(../images/arrow-02.png) 204px 8px no-repeat; }
.dropdown_box_02 ul li a:hover { background-color: #f8f2e5; }

/************************ SCROLL PANE ***/
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: #836a2f; }
.jScrollPaneDrag { position: absolute; background: #ddd5c3; cursor: pointer; overflow: hidden; }
.jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; }
.jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; }
a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 9px; }
a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 9px; }