/*
    Silver Blade
    Combined stylesheet
*/

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


/*
    B O D I E S

    Pretty much the only thing different between these is the background
    image.
*/

body
{
    background-color: #738EBE;
    background-repeat: no-repeat;

    margin: 0px;
    text-align: center;
}

body.framed
{
    background-color: #EFEFFF;
    background-image: none;

    text-align: left;
}

body.music
{ background-image: url("../images/headers/music.jpg"); }

body.software
{ background-image: url("../images/headers/software.jpg"); }

body.forum
{ background-image: url("../images/headers/forum.jpg"); }

body.shop
{ background-image: url("../images/headers/shop.jpg"); }

body.about
{ background-image: url("../images/headers/about.jpg"); }

body.contact
{ background-image: url("../images/headers/contact.jpg"); }


/*
    F O U N D A T I O N   S T Y L I N G
*/

div.section,
div.undivided_section
{
    padding: 0px 5px 10px 5px;
    margin: 5px 0px;
    overflow: hidden;
}

div.unindented_section,
div.unindented_undivided_section
{
    margin: 0;
    padding: 0px 0px 10px 0px;
}

div.section,
div.unindented_section
{ border-bottom: 1px dotted #999999; }

div.indent
{
    /* margin: 10px 5px; */

    margin: 5px 10px 5px 5px;
}

p
{
    padding: 0;
}

div.sidemenu p.more
{
    display: block;
    text-align: right;
}

/* This was clear: left; */
br
{
}

br.clear
{
    clear: both;
}

img
{
    border: 0;
    vertical-align: middle;
    overflow: hidden;
    cursor: default;
    max-width: 350px;
}


/*
    L I N K S
*/

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

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

a:hover
{
    text-decoration: underline;
}

a:active
{
}


/*
    L I S T S
*/

ul
{
    list-style-type: none;

    padding: 0px 0px 0px 0px;
    margin: 0px 0px 10px -5px;
}

li
{
    list-style-type: none;

    margin: 0px 0px 0px 0px;    /* left padding was 5px */
    padding: 2px 4px;
}

ul.separated li
{
    border-bottom: 1px dotted #999999;
}


/*
    H E A D I N G S
*/

h1, caption
{
    /* Looks nice in everything except IE */
/*    border: 1px dotted #A0A0A0; */


    margin: 0 auto;
    padding: 3px 5px;

    /* margin-bottom: 5px; */

    font-size: 10pt;
    font-weight: bold;

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

    letter-spacing: 0.2em;
}

caption
{
    border: 1px solid #6B82AB;
}

div.sidemenu h1
{
    background-color: #738EBE;
    font-size: 8pt;
}


h1.error,
h1.warning,
div.sidemenu h1.off,
div.sidemenu h1.error,
div.sidemenu h1.warning
{
    background-color: #AB4030;
}

div.sidemenu h1.on
{
    background-color: #40AB30;
}


/*
    T A B L E S

    These are styled in such a way that you have to explicitly
    disable the styles if you don't want them (because there are very
    few cases where this might be desired.)
*/

table
{
    border: 1px dotted #999999;
    border-bottom: none;

    width: 100%;
    height: 100%;

    margin: 0px 0px 10px 0px;   /* 1px right hand margin fixes overflow hiding */
    /* padding: 5px 0px 5px 0px; */
}

table.borderless
{
    border: none;
}

table.track_list,
table.posting_review_container
{
    border-bottom: 1px solid #999999;
}

table.posting_review_container td
{
    padding: 0;
}

th
{
    width: auto;   /* why does this work? !! */

    font-weight: bold;
    text-align: left;

    background-color: #BCC8E0;

    border-bottom: 1px solid #BBBBF0;

    /* border-top: 1px dotted #999999; */

    padding: 5px 5px;
}

tr.with_border td,
tr.with_border th,
tr.alt_with_border td
{
    border-bottom: 1px dotted #999999;
}

tr.alt,
tr.alt_with_border td
{
    background-color: #E0E0F0;
}

td
{
    width: auto;

    vertical-align: top;

    /*border-bottom: 1px dotted #999999;*/
    padding: 5px 5px;
}

td.icon     /* Specialized cell with a blue background */
{
    /* CHECKME */
    width: 20px;
    height: 30px;
    background-color: #738EBE;
}

table.layout,
table.layout td
{
    padding: 0px;
    margin: 0px;
    border: 0px;
}

td.user_column
{
    width: 150px;
}



/*
    T O O L B A R
*/

div.toolbar
{
    float: left;

    white-space: nowrap;

    font-size: 8pt;
    text-align: left;
    background-color: rgb(188, 200, 224);

    height: 2em;

    padding: 5px;
    margin: 1px 2px 1px 0px;
/*
    margin: 2px;
    border: 1px solid white;
*/
    vertical-align: middle;
}

div.toolbar label
{
    vertical-align: middle;
    margin: auto 0;
}



/*
    F O R M S   &   I N P U T
*/

form    /* Turn off annoying formatting! */
{
    margin: 0;
    padding: 0;
}

/* Mimic a H1 */

fieldset
{
    border: none;
    margin: 0px 0px 10px 0px;
    text-align: left;
    padding: 0;
}

input.hidden
{
    display: none;
    visibility: hidden;
}

/* This doesn't work properly in Firefox */
/*
legend
{
    margin: 0 auto;
    padding: 3px;


    font-size: 10pt;
    font-weight: bold;

    text-align: center;
    width: 100%;
    background-color: #6B82AB;
    color: white;

    letter-spacing: 0.2em;
}
*/


/*
    Generic input properties
*/

input,
select,
textarea
{
    margin: 0px 5px 5px 0px;
    float: left;
}

/*
    Buttons
*/

input.button,
input.small_button,
input.large_button,
input.primary_button,
input.primary_small_button,
input.primary_large_button
{
    text-align: center;
}

input.small_button,
input.primary_small_button
{
    width: 2.5em;
    height: 2em;
}

input.button,
input.primary_button
{
    width: 5em;
    height: 2em;
}

input.primary_button,
input.primary_large_button
{
    font-weight: bold;
}

input.large_button,
input.primary_large_button
{
    width: 12em;
    height: 2em;
}

input.colour_select_button
{
    margin: 0;
    border: 1px solid gray;

    width: 2em;
    height: 2em;
}


/*
    Field partitions
*/

.content form div.field,
.content form div.text_field,
.content form div.check_field,
.content form div.radio_field
{
    padding: 5px 0px 5px 0px;
    border-bottom: 1px dotted gray;
    clear: both;

    margin-left: 0px;
    padding-left: 5px;
}


/*
    Field inputs
*/

.content form input,
.content form select,
.content form textarea
{
    /*padding: 0px 5px 0px 5px;*/
    margin: 0px 5px 0px 5px;
}

.content form div.text_field input,
.content form textarea
{
    width: 25em;
}

.content form select
{
    width: 10em;
}


/*
    Field labels
*/

label
{
    clear: both;
    float: left;
    padding: 5px 0px 5px 0px;
}

label.short
{ width: 12em; }

label.tiny
{ width: 8em; }


.content input.button,
.content select
{
    height: 2em;
}

input.text
{
    float: left;
}

input.under_radio
{
    float: none;
}

div.toolbar input,
div.toolbar select
{
    float: none;
}

div.date_range_selector select,
div.date_range_selector input
{
    float: none;
    margin: 0px;
}

input.basic
{
    float: none;
}

/* FIXME START */
div.sidemenu li label input
{
    float: none;
    padding: 0;
    margin: 0px 5px 0px 0px;
    vertical-align: middle;
}

div.sidemenu li label
{
    float: none;
    vertical-align: middle;
}
/* FIXME END */

form.complex label
{
/*
    clear: both;
    float: left;
    text-align: left;
    margin: 0 5px 0 0px;
    vertical-align: baseline;
    width: 13em;
*/
}

form.complex input,
form.complex select,
form.complex textarea
{
    float: right;
}

form.complex .unfloated
{
    float: none;
}

form.complex div.radio_field
{
    padding-left: 0;;
}

form.complex div.radio_field label
{
    float: none;
}

form.complex div.radio_field input
{
    float: none;
}


/* Donation form */

form.donate
{
    display: block;
}

form.donate input
{
    float: none;
}

form.donate input.image
{
    display: block;
    clear: both;
    margin: 0 auto;
}

div.main_buttons
{
    text-align: center;
    margin: 0 auto;
    padding: 5px;
}

div.main_buttons input
{
    float: none;
    margin: 0 auto;
}


/* Special properties for subtitle bar */

.subtitle input,
.subtitle select
{
    float: none;
}


/*
    F U L L   W I D T H   T E X T A R E A
*/

form.complex div.wide_textarea
{
    margin: 0px 5px 0px 0px;
}

form.complex div.wide_textarea label
{
    padding-left: 5px;
}

form.complex div.wide_textarea textarea
{
    border: 1px dotted #999999;
    width: 100%;
    height: 100%;
    float: none;
}


/*
    Stuff that can't be classified otherwise

    ...and stuff I haven't found homes for yet!
*/


/* Not used */
#notification
{
    text-align: left;

    left: 0px;
    right: 0px;
    top: 0px;

    background-color: #F0C0A0;
    color: black;

    padding: 5px;

    border-bottom: 1px black solid;
}


#footer
{
    display: block;
    font-size: 7pt;
    color: #808080;
    text-align: right;
    padding: 3px 0px 10px 0px;
    border-top: 1px dotted #C0C0C0;
}


h2
{
    font-weight: bold;
}

h2,
.subtitle,
.headline
{
    margin: 0px auto;
    padding: 5px;

    /* margin-bottom: 5px; */

    font-size: 8pt;

    text-align: left;
/*    width: 100%; */
    background-color: #BCC8E0;

    color: black;
}


.headline
{ font-weight: bold; }

.date,
.comment_count
{
    display: block;

    font-size: 7pt;
    font-weight: normal;
}

div.sidemenu .date,
{
    text-align: right;
    color: #777777;
}

div.sidemenu .comment_count
{ color: #777777; }

div.sidemenu .mini_banner
{
    display: block;
    margin: 0 auto;
}

p.error
{
    background-color: #F0C0B0;
}

.content a
{
    font-weight: bold;
}

.field_error
{
    color: red;
    font-weight: bold;
    clear: both;
}

.hint,
.inline_hint
{
    margin: 4px 0px 0px 0px;
    font-style: oblique;
    color: #606060;
}

.hint
{ clear: both; }

.inline_hint
{ display: block; }


/*
    W A T E R M A R K S
*/

.news
{
    background-image: url("../images/watermarks/newspaper.gif");
    background-position: bottom right;
    background-repeat: no-repeat;
    /*border: 1px solid red;*/
}


/*
    I M A G E   C O D E

    This is mainly for banners, buttons etc. but I guess it could be used
    elsewhere.
*/

div.image_code_section
{
    border: 1px dotted #999999;
    margin: 5px 0px 15px 0px;
    padding: 5px 10px 5px 0px;
    display: block;
    text-align: center;
}

div.image_code_section img
{
    display: block;
    margin: 0 auto;
    border: 0;
    padding: 0;
}

div.image_code_section textarea
{
    display: block;
    float: none;
    width: 100%;
    height: 80px;
    margin: 5px;
}




/*
    L I S T S   E T C

    Nothing fancy - I just think the default bulleted lists are ugly!
    Besides, sometimes bullets aren't appropriate.
*/

div.sidemenu table
{
    border: none;
    margin: 0px 0px 10px 0px;
}

div.sidemenu table.separated td
{
    padding: 3px 0px 3px 0px;
    border-bottom: 1px dotted #A0A0A0;
}

/*
    Don't apply this to ALL ul's or it messes with the top menu
*/
div.sidemenu ul
{
    width: 100%;
    margin-left: 0px;
}

div.sidemenu li
{
    /* list-style-image: url("../../resources/arrow.jpg"); */
    list-style-type: none;

    background-image: none;
    background-repeat: no-repeat;
    background-position: 5px 0.6em;

    margin-left: 0;
    padding: 3px 0px 3px 0px;
    /* margin: 0px 0px 10px -5px; */
/*    width: 100%;*/

    border-bottom: 1px dotted #A0A0A0;

    white-space: default;
}

ul.no_separator li, li.no_separator
{
    border-bottom: none;
}


/*
    Key (for forum mainly)

    UNFINISHED - is this even used?!?!
*/

/*
ul.key li ul li
{
    border: none;
}

ul.key li img
{
    padding: 0px 0px 1px 3px;
}
*/



/*
    F O R U M
*/

img.avatar
{
    margin: 0px 0px 0px 5px;
    width: 5em;
    height: 5em;
}

div.forum_quote,
div.forum_code
{
    margin: 0 auto;
    padding: 4px;
    border: 1px dotted #999999;
}

span.back_to_top
{
    display: block;
    text-align: right;
}

div.preview_box
{
    border: 1px solid black;
    margin: 5px;
    padding: 5px;
}


/*
    H A C K S

    This is where we poke Internet Explorer with a big stick, because it
    refuses to do what we want.
*/

/* This fixes a bug where width is 100% */
/*\*/
div.ie_table_container
{
    height: 1%;
}
/**/

div.ie_table_container
{
}


/*
    P R O G R E S S   B A R
*/

table.progress_bar
{
    border: 1px solid black;
    margin: 5px 0px 5px 0px;
    width: 100%;
    height: 5px;
}

table.progress_bar tr
{ height: 5px; }

table.progress_bar td
{
    padding: 0px;
    margin: 0;
    border: none;
    width: 100%;
}

table.progress_bar td div
{
    /* width: {PERCENTAGE_WIDTH}; */
    background-color: blue;
    height: 10px;
}


/*
    I C O N   K E Y
*/

div.icon_key
{
    float: left;
    width: 13em; 
    margin: 5px;
    white-space: nowrap;
    border: 1px dotted #999999;
    padding: 0;
}

div.icon_key img
{
    margin-right: 5px;
    padding: 5px;
    background-color: #738EBE;
}


/*
    G A L L E R Y
*/

div.screenshots img,
div.gallery img
{
    margin: 5px;
}

div.gallery img
{
    border: 1px dotted #999999;
}



/*
    B L A D E C A S T   S T A T U S
*/

span.offline
{
    color: red;
}

span.online
{
    color: green;
    font-weight: bold;
}


/* Playlist */

div.mp3_player
{
    width: 400px;
    height: 170px;
    border: 1px dotted #999999;
    margin: 0 auto;
}


/*
    S H O U T B O X
*/

div.shoutbox
{
    border: 1px dotted #999999;
    height: 150px;
    width: 100%;
    padding: 0;
    margin: 0px 0px 10px 0px;
}

div.shoutbox iframe
{
    border: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

form.shoutbox input.user,
form.shoutbox input.message
{
    width: 100%;
    float: none;
    clear: both;
}


/*
    L O G I N
*/

div.forum_login,
div.message_box,
div.button_bar
{
    padding: 5px 0px 5px 0px;
    margin: 0 auto;
    text-align: center;
}

div.forum_login *,
div.message_box *,
div.button_bar *
{
    margin: 0 auto;
    text-align: left;
}

/* Ugh... Fixes for button centering... needs a better fix! */
div.forum_login input.primary_large_button,
div.message_box input.primary_large_button,
div.message_box input.button
{
	text-align: center;
}

div.forum_login table.login_fields
{
    text-align: left;
    width: auto;
    border: none;
}

div.forum_login table.login_fields td
{
    vertical-align: middle;
    padding: 3px 0px 3px 0px;
}

div.forum_login input.button,
div.forum_login input.primary_button,
div.message_box input.button,
div.message_box input.primary_button,
div.button_bar input.button,
div.button_bar input.primary_button
{
    margin-top: 5px;
    margin-bottom: 5px;
    float: none;
}

div.message_box p
{
    padding: 10px;
    text-align: center;
}



/*
    F O R U M
*/

table.forum_list td.stats,
td.stats
{
    text-align: right;
    /*width: 18em;*/
    padding-left: 5px;
    /* white-space: nowrap; */
    background-color: #E0E0F0;
    white-space: nowrap;
}

table.forum_list td.stats a, td.stats a
{
    font-weight: normal;
};


/* Which of these is actually used?! */
.last_post
{
    font-weight: normal;
    font-size: 8pt;
    color: #999999;
    font-style: oblique;

    text-align: right;

    width: auto;
    white-space: nowrap;
}

.last_post a
{
    font-weight: normal;
}

.lastpost
{ float: left; padding: 5px; font-style: oblique; color: #808080; }


.forum_name
{ font-weight: bold; }

.forum_required
{ color: #800000; }

/* More forum stuff */
.topicname { float: left; width: 20em; padding: 5px; }
.replies { float: left; width: 8em;  padding: 5px; /*background-color: gray;*/ }
.views { float: left; width: 8em;  padding: 5px; /*background-color: gray;*/ }
.no_topics { text-align: center; }


/*
    Bullets (actually just small graphic indicators)

    For use with lists, links, you name it...
*/


/*
    Bullets on the left
*/

.link, ul.links li,
.back_link, ul.backlinks li,
.fact, ul.facts li,
.music_link, ul.music_links li,
.forward_link, ul.forward_links li
{
    /* Default bullet appearance isn't particularly exciting */
    list-style-type: none;

    /* This needs to be in em's to make it center to the link line! */
    /* background-position: 0% 0.6em; */
    background-position: 0% 0.28em;
    background-repeat: no-repeat;

    margin: 3px 0px 0px 0px;
    padding: 0px 0px 3px 15px;
}

/*
    Bullets on the right
*/

.forward_link
{
    list-style-type: none;

    background-position: 100% 0.28em;

/*
    padding-left: auto;
    padding-right: 15px;
*/

    margin: 3px 0px 0px 0px;
    padding: 0px 15px 3px 0px;
}

/*
    The actual bullet images

    Avoiding the use of the list styling properties allows a bit more control
    over the appearance.
*/

.link, ul.links li,
.forward_link, ul.forward_links li
{ background-image: url("../images/bullets/arrow.jpg"); }

.back_link, ul.back_links li
{ background-image: url("../images/bullets/left_arrow.jpg"); }

.fact, ul.facts li
{ background-image: url("../images/bullets/blob.jpg"); }

.music_link, ul.music_links li
{ background-image: url("../images/bullets/note.jpg"); }


/* Individual list item styling (avoids CSS cascade problem) */

ul li.link
{ background-image: url("../images/bullets/arrow.jpg"); }
/*
    T O P   M E N U
*/

#menu
{
    margin: 0 auto;
    margin-top: 30px;
    text-align: center;
    /* border: 1px solid black; */
/*    width: 38em; */
    min-width: 750px;
    width: 100%;
}

#menu #separator
{
    background-image: url("../images/menu/lightmask.gif");
    height: 15px;
}

#menu ul
{
    color: white;
    white-space: nowrap;

    /*margin: 5px 0px 8px 0px;*/
    margin: 0px;
    padding: 6px;

    background-image: url("../images/menu/darkmask.gif");
}

#menu li
{
    display: inline;

    background-image: url("../images/menu/blob.jpg");
    background-repeat: no-repeat;
    background-position: 0 50%;

    padding: 0px 10px 0px 20px;
    margin: 0px;
    border: none;
}

#menu li.first
{
    background-image: none;
    padding-left: 0px;    /* Compensate for missing bullet */
}

#menu ul.primary
{ font-size: 10pt; }

#menu ul.secondary
{ font-size: 8pt; }

#menu ul.primary li
{ font-weight: bold; }

#menu ul.secondary li
{ font-weight: bold; }

#menu ul.primary li a
{ color: white; }

#menu ul.primary li a.current
{ color: #ffef9c; }

#menu ul.secondary li a
{ color: #ffef9c; }


/*
    M A I N   C O N T A I N E R
    Main container for page content and side menus
*/

#container
{
    text-align: left;

    padding-top: 40px;
    margin: 0 auto;
    width: 95%;

    position: relative;

    /* IE6 will be blissfully ignorant of this, but hey... */
    min-width: 750px;
}



/*
    B O X   S T Y L I N G
    Rounded corners, etc.
*/

div.box
{
    /*border: 1px solid red;*/
    background-color: #EFEFFF;
    margin: 5px 5px 10px 5px;   /* Separate boxes from each other */
    overflow: hidden;
}

/* Some of these aren't needed, or don't exist */

div.box div.t
{ /* background: url(../images/shadow_border/t.jpg) 0 0 repeat-x; */ }
div.box div.b
{ background: url(../images/shadow_border/b.jpg) 0 100% repeat-x; width: 100%; }
div.box div.l
{ /* background: url(../images/shadow_border/l.jpg) 0 0 repeat-y; */ } 
div.box div.r
{ background: url(../images/shadow_border/r.jpg) 100% 0 repeat-y; }
div.box div.bl
{ background: url(../images/shadow_border/bl.jpg) 0 100% no-repeat; }
div.box div.br
{ background: url(../images/shadow_border/br.jpg) 100% 100% no-repeat;}
div.box div.tl
{ /* background: url(../images/shadow_border/tl.gif) 0 0 no-repeat; */ }

/* This one defines the internal padding */
div.box div.tr
{
    background: url(../images/shadow_border/tr.jpg) 100% 0 no-repeat;
    padding: 10px 20px 10px 10px;   /* adjust bottom, maybe? */
/*    width: 100%;*/
}

div.box div.box_content,
div.box div.internal        /* old name, not very descriptive */
{
    width: 100%;
}


/*
    C O N T E N T   A R E A
*/

div.content
{
    position: absolute;
    left: 20px;
    right: 220px;
    overflow: hidden;
    text-align: left;

    z-index: 2;
}


/* There's a few things that need padding */
.content .box ul
{
    margin-left: 3px;
}


/*
    S I D E   P A N E L S
*/

div.sidemenu
{
    position: absolute;
    right: 20px;
    width: 200px;
    font-size: 7pt;
    z-index: 1;
}

/*
    Pagination styles
*/

table.pagination
{
/*    background-color: #BCC8E0;*/
    border: none;
}

table.pagination tr
{
    border: none;
}

table.pagination td
{
    border: none;
    padding: 5px;
    white-space: nowrap;
}

table.pagination td.pages
{
    text-align: center;
    width: 50%;
}

table.pagination td.previous
{
    text-align: left;
    width: 25%;
}

table.pagination td.previous a
{
    background-image: url("../images/bullets/left_arrow.jpg");
    background-position: 0% 50%;
    background-repeat: no-repeat;

    padding-left: 15px;
}

table.pagination td.next
{
    text-align: right;
    width: 25%;
}

table.pagination td.next a
{
    background-image: url("../images/bullets/arrow.jpg");
    background-position: 100% 50%;
    background-repeat: no-repeat;

    padding-right: 15px;
}