/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul {
}
/*
    Base text styles for common elements
*/

body
{
    font-family: Verdana, sans-serif;
    font-size: 8pt;
}

h1
{
}

h2
{
    font-size: 11pt;
    font-weight: bold;

    display: block;
    position: relative; /* fix IE6 */
    padding: 5px;

    text-align: left;
    /* width: 100%; */
    background-color: #6B82AB;
    color: white;

/*    letter-spacing: 0.2em;*/
}

h3
{
    font-weight: bold;
    margin-left: 5px;
    margin-top: 5px;
    font-size: 125%;
}

p
{
   	padding: 5px;
    line-height: 130%;
}

li
{
}

a:link
{
    text-decoration: none;
    color: navy;
}

a:visited
{
    text-decoration: none;
    color: navy;
}

a:hover
{
    text-decoration: underline;
}

a:active
{
}

/*
    Overall page layout
*/



/* Background */

body
{
    background: #738ebe url('/art/backgrounds/atmosphere2000.png') repeat-x top center;
}

/* Page header area */

div#header
{
    height: 130px;
}


/* Overall page container */

div#page-container
{
    width: 1000px;
    margin: 0 auto;
    position: relative;
}


/* Main content area */

div.main
{
    position: absolute;
    left: 240px;
    width: 520px;   /* Because IE6 does not like left and right being used together */
}


/* Side menus */

div.sidemenu-left, div.sidemenu-right
{
    position: absolute;
    width: 230px;
}

div.sidemenu-left
{
    left: 10px;
}

div.sidemenu-right
{
    right: 10px;
}
/*
    Overall page layout (for phone screens)
*/

@media (max-width:650px)
{

/* Background */

body
{
    background: #738ebe url('/art/backgrounds/atmosphere600.png') repeat-x top center;
}

/* Overall page container */

div#page-container
{
    width: 475px; /* change me! */
    margin: 0 auto;
    position: relative;
}

/* Page header area */

div#header
{
    height: 130px;
}


/* Main content area */

div.main, div.sidemenu-left, div.sidemenu-right
{
    left: auto;
    right: auto;
}

div.main
{
    position: relative;
    width: 100%;
}


/* Side menus */

div.sidemenu-left, div.sidemenu-right
{
    position: relative;
    width: 100%;
}

div.sidemenu-left
{
}

div.sidemenu-right
{
}


/* TEST */

div.big-display
{
    display: none;
}

}


@media (max-width:500px)
{

/* Overall page container */

div#page-container
{
    width: 98%; /* change me! */
}
}
/*
    Box styling
*/

.dialog {
 position:relative;
 margin:0px auto;
 min-width:8em;
 max-width:800px; /* based on image dimensions */
 color:#000;
 z-index:1;
 margin-left:25px; /* default, width of left corner */
 margin-bottom:0.5em; /* spacing under box */

/*
    background-color: white;
    border-radius: 10px;
    box-shadow: 10px 10px 20px #222;
*/
}

.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
 background:url(/art/box.png) no-repeat top right;
 _background-image:url(/art/box.gif);
 /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='/art/box.png');*/
}

.dialog .content {
 position:relative;
 zoom:1;
 _overflow-y:hidden;
 padding:0px 12px 0px 0px;
}

.dialog .t {
 /* top+left vertical slice */
 position:absolute;
 left:0px;
 top:0px;
 width:25px; /* top slice width */
 margin-left:-25px;
 height:100%;
 _height:1600px; /* arbitrary long height, IE 6 */
 background-position:top left;
}

.dialog .b {
 /* bottom */
 position:relative;
 width:100%;
}

.dialog .b,
.dialog .b div {
 height:30px; /* height of bottom cap/shade */
 font-size:1px;
}

.dialog .b {
 background-position:bottom right;
}

.dialog .b div {
 position:relative;
 width:25px; /* bottom corner width */
 margin-left:-25px;
 background-position:bottom left;
}

.dialog .hd,
.dialog .bd,
.dialog .ft {
 position:relative;
}

.dialog .wrapper {
 /* extra content protector - preventing vertical overflow (past background) */
 position:static;
 max-height:1000px;
 overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}

.dialog .inner-area
{
    padding: 30px 10px 0px 0px;
}
/*
    Text styles for specific elements
*/

span.title
{
    color: white;
}

.sidemenu-left h1,
.sidemenu-right h1
{
    font-size: 8pt;
}
div.music-player-button
{
    position: relative;
    float: left;
    width: 45px;
    margin: 10px;
}


div.music-player-button,
div.music-player-button *
{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
    -webkit-tap-highlight-color: transparent;
    background:url(/art/player-200x320.png) no-repeat 40px 0px;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

div.music-player-button *
{
    position: absolute;
    top: 0px;
}

div.music-player-button
{
    background-position: 0 0;
}

div.music-player-play-icon
{
    background-position: 0px -200px;
}

div.music-player-stop-icon
{
    background-position: 0px -240px;
}
/*
    Styles to be sorted later
*/

#notification
{
    padding: 10px;
    background-color: #0080ff;
    color: white;
    font-weight: bold;
}

#title
{
    margin-top: 20px;
    padding-top: 90px;
    background: url("/art/sblogo.png") no-repeat 50% 0;

    font-size: 14pt;
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

div.sidemenu li.expanded
{
    background-image: url("/art/arrowdown.jpg");
}

ul
{
    list-style-type: none;
    padding: 1px 0px;
    display: block;
}

li
{
    list-style-type: none;
    margin: 3px 0px 0px 0px;
    padding: 0px 0px 3px 15px;
    background-repeat: no-repeat;
    background-position: 0 0.25em;
}

ul.links li
{
    background-image: url("/art/arrow.jpg");
}

ul.tweets li
{
    background: url("/art/icons/twitter2.png") no-repeat 0 4px;
}

.main h2
{
    margin-top: 7px;
    margin-bottom: 4px;
}

.footer
{
	margin-top: 8px;
    border-top: 1px dotted #808080;
	color: #808080;
}



.sidemenu-left h1, .sidemenu-right h1
{
    font-size: 10pt;
}


/* Side-menu login form */

h1#account-panel-title
{
    background-color: #404040;
}

form#account-login-form
{
    /*border: 1px solid red;*/
    display: none;
    padding: 0;
}

form#account-login-form label
{
    display: block;
    padding: 7px 0px 2px 0px;
    margin: 0;
}

form#account-login-form input#password
{
    display: block;
}