<!--

/* -- groups -- */

.grp_guests {
    color: #eeeeee;
    }
    
.grp_pending {
    color: #d4a473
    }

.grp_player {
    font-weight:bold
    }
    
.grp_storyteller {
    color:#C00000;
    font-weight:bold
    }
    
.grp_admin {
    color:#ec3f57;
    font-weight:bold
    }
    
.grp_banned {
    color:#FF0000
    }

/* -- global -- */

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

html, 
body {
    height:100%;
    background:#000;
    }

body {
    font: normal normal normal 62.5%/150% "Century Gothic", "Trebuchet MS" , Arial, Verdana, Helvetica;
    color:#cccccc}

a {
    text-decoration:none;
    color:#d57c5a
    }

hr {
    background:#444444;
    margin:10px 0
    }

/* -- layout -- */
     
#container {
    width:750px;
    margin:0 auto;
    }

#container_inner {
    background:#241919;
    overflow:hidden;    
    }

#strip_alpha {
    overflow:hidden;
    background:#868888;
    line-height:2.4em;
    font-size:0.9em;
    text-transform:uppercase;
    }


#strip_beta {
    overflow:hidden;
    background:#27262B;
    line-height:2.4em;
    }

#strip_beta .right {
    white-space:nowrap
    }
    
#content {
    overflow:hidden
    }

#content_alpha {
    float:left;
    width:180px;
    background:#222;
    padding:10px 0 20px 0;
    }

.block {
    padding:10px;
    margin:0 1px ;
    border-bottom:1px dotted #AAAAAA;
    background:#241919
    }

.block h1 {
    color:#eeeeee;
    text-transform:uppercase;
    font-size:1.1em
    }

.block img {
    margin:10px auto 0 auto;
    border:1px solid #000;
    padding:3px;
    background:#222222;
    display:block;
    }

#content_beta {
    float:left;
    width:560px;
    padding:0 0 10px 0
    }

#content_beta_inner {  
    padding: 10px 0 0 10px
    }

/* -- overlay -- */


#blackout {
    position:absolute;
    background:#000;
    z-index:500;
    top:0;
    left:0
    }

#canvas {
    width:600px;
    min-height:100px;
    position:absolute;
    z-index:501;
    background:#7a8281;
    -moz-border-radius: 3em;
    -webkit-border-radius: 3em;
    border:1px solid #000;
    padding:25px
    }

#canvas table {
    padding:10px;
    border:0;
    background:#f0f0f0;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    width:100%;
    }

#canvas td {
    background:#222222;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;     
    }

#canvas td.clear {
    background:none;
    vertical-align:top
    }
    
#canvas img {
    border:1px solid #000;
    display:block;
    margin:0 auto;
    cursor:pointer
    }

#canvas img.float {
    position:absolute;
    z-index:500;
    margin:25px 0 0 10px;
    }
 
 
#canvas .right {
    cursor:pointer;
    line-height:25px
    }

#canvas .scroll {
    height:550px;
    width:550px;
    margin:15px auto 5px auto;
    overflow:auto;
    border:1px solid #CCC;
    padding:10px;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;    
    }
    

/* -- text -- */

.large {
    font-size: 1.2em;
    line-height:150%
    }

.largest {
    font-size: 1.4em;
    line-height:150%
    }
    
.lg {
    font-size:1.6em;
    }


.small {
    font-size:0.8em
    }
    
#content_beta_inner p {
    margin:10px 0;
    font-size:1.1em
    }

    
/* -- links -- */

#strip_alpha a {
    margin:0 0 0 15px
    }

#strip_alpha p a {
    font-size:0.8em;
    color:#eee
    }

#strip_beta .left a {
    margin:0 0 0 15px
    }

#strip_beta .right  a.subnav_head {
    padding:5px 30px 5px 20px;
    margin:0 -5px;
    color:#eee;
    font-weight:bold;
    font-size:1.1em;
    background:#27262B;
    }

#strip_beta .right a.subnav_head:first-Child {
    margin:0 -5px 0 0;
    }

#strip_beta .right a.subnav_head:hover, 
#strip_beta .right a.subnav_on {
    background:#d4a473;
    color:#7B3239
    }

#strip_beta ul a {
    color:#333333;
    display:block;
    padding:0 5px;
    white-space:nowrap
    }

#strip_beta ul a:hover {
    color:#FFF;
    }
    
#content_alpha ul li a {
    color: #eee
    }
  
#content_alpha ul li.sub a {
    color:#d4a473;
    }

#content_alpha ul li.sub a:hover {
    color:#eee;
    }
    
/* -- headers -- */

h1 {
    font-size:1.6em
    }
    
h2 {
    font-size:1.4em
    }

h3 {
    font-size:1.2em
    }
    
h4 {
    font-size:1.0em
    }
    
h5 {
    font-size:0.8em
    }

#content_beta h1 {
    color:#cfc8c8;
    text-transform:uppercase;
    letter-spacing:2px;
    }
    

/* -- lists -- */

#strip_beta ul {
    position:absolute;
    background:#d4a473;
    border-top:0;
    list-style:none;
    line-height:2.0em;
    }

#content_alpha ul {
    list-style:none;
    }

#content_alpha ul li {
    background:#27262B;
    padding:0 0 0 15px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:0.9em;
    line-height:2.6em;
    margin:0 0 1px 0;
    font-weight:bold;
    }

#content_alpha ul li.sub {
    background:none;
    list-style:square;
    margin:0 20px;
    padding: 0;
    }

/* -- forms -- */

.formwrap {
    padding:10px 0;
    overflow:hidden;
    clear:both;
    }

.formwrap .left {
    clear:both;
    width:30%;
    }

.formwrap .right {
    width:70%;
    }

.formwrap .left, .formwrap .right {
    line-height:22px;
    margin:1px 0 0 0;
    }
     
.formwrap input[type=text], 
.formwrap input[type=password], 
.formwrap input[type=file],
.formwrap textarea,
.formwrap select {
    border:4px solid #FFF;
    background:#FFF;
    width:300px;
    color:#ff0000;
    font-weight:bold;
    margin:0 1px 0 0;
    font: normal normal normal 1em "Century Gothic", "Trebuchet MS" , Arial, Verdana, Helvetica;
    }

.formwrap select {
    width:auto
    }
    
.formwrap select option {
    padding:0 3px;
    margin:4px 0
    }

.formwrap select optgroup {
    padding:0 3px;
    margin:4px 0;
    font-style:normal
    }
    
.formwrap select optgroup option {
    padding:0 8px;
    margin:4px 0
    }
    
.formwrap textarea {
    font-weight:normal;
    height:80px
    }

textarea.wysiwyg {
    height:150px
    }

textarea.l {
    height:500px
    } 
 
input[type=submit] {
    background:#27262B;
    color:#FFF;
    padding:3px
    }

input[type=submit].ajax{
    background:#27262B url(../images/ajax.gif) no-repeat center center;
    }
div.ajax {
    width:126px;
    background:#c08468 url(../images/ajax.gif) no-repeat center center;
    margin:10px auto;
    color:#FFF;
    text-align:center;
    line-height:22px
    }
    
.formwrap input[type=text].s {
    width:30px;
    text-align:center
    }

.formwrap input[type=text].m {
    width:150px;
    }
    
.formwrap input[type=text].ms {
    width:100px;
    text-align:center
    }

.formwrap input[type=text].ml {
    width:240px
    }
    
.formwrap input[type=text].color_picker {
    width:90px;
    background:#FFF url(../images/rainbow.png) no-repeat 4px center;
    padding:4px;
    border:0;
    color:#000;
    text-indent:22px;
    font-weight:bold;
    font-size:1.1em;
    letter-spacing:1px
    }

.formwrap .date input[type=text] {
    width:30px;
    text-align:center;
    margin:0 1px 0 0
    }
    
.formwrap b {
    background:#A00000;
    letter-spacing:1px;
    text-transform:uppercase;
    font-size:0.9em;
    color:#FFF;
    line-height:14px;
    padding:4px;
    margin:5px 0;
    width:300px;
    display:block
    }

.formwrap b.error {
    display:none
    }

.formwrap input[type=text].error_border, 
.formwrap input[type=password].error_border,
.formwrap select.error_border,
.formwrap textarea.error_border {
    border:4px solid #303030;
    background:#303030;
    color:#FFF
    }


.required {
    font-weight:bold
    }

textarea.code,
textarea.code_sm {
    width:96%;
    height:500px;
    background:#FFF;
    padding:10px;
    display:block;
    margin:0 auto;
    font-family:"courier new";
    font-size:1.1em;
    font-weight:bold;
    color:#000;
    letter-spacing:1px
    }
textarea.code_sm {
    height:50px
    }
select,
table {
    font-size:1.1em
    }
    
/* -- tables -- */


table.tblwrap {
    background:#626262;
    margin:10px 0;
    padding:10px;
    border:0;
    width:100%;
    }

table.tblwrap td {
    padding:4px;
    font-size:0.9em
    }

table.tblwrap td.td_s {
    width:26px;
    text-align:center;
    padding:2px
    }
    
table.tblwrap td.td_s img,
.option_right img,
.option_center img{
    background:#FFF;
    padding:3px;
    margin:2px 2px 0 2px;
    border:1px solid #AAA
    }

table.tblwrap td.td_s img {
    float:left;
    margin:2px;
    }
    
table.tblwrap td.td_ms {
    width:45px;
    text-align:center;
    }
    
table.tblwrap td.td_m {
    width:80px;
    text-align:center
    }

table.tblwrap td.td_ml {
    width:150px;
    text-align:center
    }
    
table.tblwrap td.td_h {
    font-weight:bold;
    text-align:center
    }    

table.alternate tr {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;    
    }

table.tblwrap td.td_img {
    border:1px solid #CCC;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em; 
    }


/* -- panels -- */

.panel {
    clear:both;
    margin:0 0 10px 0
    }


.panel span.pspan {
    background:#7a8281;
    overflow:hidden;
    display:block;
    clear:both;
    padding: 10px;
    margin:0 0 10px 0;
    width:530px
    }

.panel ul {
    margin:10px 0 0 0;
    width:100%;
    padding:0;
    }
    
.panel ul li {
    float:left;
    display:block;
    color:#d4a473;
    font-weight:bold;
    cursor:pointer;
    background:#010202 no-repeat 8px 5px;
    border:1px solid #7a8281;
    border-bottom:0;
    padding:5px 10px;
    margin:0 10px 0 0;
    -moz-border-radius-topright: 1em;
    -webkit-border-top-right-radius: 1em; 
    -moz-border-radius-topleft: 1em;
    -webkit-border-top-left-radius: 1em;
    }

.panel ul li.right {
    float:right;
    margin:0 0 0 10px;
    }
    
.panel ul li.on {
    color:#FFF;
    background-color:#7a8281;
    cursor:default
    }

.panel span.pspan .panel span {
    padding:0
    }

.panel span.pspan .panel  ul li {
    float:left;
    display:block;
    color:#eeeeee;
    text-transform:uppercase;
    cursor:pointer;
    margin:0 5px 0 0;
    padding:0;
    background:none;
    }

.panel span.pspan .panel  ul li.on {

    cursor:default;
    color:#000
    }
    

/* -- dragdrop -- */

div.webBox { 
    padding: 0; 
    border: 0; 
    position: relative; 
    display: block; 
    margin: 1px 0; 
    z-index: 1; 
    background:#FFF ; 
    height:25px 
    }
    
div.webBox img {
    float:left;
    width:25px;
    height:25px;
    margin-right:5px
    }
    
div.webBox h3 {
    line-height:25px
    }    
    
div.webBoxMarker { 
    border: 1px dotted gray; 
    margin: 0 0 1px 0; 
    }

table#webBoxContainer td { 
    width: 50%; 
    vertical-align: top
    }
    
/* -- map -- */

#map_lg {   
    height:450px;
    border:1px solid #000;
    margin:10px 0
    }

#map {
    border:1px solid #000
    }
        
#map_close {
    display:block;
    color:#FFF;
    background:#000;
    padding:5px
    }
    
#map_address {
    display:block
    }
    
.map_coords {
    text-align:center
    }

#map_overlay {
    height:200px
    }
    
/* -- parent child -- */

.show_parent {
    cursor:pointer
    }

tr.show_child td ol {
    font-size:1.1em;
    line-height:1.6em
    }
    
/* -- member bar: log in form -- */

#member {
    float:right;
    width:350px;
    color:#FFF;
    }

#member a {
    color:#F0F0F0;
    font-weight:bold;
    letter-spacing:1px;
    text-decoration:none;
    }
    
#lost-password-form-wrapper, #log-in-form-wrapper {
    position:absolute;
    z-index:101;
    width:350px;
    background:#7a8281;
    -moz-border-radius-bottomright: 1em;
    -webkit-border-bottom-right-radius: 1em; 
    }

#log-in-form, #lost-password-form {
    padding:10px;
    overflow:hidden;
    border-top:0
    }
    
#log-in-form input, 
#lost-password-form input {
    float:left;
    background:#7B3239;
    border:4px solid #7B3239;
    text-transform:uppercase;
    font-size:0.9em;
    color:#17242F;
    width:130px;
    margin:0 2px 0 0;
    padding:1px 0;
    }

#log-in-form input.member_submit {
    width:auto;
    padding:0;
    color:#17242F
    }
    
#log-in-form input[type=submit], 
#lost-password-form input[type=submit] {
    width:auto;
    padding:0;
    color:#17242F
    }
    
/* -- columns -- */

.col_wrap {
    margin:10px 0;
    overflow:hidden;
    clear:both;
    }

.col_2 {
    width:49%;
    float:left;
    }
    
.col_3 {
    width:33%;
    float:left;
    }
 
.col_4 {
    float:left;
    width:25%
    }

.col_wrap .tblwrap {
    margin:0
    }


/* -- image display -- */

.img_thumb p {
    width:58px;
    height:58px;
    float:left;
    margin:10px 10px 0 0;
    background:#FFF no-repeat center center;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border:1px solid #FFF;
    cursor:pointer
    }

.img_thumb p.on  {
    border:1px dashed #C00000;
    background-color:#f9dcd4
    }

/* -- notices -- */    
    
    
#note {
    background:transparent url(../images/note_bg.png) no-repeat center center;
    width:300px;
    height:200px;
    position:absolute;
    z-index:2
    }
    
#note_inner {
    padding:50px 30px;
    text-align:center;
    }

#note p {
    margin:0 0 10px 0
    }

#error {
    font-size:1.4em;
    color:#C00000
    }

#notes {
    font-size:1.4em;
    color:#d7cece
    }
    
.tippit {
    vertical-align:middle;
    margin-top:-3px
    }


.tip {
    background:#fff;
    border:1px solid #000;
    width:300px;
    padding:10px
    }

    
/* -- colors -- */

.dark a,
.light a,
.xdark a,
.xlight a {
    text-decoration:none;
    font-weight:bold
    }

.dark {
    background:#333333;
    
    }

.xdark {
    background:#626262;
    }
    
.light {
    background:#444242
    }

.xlight {
    background:#fff
    }

.highlight {  
    background:#990100;
    color:#FFF;
    font-weight:bold
    }
   
/* -- accordian -- */

.togglers {
    cursor:pointer;
    }

h3.togglers {
    margin:0 0 10px 10px;
    color:#eeeeee;
    text-transform:uppercase;
    }

/* -- pagetopage -- */

.pagetopage {
    text-align:center
    }

.pagetopage select {
    padding:5px;
    margin:0 10px
    }
    
.pagetopage select option {
    padding:0 5px;
    }
    
/* -- misc -- */

.clear {
    clear:both
    }
    
.noclear {
    clear:none
    }

.legal li {
    list-style-type:upper-roman
    }
.legal ul li {
    list-style-type:circle
    }

.icon_l {
    line-height:16px
    }

.icon_l img {
    float:left;
    margin:0 5px 0 0
    }

img.left {
    width:auto;
    margin:0 5px 0 0
    }
    
.hide {
    display:none;
    visibility:hidden;
    position:absolute;
    height:1px;
    }
    
.left {
    float:left
    }
    
.right {
    float:right
    }

.copyright {
    float:right;
    margin:10px;
    font-size:0.9em;
    color:#CCC
    }
    
.formwrap img.right, .formwrap img.left{
    width:auto;
    }

.pad {
    padding:10px
    }

.margin {
    margin:5px
    }
    
.round {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;   
    }

.overflow100 {
    overflow:auto;
    height:100px
    }

.inset {
    border:1px solid #CCC;
    background:#fff;
    padding:0 10px;
    }

.option_right {
    float:right
    }

.option_center {
    text-align:center;
    display:block
    }

-->