/* CSS Document */

/* colors: 


*/


/* ---------------------- */
/* MFT Defaults
------------------------- */



/* ------------------------------------------------------------------------ */
/* START Layout
--------------------------------------------------------------------------- */

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body, body > form { height: 100%; /*overflow: auto;*/ }
body { background: #fff url('/images/mobile/pg-bak.jpg') no-repeat center bottom; min-width: 0; }
body,
button,
input,
select,
textarea { font-family: arial, sans-serif; font-size: 16px; }

div.slide-panel { display: none; position: absolute; width: 100%; }

div.mobile-siteContainer {  }
div.mobile-pageContainer {  }

div.mobile-header { position: relative; z-index: 2; display: inline-block; width: 100%; }

div.mobile-header ul { background: #4d4d4d url(/images/grad2-bot-shad.png) bottom repeat-x; font-size: 0; line-height: 0; }
div.mobile-header ul li { width: 33.333%; display: inline-block; *display: inline; vertical-align: middle; font-size: 15px; line-height: 3em; color: #ccc; }
div.mobile-header ul li.items {  }
div.mobile-header ul li a { display: block; *display: inline-block; color: #ccc; border-left: 1px solid #666; border-right: 1px solid #333; }
div.mobile-header ul li:first-child a { border-left: none; }
div.mobile-header ul li:last-child a { border-right: none; }
div.mobile-header ul li a:hover,
div.mobile-header ul li:hover > a,
div.mobile-header ul li.selected > a { background-color: #333; color: #ccc; font-weight: bold; }

	div.mobile-header .slide-panel { top: 3em; left: 0; background: #333 url(/images/grad2-bot-shad.png) center bottom repeat-x; border-bottom: 1px solid #888; color: #333; }
	div.mobile-header li.menu .slide-panel { padding: 0; border: none; }
	div.mobile-header ul li ul { background-color: #333; }
	div.mobile-header ul li ul li { line-height: normal; width: auto; display: block; border: none; border-bottom: 1px solid #4d4d4d; }
	div.mobile-header ul li ul li:first-child {  }
	div.mobile-header ul li ul li a { border: none; color: #ccc; background: url(/images/grad2-bot-shad.png) bottom repeat-x; padding: 1em 2em; }
	div.mobile-header ul li ul li a:hover { background-color: #777; color: #eee; }
		div.mobile-header ul li ul li ul { display: none; }

a.logo { display: block; background: url(/images/mobile-hdr-bak.jpg) center repeat-x; padding: 10px; text-align: center; float: none; margin: 0; }
a.logo { position: static; width: auto; height: auto; top: auto; left: auto; } /* undo main styles */
a.logo img { width: 100%; max-width: 209px; }

div.mobile-contentContainer { text-align: left; background: url(/images/gradient1.png) center top repeat-x; position: relative; display: inline-block; width: 100%; }
div.aside.mobile-col1 { width: 38.2%; /*golden ratio*/ float: left; }
div.section.mobile-col2 { width: 61.8%; width: 55.8%; float: right; background: #eee url(/images/gradient1.png) center 1px repeat-x; border: 1px solid #555; margin: 2% 1% 0; padding: 1em; overflow: hidden; }

div.mobile-col1 { background: #333 url(/images/grad2-bot-shad.png) bottom repeat-x; font-size: 17px; }

div.mobile-col1 a.slider-button { display: none; }
div.mobile-col1 div.slide-panel { display: block; position: static; }

div.mobile-col1 ul { overflow: auto; text-align: center; }
div.mobile-col1 ul li { border-top: 1px solid #ccc; }
div.mobile-col1 ul li a,
div.mobile-col1 ul.nav > li > span { display: block; color: #ccc; background: url(/images/grad2-bot-shad.png) bottom repeat-x; padding: 1em 2em; }
div.mobile-col1 ul li a.hover,
div.mobile-col1 ul li.selected a { background-color: #777; color: #eee; font-weight: bold; }
	div.mobile-col1 ul li ul { xxxdisplay: none; }
	div.mobile-col1 ul li ul li { border-top: 1px solid #4d4d4d; }
	div.mobile-col1 ul li ul li:first-child {  }
	div.mobile-col1 ul li ul li a {  }
	div.mobile-col1 ul li ul li a:hover {  }

h1 { text-shadow: 1px 1px 1px #eee; margin: 0 0 .5em; line-height: 1.1; }

div.mobile-footer { clear: both; color: #fff; position: relative; z-index: 1; margin: 4px 7px 2px 4px; padding-bottom: 10px;}
div.mobile-footer div.mobile-nav { margin: 1em 0; position: relative; }

div.mobile-footer ul {  }
div.mobile-footer ul li { display: inline-block; *display: inline; border-left: 1px solid #ccc; }
div.mobile-footer ul li:first-child { border: none; }
div.mobile-footer ul li.items {  }
div.mobile-footer ul li a { display: inline-block; padding: 0 1em; line-height: 3em; }
div.mobile-footer ul li a:hover,
div.mobile-footer ul li:hover > a,
div.mobile-footer ul li.selected > a { text-decoration: underline; }

div.mobile-footer .slide-panel { bottom: 3em; left: 0; background: #666 url(/images/grad1-top-shad.png) center top repeat-x; border-top: 1px solid #555; color: #333; }
		
div.mobile-footer p { font-size: .75em; margin: 0 1em; }
div.mobile-footer a { color: #fff; text-decoration: none;}

.email-widget-heading { display: none; }


/* ------------------------------------------------------------------------ */
/* START Custom Page Styles
--------------------------------------------------------------------------- */




/* ------------------------------------------------------------------------ */
/* START Responsive Mods
--------------------------------------------------------------------------- */

@media only screen and (max-width : 600px) { .slider-lg { min-height: 183px }; }

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {

/* search dropdown */	
div.search-widget-container { margin: .5em; }

/* left column */
div.mobile-col1,
div.mobile-col2 { width: auto!important; float: none!important; }

div.mobile-col1 { padding: 0 4em 0 1em; }

div.mobile-col1 div.slide-panel { display: none; position: absolute; }

div.mobile-col1 a.slider-button { display: block; color: #eee; line-height: 3em; }
div.mobile-col1 a.slider-button span.icon-menu { width: 3em; position: absolute; right: 0; border-left: 1px solid #444; padding: .65em; }
div.mobile-col1 a.slider-button span.icon-menu span { display: block; margin: 5px 0; height: 3px; background: #ccc; }

div.mobile-col1 .slide-panel { background: #333; position: absolute; top: 3em; left: 0; height: 100%; }


/* contact us page */
body.contact-us iframe,	
body.contact-us .contact-details { float: none; width: 100%; }
body.contact-us label { font-weight: normal; font-size: .8em; }

}

@media only screen 
and (max-width : 320px) {

/* photo gallery */
.pnlPhotos #gallery { margin: 0 -10% 0 -15%; }

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (max-width : 320px),
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {

/* remove left column 
div.aside.mobile-col1 { display: none; }
div.section.mobile-col2 { width: auto; float: none; padding: 1.5em; }*/

}


/* ------------------------------------------------------------------------ */
/* START Custom Module Styles
--------------------------------------------------------------------------- */

li.checkout-top span.item-count { display: inline-block; background: #fff; margin-right: .25em; color: #666; line-height: 1; padding: .25em .45em; font-weight: bold;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
	border-radius: 1em; /* future proofing */
	-khtml-border-radius: 1em; /* for old Konqueror browsers */
}
li.checkout-top a.button { background: #4d4d4d url(/images/grad2-bot-shad.png) bottom repeat-x; }

body.mobile div.announcem { margin-bottom: 1.5em; padding: 1.5em; background: #eee url(/images/grad2-top-hilight.png) repeat-x; border: 1px solid #ccc; }
body.mobile div.mailing-list { background: #999 url(/images/grad2-bot-shad.png) bottom repeat-x; padding: 1em; border-bottom: 1px solid #ccc; }


/* ---------------------- */
/* END Custom Module Styles
------------------------- */

/* mobile nav triggers*/
a.menu-toggle { display: inline-block; position: fixed; top: 0; left: 0; z-index: 10001; width: 100%; line-height: 50px; font-size: 16px; background: #000; background: url(/images/mobile/nav-bak.jpg); text-align: center; text-decoration: none; color: #fff; font-weight: bold; }
a.menu-toggle.active,
a.menu-toggle:hover { background: #666666; }
a.menu-toggle img { position: absolute; top: 16px; right: 16px; }
a.menu-toggle > span:before { content: "Menu"; }
a.menu-toggle.active > span:before { content: "close"; }

body { padding-top: 55px!important; }

#mobileNav { position: fixed; top: -1000px; left: 0; right: 0; opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; height: 0; padding: 0;  background: url(/images/trans80_000000.png); overflow: hidden;
             -webkit-transition: all .5s ease;
                -moz-transition: all .5s ease;
                -ms-transition: all .5s ease;
                 -o-transition: all .5s ease;
                    transition: all .5s ease; }
#mobileNav > ul { margin: 0; padding: 15px 0; max-width: 440px; margin: 0 auto; background: #000; list-style: none; overflow: hidden; }
#mobileNav ul li { background: url(/images/mobile/nav-bak-drop.jpg); }
#mobileNav ul li a { display: block; text-align: center; text-decoration: none; font-weight: bold; font-size: 16px; color: #fff; line-height: 40px; font-family: Arial, Helvetica, sans-serif; }
#mobileNav ul li.selected a,
#mobileNav ul li a:hover { background: #999999; color: #000; }
#mobileNav > ul > li > ul { margin: 0 10%; width: 80%; background: url(/images/trans60_000000.png); }

#mobileNav.active { top: 0; bottom: 0; padding: 60px 0; z-index: 10000; width: 100%; opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; height: auto; overflow: auto; }