/* ------------------------------GLOBAL and MICRO below 280px--------------------------
--------------------------------------------------------------------------------*/

body {width:100%;margin: 0 auto; background:#72685f; font-family:helvetica,verdana,arial,sans-serif; font-size: 0.9em; font-weight:100;}

h1, h2, h3, h4, h5, h6,
a, img, summary, .lBx,
label, button, .btn, .btn-contr, .btn-icon, .btn-act, .noSel {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  -webkit-user-select:none;
     -moz-user-select:none;
       -ms-user-select:none;
             user-select:none;
}

/*flexible images*/
img {max-width: 100%; height: auto; 
width: auto\9; /* ie8 */
}  

#main p   {line-height: 1.3em;}
#footer a {line-height:1.6em;}
img {border:0;}
.callout, .scallout {border:1px dashed #5b5447;}
.hr {margin:10px 0px 10px 0px; border-bottom:1px dashed  #b6b889;}

.ul li {margin-bottom:0.5em;}

p.small {color:#7b7164;}
h1, h2, h3, h4 {color: #72685f;}

a:link, a h1 {color: #a34924;} 
a:link, a h1  {text-decoration:none; border-bottom:none;}
p a:link { font-weight:400;}
a:visited {color: #8e605b;}
p a:hover {border-bottom:1px solid;}

h1, h2, h3, h4,  #footer,  .preview  {text-align:center;}
.leftimgtext, .rightimgtext, .previewtext {text-align:left;}
em, .leftimgtext, .rightimgtext {font-style:italic;}
h1, h2, h3, h4, .fm  {font-variant:small-caps;}

p.small, .previewtext {font-family:verdana, arial, sans-serif;}

p.small, .quotename, #footer, .previewtext {font-size:0.75em;}
.leftimgtext, .rightimgtext {font-size:1.05em;}
em, #header span { font-size:1.1em;}

h1, h2, h3, h4 {font-weight:100;}
.fm {font-size:0.7em;}
.fm a {font-size:2em;}

.clr {clear:right;}
.cll {clear:left;}
.clearboth {clear:both;}


/*.......................................................PAGE ELEMENTS .............*/

#container {width: 100%; margin: 0; background:#f9f8f6; } 
#main {width:94%; margin:10px auto;}
#footer {width:90%; clear:both; margin:auto; margin-bottom:50px;}

#header {width: 100%; height:92px;  margin:auto; background: url('shared/bar1.png') repeat-x  center;}
#hdlink {width: 100%; height:92px; background:url('shared/ke3.png') center no-repeat; }  


/*..........................................MENU.............................................*/

#navboxcontainer {width:90%; margin:20px auto 0px; }
.navbox {max-width:260px;  margin:4px auto; text-align:center; font-variant:small-caps; font-size:1.3em; font-weight:100; border-top:3px double #f9f8f6; border-bottom:3px double #f9f8f6; background:#dfdcdb;}	
.nbx {display:block; padding:7px 0px 12px;}  /* display the link ~a~  as block makes whole box clickable */
.navbox a:link, .navbox a:visited {text-decoration:none; border-bottom:none;}
.navbox a:visited {color:#8e605b;}
.navbox a:active {color:#fff; background: #aaa49e;}

#submenu a:link {color:#dfdcdb; line-height: 1.8em;} 
#submenu a:visited {color:#d5d5d5;}
#submenu a:hover, #submenu a:active {border-top:4px double ; border-bottom:4px double; color:#fff;}
#submenu {margin:0px auto 20px; text-align:center; font-size:0.6em;}
#submenu a {font-size:1.8em;}


/* ........................................................... INCLUSION ITEMS .......................................... */

.lBx {display:none; position:fixed; overflow:auto; z-index:800; top:0; right:0; bottom:0; left:0;}
.lBx {background:rgba(0,0,0,.7); text-align:center;}

.lBx-img {box-sizing:border-box; overflow:auto; top:20px; right:0; bottom:0; left:0; margin-top:20px;  border:10px solid #000;}
.lBx > .exit {margin:-5px -10px 10px 0;}

/* ---  javascript classes --- */
.noScr {overflow:hidden;}
.dB {display:block;}
.dN {display:none;}



/*....................... LEFT and RIGHT CAPTION IMAGE....... */
.leftimg, .rightimg {max-width:240px; margin:0 0 10px 0;}
.leftimg img, .rightimg img {border:0;}
.leftimgtext, .rightimgtext {margin:5px 10px 10px 0;}


/*...................LEFT and RIGHT IMAGE UNRESTRICTED.........*/
img.left, img.right {display:block; margin:0 15px 15px 0;}


/*......................LONG TEXT GALLERY............*/
.ltg {float:left; margin-bottom:15px; padding:15px; border:1px dashed  #5b5447;}
.ltg img {display:block; margin:0 auto 10px ;}
.ltg h3 {margin-top:0;}
.ltg p {margin-top:0;}


/* …………………GALLERY PANEL ………….*/
.gal_intro {box-sizing:border-box; margin:0 auto 10px;}
.gal_intro img {box-sizing:border-box; padding: 5px; margin:0 auto; display:block; border:solid #f9f8f6 1px;}
.galpan {margin:20px auto 0; padding:20px; background:#aaa49e; color:#f9f8f6;}
.galpan h2 {color:#f9f8f6; text-align:center;}

/*......................CAPTION GALLERY..........*/
.previewwrapper {height:140px; }
.preview {height:140px; width:100px; float: left; margin:8px 8px 7px 0; padding:4px; }
.previewtext {margin: 3px;}
.preview img {height:82px;width:98px; padding:4px; border:1px solid #f9f8f6;}

/* ..........................CALLOUT .........*/
.callout {max-width:200px; float:right; margin:0 0 15px 15px; padding:15px 30px;}
.callout img {float:left; margin: 0 20px 10px 0;}

/* ..........................SALES PAGE CALLOUT .........*/
.scallout {max-width:400px; float:left; margin:0 15px 15px 0; padding:30px;}
.scallout img {float:right; margin: 0 0 10px 20px;}


/* ---------------end GLOBAL and MICRO -----------------*/




/* --------------------------------------MQ  MINI min 310px -------------------------------------------------------------------------------------*/

/* Mini screen! */ @media screen and (min-width: 310px) {

/*...........................PAGE ELEMENTS  ..........................*/
#container {margin: 0 auto;}
#main {margin:7px auto 10px ;}

#header {width: 100%; height:134px;  margin:auto; background: url('shared/bar2.png') repeat-x  center; }
#hdlink {width: 100%; height:150px; background:url('shared/ke2.png') center no-repeat; }  

#navboxcontainer {width:100%; margin-top:20px;}

} /* ---------------end MQ MINI ---------------------*/




/* ----------------------------------MQ  MEDIUM min 640px ------------------------------------------------------------------------------------*/

@media screen and (min-width: 640px) 
{

h1, h2, h3, h4 {text-align:left;}

/*.............................PAGE ELEMENTS …………….*/

#container {width:98%;z-index:-1; margin:auto;}
#wrapper {width:100%; z-index:3;}
#main {width:auto; margin:30px 20px 0 160px; padding:0px 10px 10px 0px;}


/*..................................MENU....................................*/

#navboxcontainer {height:auto; width:120px; position:absolute; margin-left:20px; top:130px; border:none;}
.navbox { margin:16px auto; background:none; text-align:left; border:none;}
.nbx {display:inline; padding:4px 0px; }
.navbox a:hover, .navbox a:active {border-top:4px double; border-bottom:4px double; }

#submenu a:link {color:#dfdcdb; line-height: 1.8em;} 
#submenu a:visited {color:#d5d5d5;}
#submenu a:hover, #submenu a:active {border-top:4px double ; border-bottom:4px double; color:#fff;}
#submenu {margin:0px auto 20px; text-align:center; font-size:0.6em;}
#submenu a {font-size:1.8em;}



/* .......................... INCLUSION ITEMS ................................ */


/*....................... LEFT CAPTION IMAGE....... */
.leftimg {float:left; max-width:240px; margin:5px 15px 10px 0;}
.leftimg img {border:0;}
.leftimgtext {margin:5px 10px 10px 0;}

/*.....................RIGHT CAPTION IMAGE....... */
.rightimg {float:right; max-width:240px; margin:5px 0 10px 15px;}
.rightimg img {border: 0;}
.rightimgtext {margin:5px 10px 10px 0;}


/*...................LEFT IMAGE UNRESTRICTED.........*/
img.left {float:left; margin:0 15px 15px 0;}

/*...................RIGHT IMAGE UNRESTRICTED.........*/
img.right {float:right; margin:0 0 15px 15px;}

/*......................LONG TEXT GALLERY............*/
.ltg {margin-bottom:15px; padding:30px 35px 20px; border:1px dashed  #998e79;}
.ltg img {display:inline; float:left; margin: 0 20px 10px 0;}

/* …………………GALLERY PANEL ………….*/
.galpan {padding:30px; }


/* ..................CALLOUT SHADOW .......... */
.callout, .scallout {border:1px solid #d9d1bb;
-moz-box-shadow: 1px 1px 10px #c0b89c;              
-webkit-box-shadow: 1px 1px 10px #c0b89c;
box-shadow: 1px 1px 10px #c0b89c;}


}   /* ---------------END MQ  MEDIUM -------------*/




/* --------------------------MQ  LARGE min 980px-------------------------------
--------------------------------------------------------------------------------*/

/* Desktop */ @media screen and (min-width: 980px) {

h1 {font-size:2.0em;}
h3 {font-size:1.3em;}
h4 {font-size:1.2em;}

/*...............................PAGE ELEMENTS …………………..*/

body {background:#72685f url('shared/mottled.png') repeat-x top;}
#container {width:960px;}
#main {width:660px; margin:220px 0 0 220px; padding:40px 10px 10px 0px; }

#header {width: 960px; height:260px;  margin:auto; position:absolute; top:0; background:#f9f8f6 url('shared/banner.jpg') center no-repeat;}
#hdlink {height:200px; background:none; }  

/*………….. MENU …………….*/

#navboxcontainer {width:120px; height:300px; position:absolute; z-index:4; margin-left:60px;top:260px; }  

.navbox {height:30px; width: 110px; margin:5px auto; }
.nbx:active, .nbx:hover {background:#f4f4f4}

/* ................end MENU ………… */

/* …… INCLUSION ITEMS ……..*/
.galpan { padding-top:45px; }
.gal_intro img { margin:0 auto 40px; }

/*......................CAPTION GALLERY..........*/
.preview {margin:8px 10px 7px 0; }


}  /* -----------------------end MQ LARGE -----------------------------*/