/* ---------------------------------------------------------------------------
 * Mapify CSS
 * Copyright 2009, John Tajima
 * 
 * ---------------------------------------------------------------------------
 */
 
/* --------------------------------------------------------------------------------
 * Global Styles
 * --------------------------------------------------------------------------------
 */

*, body { font-family: 'Arial', helvetica, san-serif; xfont-size: 100%;}
h1, h2, h3 { font-family: 'Myriad Pro', helvetica, san-serif; }
h4, h5, h6 { font-family: 'Arial', helvetica, san-serif; color: #222;}
h1, h2, h3, h4 { color: #333;}
span.hint  { font-size: 11px; color: #666; }
p { color: #666; font-size: 100%;}
a       { color: #86c233; }
a:hover { text-decoration:underline; color: green;}
img { vertical-align: middle;}

div.tooltip { font-size: 11px; color: #000; padding: 1px 5px; border: 1px solid #000; background: #ffa;}

.error   {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice  {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

a.link {  padding: 2px 2px 2px 20px; margin: 2px; background-position: left center; background-repeat: no-repeat; background-attachment: scroll; }

ul.options-menu { margin: 0; padding: 0; list-style: none; }
ul.options-menu li { display: inline; padding: 0; margin: 0; }
ul.options-menu li.first:before { content: "" }
ul.options-menu li:before { content: "|"; color: #666; font-size: 11px; padding-right:3px;}

/* --------------------------------------------------------------------------------
 * Layout
 * --------------------------------------------------------------------------------
 */
div#adminbar { position: absolute; top: 0; left: 0; padding: 0; magin: 0; width: 100%; min-width: 980px; height: 24px; overflow: hidden; background: #ddd; border-bottom: 1px solid #dae0bf; }

div#header  { position: absolute; top: 25px; left: 0; padding: 0; margin: 0; width: 100%; min-width: 980px; height: 75px; overflow: hidden; background: #fff; }
div#subheader { position:absolute; top: 100px; left: 0; padding: 0; margin: 0; width: 100%; min-width: 980px; height: 25px; overflow:hidden; background: #dae0bf;}

div#sidebar { position: absolute; top: 125px; left:0px; bottom: 0px; width: 220px; overflow: hidden; overflow-y: auto; background: #eee; }
div#main    { position: absolute; top: 125px; left: 220px; right: 0px; bottom: 0px; min-width: 750px; background: #fff; overflow: auto; }

div#admin-panel { position: absolute; top: 0; right: 0; padding: 10px; }

div#main div.inner { padding: 10px; }
div#sidebar div.inner { padding: 10px 10px 20px;}


/* --------------------------------------------------------------------------------
 * Splash page
 * --------------------------------------------------------------------------------
 */
#splash { min-height: 500px; background: url(/images/splash/mapify-splash.jpg) top center no-repeat; border: 1px solid #ccc; margin-top: 2em; margin-bottom: .5em; -moz-border-radius: 10px; -webkit-border-radius: 10px; }


/* login div */
div#login-form { padding: 10px; border: 1px solid #86c233; background: #ddeec6; margin: 10px auto; width: 300px; }
.splash input#shop { width: 200px; padding: 2px; border: 1px solid #bbb; font-size: 13px;}

.splash div#footer { margin-bottom: 2em; }
.splash div#footer a { color: #999; }
.splash ul.footer-list { list-style:none; margin: 0; padding: 0; }
.splash ul.footer-list li { display:inline; color: #999; margin: 0; padding-right: 1em; font-size: 11px;}
/*.splash ul.footer-list li:before { content: "| "; color: #ccc; font-size: 11px; }*/
.splash #splash strong { color: #000;}

/* --------------------------------------------------------------------------------
 * Footer Splash page
 * --------------------------------------------------------------------------------
 */
 
/* --------------------------------------------------------------------------------
 * Admin bar
 * --------------------------------------------------------------------------------
 */
#adminbar a { color: #33f; text-decoration: none;}
#adminbar a:hover { color: #00f; text-decoration:underline;}

/* --------------------------------------------------------------------------------
 * subhead bar
 * --------------------------------------------------------------------------------
 */
#subheader a { color: #333; }
#subheader a:hover { color: #000; text-decoration: underline; }
#subheader .side { width: 220px; height: 100%; background: #ccd8b2; position: absolute; left: 0; top: 0; border-right: 1px solid #fff;}
#subheader .main { position: absolute; left: 220px; top: 0; min-width: 750px; right: 0;}

/* --------------------------------------------------------------------------------
 * View page
 * --------------------------------------------------------------------------------
 */
 
/* status message */
p#status { color: #444; font-weight: bold;}
p#status a { color: #00f; text-decoration:underline; font-size: 11px;}
p#status a:hover { color: #00f; text-decoration:underline;}
div.map-frame { width:100%; min-width: 750px; height: 100%; position:absolute; top: 0; left: 0;  background: #d6dde5; overflow: hidden;}
#map { width: 100%; height: 100%; }

/* alert div */
div.alert { position: absolute; top: 38%; left: 25%; width: 48%; text-align:center; padding: 1%; text-align:center; 
            background:#fff; height: 2em; border: 3px solid #666;
            -moz-border-radius: 10px; -webkit-border-radius: 10px; filter: alpha(opacity = 85); opacity: .85; 
}
div.alert img.icon { position: absolute; left: 1%; top: 10px }
span#loading-msg {}

div.header-menu { padding: 5px;}

/* --------------------------------------------------------------------------------
 * Order View page
 * --------------------------------------------------------------------------------
 */
div.order { width: 720px; padding: 0; margin: 0; }
div.order p { margin: 0;}
div.order p.name { color: #000;}

#facebox table.invoice { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 11px;}
#facebox table.invoice th { background: #ccd8b2; padding: 2px 5px; border-bottom: 1px solid #333;}
#facebox table.invoice td { padding: 5px 5px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
#facebox table.invoice .even { background: #fff; }
#facebox table.invoice .odd  { background: #f0f0f0; }
#facebox table.invoice .qty { text-align: center; width: 5%;}
#facebox table.invoice .product { text-align: left; width: 65%; padding-left: 20px; }
#facebox table.invoice .price  { text-align: right; with: 10%; }
#facebox table.invoice tr.subtotal { background: #eff6d3; }
#facebox table.invoice tr.subtotal td {border:none; padding: 2px 5px;}
#facebox table.invoice tr.total { background: #f0f0f0; }
#facebox table.invoice tr.total td { color: #000; font-weight:bold; border-top: 1px solid #000; border-bottom: 2px solid #000;}
#facebox table.invoice tr.status   { background: #fff; }
#facebox table.invoice tr.status td { border: none; color: #666;}

/* --------------------------------------------------------------------------------
 * Sidebar
 * --------------------------------------------------------------------------------
 */
div#sidebar h1 {font-size: 18px;}
div#sidebar h2 {font-size: 14px;}
div#sidebar h3 {font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #333;}
div#sidebar h4 {font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #333; margin: 0;}
div#sidebar h5 {font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #333;}
div#sidebar h6 {font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #333; margin: 0;}
div#sidebar a { color: #444; text-decoration:underline;}
div#sidebar a:hover { color: #111; text-decoration: underline;}
div.sidebarnotes { position: fixed; display: block; bottom: 0px; padding: 5px 0; font-size: 11px; color: #999; border-top: 1px solid #ddd; width: 190px; background: #eee;}
div.sidebarnotes span { font-size: 11px; color: #999;}


ul.sidebar-menu { margin: 10px 0 20px; padding: 0; border-top: 1px solid #ddd; border-bottom: 1px solid #fff; list-style:none;}
ul.sidebar-menu li { border-top: 1px solid #fff; border-bottom: 1px solid #ddd; margin: 0; padding: 2px; line-height: 1.7em; }
ul.sidebar-menu li:hover { background: #ddd;}

li.address { font-size: 11px; color: #666; }
li.address p { margin: 0; line-height: 1.2em;}
li.address p.name { font-weight: bold; color: #111; line-height: 1.7em;}
li.address p.address { margin-left: 20px;}
/* --------------------------------------------------------------------------------
 * Map styles
 * --------------------------------------------------------------------------------
 */
div#ds-h { position:absolute; top:0; left: 0; width: 100%; z-index: 100 }
div#ds-v { position:absolute; top:0; left: 0; height: 9999px; z-index: 100 }
div.fader .o1 { opacity: 0.10; filter: alpha(opacity=10);}
div.fader .o2 { opacity: 0.08; filter: alpha(opacity=8);}
div.fader .o3 { opacity: 0.06; filter: alpha(opacity=6);}
div.fader .o4 { opacity: 0.04; filter: alpha(opacity=4);}
div.fader .o5 { opacity: 0.02; filter: alpha(opacity=2);}
div.fader .v1 { width: 1px; height: 9999px;}
div.fader .v2 { width: 2px; height: 9999px;}
div.fader .v3 { width: 3px; height: 9999px;}
div.fader .v4 { width: 4px; height: 9999px;}
div.fader .v5 { width: 5px; height: 9999px;}
div.fader .h1 { height: 1px; width: 100%;}
div.fader .h2 { height: 2px; width: 100%;}
div.fader .h3 { height: 3px; width: 100%;}
div.fader .h4 { height: 4px; width: 100%;}
div.fader .h5 { height: 5px; width: 100%;}
div.fader .ds { background:#000000; overflow:hidden; position:absolute; top:0; left: 0; z-index:50;}
/* --------------------------------------------------------------------------------
 *  Marker & HTML Bubble
 * --------------------------------------------------------------------------------
 */
div.bubble { min-width: 300px;}
div.bubble .name_line, 
div.bubble .address_line, 
div.bubble .city_line, 
div.bubble .country_line { margin: 0; } 
div.bubble .name_line { font-weight: bold; font-size: 14px;}
div.bubble ul.options-menu { border-top: 1px dotted #ccc;}