/*  
lisa
*/

/*
default: #edf0f3
bio: #b29d17
duo: #b2293e
artists: #b535b1
story: #34adb6
news: #16b656
*/

/* HTML Reset
--------------------------------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

:focus { outline: 0; }

body { line-height: 1; color: black; background: white; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }



/* DEFAULTS
--------------------------------------------------------------------------*/
.gainlayout { min-height: 0; }

html { overflow-y: hidden; overflow-x: hidden; }

* { margin: 0; padding: 0; border: none; }

body { font: normal 62.5%/1.25em Helvetica, Arial, Verdana, sans-serif; color: #edf0f3; background: #000000; }

strong, b { font-weight: bold; }

em { font-style: italic; }

h1 { margin: 0 0 5px 0; padding: 0; font: bold 2em/1.25em Helvetica, Arial, sans-serif; color: #FFFFFF; }

h2 { margin: 0 0 5px 0; padding: 0; font: bold 1.8em/1.25em Helvetica, Arial, sans-serif; color: #FFFFFF; }

h3 { margin: 0 0 5px 0; padding: 0; font: normal 1.6em/1.25em Helvetica, Arial, sans-serif; color: #FFFFFF; }

h4 { margin: 0 0 5px 0; padding: 0; font: normal 1.4em/1.25em Helvetica, Arial, sans-serif; color: #FFFFFF; }

h5 { margin: 0 0 5px 0; padding: 0; font: bold 1.2em Helvetica, Arial, sans-serif; color: #36332C; text-transform: uppercase; }

p { margin: 0 0 10px 0; font: normal 1.2em/1.25em Helvetica, Arial, sans-serif; color: #FFFFFF; }

a:focus { outline: none; }

a:link, a:visited { color: #888A8C; text-decoration: none; }

a:hover, a:active { color: #FFFFFF; text-decoration: none; }



/* MISC
--------------------------------------------------------------------------*/
.clear { clear: both; }

.fix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.fix { display: inline-block; }

* html .fix { height: 1%; }

.fix { display: block; }

#layer { position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; background: url(../img/layer.html) repeat; z-index: 9; }



/* TOPBAR
--------------------------------------------------------------------------*/
#topbar { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; height: 30px; background: #000000; padding: 0 0 0 210px; z-index: 300; list-style: none; }

#bio #topbar { background: #b29d17; }

#duo #topbar { background: #b2293e; }

#artists #topbar { background: #b535b1; }

#story #topbar { background: #34adb6; }

#news #topbar { background: #16b656; }

#topbar li { float: left; text-transform: uppercase; font-size: 16px; line-height: 30px; margin: 0 40px 0 0; }

#topbar li a { text-indent: -999px; color: #FFF; opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; }

#topbar li a.alert { color: red; }

#topbar li a span { opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; }

#topbar li a:hover { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; }

#topbar li ul li { padding-top: 3px; margin: 0 5px 0 0; }

#topbar li.title { opacity: 0.7; filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; padding: 0; }



/* INFOBAR
--------------------------------------------------------------------------*/
#infobar { position: absolute; width: 150px; height: 100%; top: 30px; left: 60px; z-index: 99; font-size: 16px; }

#infobar li { margin: 2px 0 0 0; background: #000; }

#infobar .logo h1 { height: 120px; background: url(../img/marios-logo.png) no-repeat; text-indent: -9999px; margin: 0; padding: 0; }

#infobar .logo h1 a { height: 120px; width: 150px; display: block; }

#infobar h2 { font-style: italic; font-size: 16px; padding: 0 10px; color: #16adb6; }

#bio #infobar h2 { color: #b29d17; }

#duo #infobar h2 { color: #b2293e; }

#artists #infobar h2 { color: #b535b1; }

#story #infobar h2 { color: #34adb6; }

#news #infobar h2 { color: #16b656; }

#infobar h2 span { font-style: italic !important; font-size: 16px; }

#infobar .details { height: 104px; padding: 6px 0 0; overflow: hidden; }

#infobar .details p { font-size: 16px; padding: 0 10px; margin-bottom: 3px; line-height: 16px; }

#infobar .nav { background: transparent; }

#infobar .nav li { margin: 2px 0 0 0; background: #000; height: 35px; width: 150px; }

#infobar .nav li a { width: 150px; margin: 0; padding: 0; height: 35px; display: block; }

#infobar .nav li a img { width: 150px; height: 35px; margin: 0; padding: 0; }

#infobar .nav li.nav-bio:hover { background: #b29d17; }

#infobar .nav li.nav-duo:hover { background: #b2293e; }

#infobar .nav li.nav-artists:hover { background: #b535b1; }

#infobar .nav li.nav-story:hover { background: #34adb6; }

#infobar .nav li.nav-news:hover { background: #16b656; }

#infobar .nav li.nav-facebook:hover { background: #3b5998; }

#bio #infobar .nav li.nav-bio { background: #b29d17; margin-left: -10px; }

#bio #infobar .nav li.nav-bio a:hover { cursor: default; }

#duo #infobar .nav li.nav-duo { background: #b2293e; margin-left: -10px; }

#duo #infobar .nav li.nav-duo a:hover { cursor: default; }

#artists #infobar .nav li.nav-artists { background: #b535b1; margin-left: -10px; }

#artists #infobar .nav li.nav-artists a:hover { cursor: default; }

#story #infobar .nav li.nav-story { background: #34adb6; margin-left: -10px; }

#story #infobar .nav li.nav-story a:hover { cursor: default; }

#news #infobar .nav li.nav-news { background: #16b656; margin-left: -10px; }

#news #infobar .nav li.nav-news a:hover { cursor: default; }

#infobar .signup { padding: 5px 0; }

#infobar .signup form { padding: 0 10px; }

#infobar .signup input { background: #20252a; color: #989b9e; width: 122px; font-size: 9px; padding: 3px 4px; margin-bottom: 5px; text-align: left; }

#infobar .signup .submit { background: #2f373e; width: 100%; }

#infobar .shoutout { width: 150px; height: 55px; }

#infobar .shoutout a { width: 150px; height: 55px; display: block; }

#infobar .shoutout a img { width: 150px; height: 55px; display: block; }

#infobar .credits { background: #000; opacity: 0.5; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; color: #fff; font-size: 7px; text-transform: uppercase; width: 130px; position: absolute; bottom: 30px; padding: 6px 10px 8px; line-height: 10px; }

#infobar .credits a { color: #FFF; }



/* SLIDER
--------------------------------------------------------------------------*/
#slider { height: 1200px !important; margin: 0; padding: 0; overflow: hidden; z-index: 1; }

#slider ul { height: 1200px; width: 100%; overflow: hidden; }

#duo #slider ul { width: 100%; overflow: hidden; }

#slider ul li { height: 1200px; position: relative; float: left; margin: 0; z-index: 1; padding-top: 30px;}

#slider-controls { position: fixed; top: 350px; width: 100%; z-index: 8000; }

#slider-controls a { display: block; position: absolute; top: 0; width: 55px; height: 55px; text-indent: -9999px; overflow: hidden; z-index: 8001; }

#slider-controls a.prev { left: 0; background: url(../img/arrow-left.png) center center no-repeat; }

#slider-controls a.next { right: 0; background: url(../img/arrow-right.png) center center  no-repeat; }

img.preload, div.content-default { visibility: hidden; }

.content-default { position: absolute; width: 300px; top: 90px; left: 220px; background: url(../img/bg-default.png) repeat; z-index: 9999; overflow: hidden; padding-bottom: 10px;}

#artists .content-default { background: url(../img/bg-artists.png) repeat; }

#story .content-default { background: url(../img/bg-story.png) repeat; }

#bio .content-default { background: url(../img/bg-bio.png) repeat; }

#news .content-default { background: url(../img/bg-news.png) repeat; }

.content-default h2 { width: 260px; padding: 18px 20px 6px; margin: 0; line-height: 19px; font-size: 24px; color: #edf0f3; color: #000; font-style: italic; text-transform: uppercase; }

#homepage .content-default h2 { color: #edf0f3; }

.content-default p { font-size: 13px; color: #edf0f3; padding: 0 20px 0; }

.content-default p span { color: #000; }

.content-default a, .content-default a:visited { line-height: 10px; background: #FFF; color: #000; text-decoration: none; padding: 0 3px 4px; }

#news .content-default a, #news .content-default a:visited { font-size: 10px; line-height: 9px; font-weight: bold; background: #FFF; color: #16b656; text-decoration: none; padding: 4px; text-transform: uppercase; margin-top: 7px; display: inline-block;  }

.content-default a:hover, .content-default a:active { color: #FFFFFF; }

.loader { position: absolute; top: 350px; left: 49%; width: 35px; height: 35px; background: url(../img/loader.gif) center center no-repeat; z-index: 0; }



/* POPUP HUDS
--------------------------------------------------------------------------*/
#hud { background: transparent; }

#hud h2 { font-size: 22px; padding: 0 20px; }

#hud h3 { font-size: 16px; margin-top: 20px; color: #bbbec4; padding: 0 20px; margin-bottom: 1px;}

#hud h4 { font-size: 11px; font-weight: bold; margin-bottom: 10px; color: #34adb6; padding: 0 20px; text-transform: uppercase;}

#hud a { background: #FFF; font-weight: bold; color: #000; text-transform: uppercase; padding: 3px 5px; margin-left: 20px; }

#specials, #map, #shoutout { padding: 15px 0 5px; }

#specials .description { font: italic normal 13px/16px Georgia, sans-serif; font-style: italic; margin-bottom: 1px; background-image: url(../img/specials-divider.png); background-repeat: no-repeat; background-position: 20px bottom; padding: 0 20px 5px; }

#specials .price { font: italic 10px/10px Georgia, sans-serif; font-style: italic; margin-bottom: 15px; color: #666; padding: 0 20px; }

#map img { margin-bottom: 15px; }

#map p { font-size: 13px; padding: 0 20px; }

#map-embed { margin: 20px 0 10px; }

#shoutout { width: 100%; overflow: hidden; }
#shoutout h2.instructions { color: red; font-size: 16px; }
#shoutout h4 { margin-bottom: 3px; }
#shoutout p { padding: 0 20px; }
#shoutout ul { width: 100px; float: left; padding: 3px 20px 10px; }
#shoutout li { margin-bottom: 3px; }



/* duo PAGE
--------------------------------------------------------------------------*/
#duo { background: #000 url(../images/duo-bg.jpg) repeat-x; }

#duo #slider ul li { position: relative; float: left; margin: 0; z-index: 1; width: 450px; overflow: hidden; margin: 154px 0 0 230px; }

#duo #slider ul li .content { margin: 0; padding: 20px 25px; z-index: 500; background: url(../img/bg-duo.png) repeat; min-height: 380px;}

#duo #slider ul li .content p { font-size: 13px; }

#duo .content img { max-height: 85px; margin-bottom: 15px; opacity: 0.4; filter: alpha(opacity=40); -moz-opacity: 0.4; -khtml-opacity: 0.4;}

#duo .content img.intro { width: 391px; max-height: 257px ;margin-bottom: 15px; opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; border: 4px solid #ca7b7e; }

#duo .content h3 { text-transform: uppercase; font-size: 11px; margin: 0; }

#duo .content p.favourite { font-size: 11px; margin: 0; }

#duo .content a, #duo .content a:visited { font-size: 9px; line-height: 9px; font-weight: bold; background: #FFF; color: #b2293e; text-decoration: none; padding: 4px; text-transform: uppercase; margin-top: 10px; display: inline-block;}

/* background image loader */
#loader { position: fixed; top: 0; left: 0; }



/* UPGRADE
--------------------------------------------------------------------------*/
#upgrade { background: #000; color: #FFF; width: 100%; height: 100%; text-align: center; }

#upgrade a { color: #777; text-decoration: none; }

#upgrade a:hover { color: #FFF; text-decoration: none; }

#upgrade #content { width: 350px; margin: 0 auto; margin-top: 50px; overflow: hidden; text-align: center; position: relative; letter-spacing: 1px; padding-bottom: 50px; font: 10px/1.4 arial,sans-serif; }

#upgrade h1 { background: #000 url(../img/marios-logo.png) no-repeat; text-indent: -9999px; width: 150px; height: 120px; overflow: hidden; margin: 0 auto 40px; }

#upgrade h2 { text-transform: uppercase; }

#upgrade p { text-align: center; margin-bottom: 20px; font-weight: normal; }

#upgrade p.info { text-transform: uppercase; font-size: 12px; font-weight: bold; }

#upgrade a.block { text-transform: uppercase; font-size: 11px; background: #FFF; padding: 2px 4px; color: #000; }

#upgrade hr { border: none; color: #777; background-color: #333; height: 1px; width: 50%; margin: 0 auto; margin-bottom: 18px; }





/**** Speech Bubble Icons *****/
#content-bubble {
  position: fixed; top: 230px; right: 155px; z-index: 8000; padding-left: 2.0em;}
  
#content-bubble .point {
  width: 0;
  height: 0;
  position: absolute;
  top: 10.5em;
  left: 11em;
  display: block;
  border-right: 1.45em solid #128f96; 
  border-bottom: 1.45em solid #FFF; /* IE fix */
  border-bottom: 1.45em solid rgba(0,0,0,0); 
  overflow: hidden; /* IE fix */ }
 
#content-bubble .bubble {
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  width: 8em;
  background: #128f96;
  -moz-border-radius: 0.75em;
  -webkit-border-radius: 0.75em;
  border-radius: 0.75em;
  padding: 10px;
  font-size: 17px;
  text-transform: uppercase; }
  
#content-bubble {
  height: 1.5em;
  width: 0; }