
/*Common

------------------------------------------------------------------------- */
* { margin:0;padding:0;}
img { border: 0 }
a, button, object { text-decoration: none; outline: none; color: #f19d1c;}
a:hover { color: #383436; }
ul { list-style: none; text-align: left; }
fieldset { border: 0; }
.submit:hover { cursor: pointer;}
h1 { padding: 30px 15px 45px;}
h2 { font: bold 21px/26px "Microsoft Sans Serif"; color: #534F4E; margin: 0; clear: both; }
h3 { font: bold 21px/26px Arial; color: #544e4f; margin: 0; clear: both; padding: 0 0 10px; text-indent: -2px;}
h4 { font: bold 17px/26px Arial; color: #544e4f; margin: 0; clear: both; }
.body h3 {text-indent: 0;}
p {font: 12.5px/15px Verdana; color: #544e4f; } 
.description p { padding: 10px 0;}

.body form { text-align: center; width: 100%;}
.body fieldset { text-align: left; margin: 0 auto; width: 310px;}
.body input.text, .body textarea { width: 300px; border: 1px solid #F09206; color: #000; font: 12.5px/15px Verdana;}
.body input.text { padding: 3px 0;}

/*Layout

------------------------------------------------------------------------- */
html { background: #FFF url(../images/bg.gif) 0 100% repeat-x; }
body { height: 100%; width: 100%; background: url(../images/bg.gif) 0 0 repeat-x; font: 12.5px/15px Verdana,Arial,Helvetica,sans-serif; color: #000;}

#top, #content , #footer{ width: 849px; margin: 0 auto; position: relative; overflow: hidden; clear: both; z-index: 1;}
.page #top, .page #content , .page #footer { width: 791px;}

/* Top

------------------------------------------------------------------------- */
.page #top { padding: 0 0 40px;}
.menu { position: absolute; top: 60px; right: 20px;}
.menu li { float: left; margin: 0 9px; background: url(../images/menu.gif) 0 0 no-repeat;}
.menu li a {font: 13.5px/25px sans-serif; color: #FFF; float: left; padding: 0 10px; background:url(../images/menu.gif) 100% -25px no-repeat; height: 25px; overflow: hidden;}
.menu li a img { float: left;}
.menu li:hover, .menu li.active { background-position: 0 -50px; }
.menu li:hover a, .menu li.active a { background-position: 100% -75px; }
.menu li ul { position: absolute; top: 25px; width: 450px; padding: 11px 0 0; left: 10px; display: none; background:url(../images/blank.gif) 0 0 repeat;}
.menu li:hover ul, .menu li.active ul { display: block;}
.menu li ul li { float: left; padding: 0 3px; border-left: 1px solid #544E4F; background: none; margin: 0; }
.menu li ul li a { float: left; padding: 0 3px; font: 10.5px/13px Verdana; height: 13px; color: #544E4F; background: none;}
.menu li ul li a:hover { color: #f19d1c; }
.menu li ul li:first-child { border-left: 0;}

#head { float: left; width: 100%; clear: both; background: url(../images/bar.gif) 0 0 no-repeat; position: relative; padding: 4px 0 0;}
#head  .body { float: left; background: url(../images/bar.gif) 100% 100% no-repeat; padding: 0 0 4px; margin: 0; clear: both; width: 849px; height: 175px; overflow: hidden; position: relative;}
#flash { position: absolute; top: -1px; left: 0;}

.B_crumbBox { float: left; clear: both; margin: 20px 0 0; padding: 0 20px;}
.B_crumbBox span { float: left; padding: 0 2px; font: bold 11.5px/17px Verdana; color: #544E4F;}
.B_crumbBox a { float: left; padding: 0 5px; font: 11.5px/17px Verdana; color: #544E4F;}
.B_crumbBox a.B_crumb { background: url(../images/dot.gif) 0 50% no-repeat;}
.B_crumbBox span.B_currentCrumb { padding-left: 8px; background: url(../images/dot.gif) 0 50% no-repeat;}

/* Content

------------------------------------------------------------------------- */
#content {background: url(../images/dash.gif) 0 0 repeat-x; margin-top: 15px; padding: 0 0 50px; }
.page #content { background: url(../images/bar.gif) 0 0 no-repeat; margin-top: 0; padding: 0;}
.page #content .body {float: left; width: 100%; padding: 0 0 20px; background: url(../images/bar.gif) 100% 100% no-repeat; margin: 20px 0; }
#home-navigation { float: left; padding: 0; margin: 0 -10px; clear: both;}
#home-navigation li { float: left; margin: 10px;}
#home-navigation li a { float: left; background: url(../images/blank.gif) 0 0 repeat;; }
#home-navigation li a:hover { background: url(../images/shadow.png) 0 0 repeat;}
#home-navigation li a img { float: left; position: relative; z-index: -1;}

.sidemenu { float: left; margin: 20px 0 0; width: 170px; overflow: hidden; }
.sidemenu li { margin: 7px 0 0; padding: 0 0 0 7%; width: 93%; float: left; clear: both; background: url(../images/sidemenu.gif) 0 6px no-repeat; }
.sidemenu li:hover {background-position: -200px 6px;}
.sidemenu li a { font: bold 11px/17px Verdana; color: #544E4F;}
.sidemenu li.active { background-position: -200px 6px; cursor: pointer;}
.sidemenu li.active:hover {background-position: 0 6px;}
.sidemenu li a:hover { text-decoration: none;}
.sidemenu li ul {display: none;}
.sidemenu li.active ul, .sidemenu li:hover ul { display: block;}
.sidemenu li li { padding: 0 0 0 12px; background: none;}
.sidemenu li li.active a { font-weight: bold; letter-spacing: -1px; }
.sidemenu li li.active ul a { font-weight: normal;}
.sidemenu li li a { font-weight: normal; }
.sidemenu li li a:hover { font-weight: bold; letter-spacing: -1px;}
.sidemenu li li.active ul a:hover { font-weight: bold;}

#filter { float: right; color: #000; cursor: pointer; padding: 3px 10px; margin: 0; background: #FFF url(../images/arr.gif) 100% 9px no-repeat; border: 1px solid #E3E9EF; border-top-color: #ABADB3; width: 100px; position: absolute; width: 130px; top: -40px; right: 20px;}
#filter div.dittoTags { position: absolute; top: 22px; left: -1px; display: none; background: #FFF; border: 1px solid #E3E9EF; border-top: 0; padding: 3px 10px; width: 130px;}
#filter div.dittoTags a { display: block; padding: 3px 0; color: #000;}
#filter:hover div.dittoTags { display: block; }
#filter div.dittoTags a:hover { font-weight: bold; text-decoration: none;}

.product { float: right; margin: 25px 0 0; padding: 0; width: 650px;}
.description { float: right; width: 280px; margin-right: 30px;}
#main_image{ position: relative; left: 0; margin: 0 auto; padding: 0; height: 250px; width:300px;background:#FFF; overflow: hidden; text-align: center;}
#main_image img { width: 300px; }
.gallery { float: left; text-align: center; width: 300px; margin: 0 0 0 20px; overflow: hidden; position: relative;}
.gallery .inner { position: absolute; top: 0; left: 0; width: 300px; height: 250px; }
.gallery img { width: 300px; height: 220px;cursor: move;}
.gallery .caption {font: 0/0 Arial;color:#FFF; display: none; text-indent: -10000px; width: 0; height: 0; overflow: hidden; position: absolute;}
.document { float: left; clear: both; margin: 10px 0 0; padding: 5px 8px 5px 19px; background: #F19D1C url(../images/plus.gif) 6px 10px no-repeat; font: bold 10.5px/15px Verdana; color: #000;}
.shop { float: left; margin: 10px 0 0 8px; padding: 5px 8px 5px 19px; background: #F19D1C url(../images/plus.gif) 6px 10px no-repeat; font: bold 10.5px/15px Verdana; color: #000;}
#nav { margin: 240px 0 0; float: left; clear: both; width: 300px;}
#nav li { float: left; margin:20px 0 0; border: 1px solid #D7D7D7;  overflow: hidden; width: 70px; height: 50px; margin: 10px 10px 0 0;}
#nav img { float: left; cursor: pointer; height: 50px; width: 70px; margin: 0 auto; opacity: 0.3;	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);}
#nav .activeSlide img { opacity: 1; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}


.product-list{ float: left; clear: both; width: 680px; margin: 40px 0 0 -30px; background: url(../images/br.gif) 50% 0 repeat-y; position: relative;}
.product-list span.ditto_item { float: left; width: 310px; margin: 15px 0 0 30px; padding: 0 0 15px; height: 100px; overflow: hidden; }
.product-list span.ditto_item a { float: left; width: 310px; height: 100px; overflow: hidden; font: 11.5px/15px Verdana; color: #544e4f; cursor: pointer;}
.product-list span.ditto_item a img { width: 135px; float: left;}
.product-list span.ditto_item a .title { font-weight: bold; float: right; width: 160px;}
.product-list span.ditto_item a:hover .title { color: #f19d1c;}
.product-list span.ditto_item a .desc { float: right; width: 160px; margin: 8px 0 0;}
.product-list span.ditto_item a:hover .desc { color: #f19d1c;}

#ditto_pages { text-align: center; float: left; clear: both; width: 100%; margin: 15px 0 0;}
#ditto_pages img { vertical-align: middle;}
#ditto_pages a, #ditto_pages span { width: 15px; height: 15px; margin: 0 5px; height: 15px; line-height: 15px;overflow: hidden; display: inline-block; background:url(../images/pages.gif) 0 0 no-repeat; font: 10px/14px Verdana; color: #fff;}
#ditto_pages a:hover, #ditto_pages span.ditto_currentpage { text-decoration: none; background-position: 100% 0;}
#ditto_pages a.ditto_previous_link, #ditto_pages a.ditto_next_link { width: auto; background: none;}
#ditto_pages .ditto_previous_off, #ditto_pages .ditto_next_off {display: none;}

/* Footer 

------------------------------------------------------------------------- */
#footer { text-align: right; font: 11.5px/17px Verdana; color: #544F4E;}
#footer ul {text-align: right; margin: 10px -8px 0 0;}
#footer ul li { display: inline; }
#footer ul ul { display: inline; }
#footer ul li a {padding: 0 7px 0 5px; background: url(../images/dot.gif) 100% 50% no-repeat;}
#footer ul li.last a { background: none;}
#footer a { color: #544F4E;}
#footer a:hover { color: #f19d1c;}
#footer span {font-size: 10.5px; float: right; padding: 19px 5px 0; margin: 30px 0 0; background: url(../images/dash.gif) 0 0 repeat-x; }
#footer p {font-size: 10.5px; float: right; padding: 15px 29px 0; margin: 30px 0 0; }

/* Other 

------------------------------------------------------------------------- */
.fl { float: left; }
.fr { float: right; }
.clear { clear:both; }


	
/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {position: absolute;top: 0;left: 0;z-index: 999;width: 100%;height: 500px;}
#jquery-lightbox {position: absolute;top: 0;left: 0;width: 100%;z-index: 9999;text-align: center;line-height: 0;}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {position: relative;background-color: #fff;width: 250px;height: 250px;margin: 0 auto;}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {position: absolute;top: 40%;left: 0%;height: 25%;width: 100%;text-align: center;line-height: 0;}
#lightbox-nav {position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 9999;}
#lightbox-container-image-box > #lightbox-nav { left: 0;}
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {width: 49%;height: 100%;zoom: 1;display: block;}
#lightbox-nav-btnPrev { left: 0; float: left;}
#lightbox-nav-btnNext { right: 0; float: right;}
#lightbox-container-image-data-box {font: 10px Verdana, Helvetica, sans-serif;background-color: #fff;margin: 0 auto;line-height: 1.4em;overflow: auto;width: 100%;padding: 0 10px 0;}
#lightbox-container-image-data {padding: 0 10px; color: #666; }
#lightbox-container-image-data #lightbox-image-details { width: 70%; float: left; text-align: left; }	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {display: block; clear: left; padding-bottom: 1.0em;	}			
#lightbox-secNav-btnClose {width: 66px; float: right;padding-bottom: 0.7em;	}
