html
{
    background-color:       #222;
    color:                  #000;
}

body
{
    /*background:             url('../images/bg-grid60.png') repeat top left;*/
    background-color:       #fff;
    color:                  #000;
    font-family:            Helvetica, Verdana, Arial, serif;
    font-size:              0.8em;
    margin:                 0 auto;
    padding:                0;
}

body:after
{
    clear:                  both;
    content:                "";
    display:                block;
}



div#header
{
    background:             url('../images/headerbg.png') repeat-x;
    background-color:       #600;
    height:                 250px;
    position:               relative;
    width:                  100%;
    z-index:                1000;
}

div#header div#header-content
{
    background-color:       transparent;
    margin:                 0 auto;
    padding:                40px 10px 0;
    position:               relative;
    width:                  940px;
    z-index:                1200;
}

div#header div#header-shadow
{
    background:             url('../images/headershadow.png') repeat-x;
    height:                 30px;
    position:               absolute;
    top:                    250px;
    width:                  100%;
    z-index:                1100;
}

div#header img#biplane
{
    left:                   600px;
    position:               absolute;
    top:                    10px;
}

div#header img#thumbsup
{
    left:                   650px;
    position:               absolute;
    top:                    10px;
}

div#header a
{
    background-color:       transparent;
    text-decoration:        none;
}



div#content
{
    margin:                 0 auto;
    padding:                100px 0 50px;
    width:                  960px;
}

div#content:after
{
    clear:                  both;
    content:                "";
    display:                block;
}



div#footer
{
    color:                  #ccc;
    background-color:       #222;
    min-height:             30px;
    position:               relative;
    width:                  100%;
}

div#footer:after
{
    clear:                  both;
    content:                "";
    display:                block;
}

div#footer div#footer-content
{
    margin:                 0 auto;
    padding:                50px 0 0 0;
    width:                  960px;
}

div#footer-content:after
{
    clear:                  both;
    content:                "";
    display:                block;
}

div#footer div#footer-shadow
{
    background:             url('../images/footershadow.png') repeat-x;
    height:                 30px;
    position:               absolute;
    top:                    0;
    width:                  100%;
    z-index:                1100;
}

div#footer h3
{
    margin-bottom:          1em;
}



iframe
{
    display:                none;
}




/**************
 * Navigation *
 **************/
div#nav
{
    background-color:       transparent;
    color:                  #000;
    float:                  left;
    font-family:            Georgia, "Times New Roman", serif;
    font-size:              1.5em;
}

/* navigation list styling */
div#nav ul
{
    overflow:               hidden;
    margin:                 0;
    padding:                0;
    width:                  100%;
}

div#nav li
{
    background-color:       #999;
    clear:                  both;
    display:                block;
    list-style:             none;
    margin:                 0;
    padding:                0;
    text-align:             right;
    width:                  100%;
}

div#nav li:hover a:before
{
    content:                "« ";
}

div#nav li.current a:before
{
    content:                "» ";
}

div#nav li a
{
    background-color:       #000;
    display:                block;
    margin:                 0 0 0 -0.5em;
    padding:                0.25em 0.5em 0.25em 0;
    width:                  100%;
}

div#nav li a:link,
div#nav li a:visited
{
    background-color:       #000;
    color:                  #fff;
    text-decoration:        none;
}

div#nav li.red a
{
    color:                  #f00;
}

div#nav li.blue a
{
    color:                  #06f;
}

div#nav li.green a
{
    color:                  #0c0;
}

div#nav li.yellow a
{
    color:                  #ff0;
}

div#nav li.purple a
{
    color:                  #f0f;
}

div#nav li.orange a
{
    color:                  #f60;
}

div#nav li a:hover,
div#nav li a:active
{
    background-color:       #666;
    color:                  #fff;
    text-decoration:        none;
}



/***************
 * Text Styles *
 ***************/

/* regular paragraph */
p
{
    margin:                 0;
    padding:                0;
}

p + p
{
    margin-top:             1em;
}

h1
{
    font-size:              2em;
    font-weight:            bold;
    margin:                 0 0 0.25em 0;
}

h2
{
    font-size:              1.5em;
    font-weight:            bold;
    margin:                 0 0 0.33em 0;
}

h3
{
    font-size:              1.1em;
    font-weight:            bold;
    margin:                 0 0 0.33em 0;
}

* + h1,
* + h2,
* + h3
{
    margin-top:             1em;
}

.error
{
    color:                  #900;
}

/* date field for news */
.date
{
    color:                  #666;
    font-size:              1.25em;
}

/* user comment */ 
div.comment
{
    border-top:             1px solid #ccc;
    margin:                 1em 0 0 0;
    padding:                1em 0 0 0;
}

div.comment p.author
{
    font-weight:            bold;
}

div.comment p.author + p
{
    margin-top:             0;
}



/*********
 * Lists *
 *********/

/* regular joe list */
ul
{
    margin:                 1em 0;
    padding:                0;
}

ol
{
    margin:                 1em 0 1em 2em;
    padding:                0;
}

ul li
{
    font-size:              1em;
    list-style:             square inside;
    margin:                 0;
    padding:                0;
}

ol li
{
    font-size:              1em;
    list-style:             decimal outside;
    margin:                 0;
    padding:                0;
}



/*********
 * Media *
 *********/

/* regular image */
img
{
    border:                 none;
}



/*********
 * Links *
 *********/
a:link,
a:visited,
.link
{
    background-color:       transparent;
    color:                  #06f;
    cursor:                 pointer;
    text-decoration:        none;
}

a:hover,
a:active,
.link:hover,
.link:active
{
    background-color:       #06f;
    color:                  #fff;
    text-decoration:        none;
}



/***************
 * Grid System *
 ***************/

div.span
{
    float:                  left;
    margin:                 0 10px 50px 10px;
    padding:                0;
}

div.col
{
    float:                  left;
    margin:                 0;
    padding:                0;
}

div.span:after,
div.col:after
{
    clear:                  both;
    content:                "";
    display:                block;
}

div.span.w12
{
    width:                  940px;
}

div.span.w8
{
    width:                  620px;
}

div.span.w7
{
    width:                  540px;
}

div.span.w6
{
    width:                  460px;
}

div.span.w5
{
    width:                  380px;
}

div.span.w4
{
    width:                  300px;
}

div.span.w3
{
    width:                  220px;
}

div.span.w2
{
    width:                  140px;
}

div.span.w1
{
    width:                  60px;
}

div.span.first
{
    clear:                  left;
}

div.span.last
{
    clear:                  right;
}

div.col.w12
{
    width:                  960px;
}

div.col.w8
{
    width:                  640px;
}

div.col.w7
{
    width:                  560px;
}

div.col.w6
{
    width:                  480px;
}

div.col.w5
{
    width:                  400px;
}

div.col.w4
{
    width:                  320px;
}

div.col.w3
{
    width:                  240px;
}

div.col.w2
{
    width:                  160px;
}

div.col.w1
{
    width:                  80px;
}

div.col.first
{
    clear:                  left;
}

div.col.last
{
    clear:                  right;
}



/*** Generic Box ***/
/* other boxes (text, image, etc.) should use this class */

div.box
{
    overflow:               hidden;
    position:               relative;
}

div.box + div.box
{
    margin-top:             20px;
}



/*** Text Box ***/

div.box.text
{
    background-color:       rgba(255, 255, 255, 0.5);
    border:                 1px solid #000; /* #999 */
    color:                  black;
    font-size:              1em;
    overflow:               auto;
    padding:                9px;
}

div.box.text h1
{
    background-color:       #000; /* rgba(192, 192, 192, 0.5) */
    color:                  #fff; /* #000, #060 */
    font-size:              1.1em;
    font-weight:            bold;
    margin:                 -9px -9px 9px -9px;
    padding:                9px;
}

div.box.text.green
{
    border-color:           #060;
}

div.box.text.green h1
{
    background-color:       #060;
}

div.box.text.brown
{
    border-color:           #420;
}

div.box.text.brown h1
{
    background-color:       #420;
}

div.span.h4 div.box.text
{
    height:                 280px; /* 300px - 20px border, padding */
}



/*** Twitter Box ***/
div.twitter
{
    background-color:       #fff;
    border:                 1px solid #ccc;
    overflow:               visible;
    padding:                9px;
}

/* twitter link */
div.twitter div.bird
{
    float:                  right;
    margin:                 -15px -20px 0 0;
    padding:                0 0 0 1em;
}

div.twitter div.bird a
{
    background-color:       transparent;
    text-decoration:        none;
}



/*** Image Box ***/

div.box.image
{
    font-size:              0;
    overflow:               hidden;
}

/* fixed square dimensions for images */
div.box.image.w12
{
    height:                 940px;
}

div.box.image.w6
{
    height:                 460px;
}

div.box.image.w4
{
    height:                 300px;
}

div.box.image.w3
{
    height:                 220px;
}



/*** Hover Box ***/
/* within another box */

div.box div.hover
{
    background-color:       rgba(0, 0, 0, 0.5);
    cursor:                 pointer;
    height:                 160px;
    left:                   0;
    position:               absolute;
    top:                    0;
    visibility:             hidden;
    width:                  160px;
}

div.box:hover div.hover,
div.box div.hover:hover
{
    visibility:             visible;
}

div.box div.hover h1
{
    color:                  #fff;
    background-color:       transparent;
    border:                 none;
    font-size:              1em;
    font-weight:            bold;
    margin:                 0;
    padding:                10px;
}



/****************
 * Demo Section *
 ****************/

/* list of demos */
ul#demo-list
{
    /*border:                 1px solid #ccc;*/
    margin:                 0;
    padding:                0;
    position:               relative;
}

ul#demo-list li
{
    background-color:       #eee;
    color:                  #000;
    font-size:              1em;
    font-weight:            normal;
    height:                 1em;
    line-height:            1em;
    list-style:             none;
    margin:                 2px 0 0 0;
    opacity:                1;
    padding:                10px;
    position:               relative;
    z-index:                1;
}

ul#demo-list li:first-child
{
    margin-top:             0;
}

ul#demo-list li:hover
{
    background-color:       #fff;
    color:                  #000;
    cursor:                 pointer;
}

/* current track time */
ul#demo-list li span.time
{
    background-color:       transparent;
    bottom:                 10px;
    color:                  #999;
    position:               absolute;
    right:                  10px;
}

/* style for currently playing track */
ul#demo-list li.playing,
ul#demo-list li.playing:hover
{
    background-color:       #ddd;
    color:                  #006;
}

ul#demo-list li.playing span.time
{
    background-color:       transparent;
    color:                  #090;
}

/* style for paused track */
ul#demo-list li.paused span.time
{
    background-color:       transparent;
    color:                  #999;
}

/* style for loading track */
ul#demo-list li.loading span.time
{
    background-color:       transparent;
    color:                  #ccc;
    font-size:              0.8em;
    line-height:            100%;
}

/* draggable demos */
ul#demo-list li.drag
{
    opacity:                0.5;
    position:               absolute;
    z-index:                100;
}

ul#demo-list li.placeholder
{
    padding:                0 5px 0 30px;
}

ul#demo-list li div.drag
{
    background:             url('../images/layout/drag.gif') no-repeat center center;
    height:                 20px;
    left:                   4px;
    margin:                 0 0 5px 0;
    padding:                0;
    position:               absolute;
    top:                    4px;
    width:                  20px;
}

ul#demo-list li span.demo-rank
{
    display:                none;
}



/********************
 * Discography List *
 ********************/

/* list of albums */
ul#disco
{
    margin:                 0;
    padding:                0;
}

ul#disco li
{
    list-style:             none;
    margin:                 10px 0 0 0;
    position:               relative;
}

ul#disco li:after
{
    clear:                  both;
    content:                "";
    display:                block;
}

ul#disco li:first-child
{
    margin-top:             0;
}

ul#disco div.cover
{
    float:                  left;
    padding:                0 10px 0 0;
}

ul#disco li img
{
    height:                 72px;
    left:                   10px;
    position:               absolute;
    top:                    3px;
    width:                  72px;
}

ul#disco li a
{
    background:             url('../images/jewel.png') no-repeat 0 0;
    display:                block;
    float:                  left;
    height:                 82px;
    left:                   0;
    overflow:               hidden;
    position:               relative;
    text-indent:            -1000em;
    top:                    0;
    width:                  90px;
    z-index:                1;
}