/*
    #103041     Dark Blue
    #0361CC     Bright blue
    #C0C0C0     Silver

*/

body 
{
    color: #C0C0C0;
    background-color: black;
    text-align: left;
}

/* This ensures the right-column never moves within the first 1024 pixels in the x-dimension */
#container { min-width: 664px; } 

.hidden { display: none; }

a:link              { color:#0361CC; text-decoration:none; }
a:visited           { color:#0361CC; text-decoration:none; }
a:hover             { color:#0361CC; text-decoration:underline; }
a:active            { color:#0361CC; text-decoration:none; }

ul { list-style-type: none; }

/* Must catch user attention */
.alert
{
    background-color: transparent;
    color: yellow;
    padding: 2px;
}
.alert a { color: yellow; }

/* Usually eExplains game logic */
.advice-message { color: #FF9933; }

/* Django forms generate errors in an errorList class. */
.errorlist { color: red; }
ul.errorlist { list-style-type: none; margin: 0; padding: 0; }

/* Style any list of urls (horizontal list of links) */
ul.url-list 
{ 
    margin: 0; padding: 0;
}

ul.url-list li 
{ 
    float: left; 
    margin-right: 8px; 
}

ul.bullet
{
    list-style-type: disc;
}

/* Style form elements */
.button-panel { text-align: center; }
input, select 
{
    color: #C0C0C0;
    background: transparent none repeat scroll 0 0;
    border: 1px solid #103041;
}

input[type="radio"]
{
    color: black;
}

select { 
    color: #C0C0C0; 
    background-color: black;
}


input.button /* Button inputs should have .button class added so they can be styled separately */
{
    background-color: #103041;
}

table.radio input { color: #0361CC; }

/* General table style */ 
thead th { text-align: center; }
table tbody tr.odd td, table tbody tr.odd th { background-color: #1A1A1A; }
table tbody tr.even td, table tbody tr.even th { background-color: transparent; }

.admintable td { 
    border: 1px solid gray;
    text-align: left; 
    vertical-align: top;
    border-collapse: separate;
}
.admintable ul {
    list-style-type: square;
}

.admintable input {
    background-color: white;
    color: black;
}

.admintable th { 
    border: 1px solid gray;
    text-align: left;
    vertical-align: top;
    border-collapse: separate;
    background-color: #181818;
}

.adminlist {
    list-style-type: square;
    line-height: 1.5em;
}

#wrapper { background: url(/media/common/images/utopia_logo_tl.png) no-repeat top left; background-color: black;}

/* Style the header */
#header
{
    
    position: relative;
    margin: 0px;
    height: 200px;
    border: none;
    margin-bottom: 50px;
}
#header h1 { 
    position: absolute; 
    top: 115px;
    left: 420px;
}
 /* Style navigation menu */
 div.left-box
 {
    width: 260px;
 }
  div.middle-box
 {
    width: 520px;
    padding: 10px;
    background: black;
 }
 
#navigation ul
{
    margin: 0px;
    margin-top: 60px;
    list-style: none;
    border-top: 1px solid #103041;
    width: 260px;
}

#navigation ul li
{
    border: 1px solid #103041;
    border-top: none;
    text-align: center;
}
    

#navigation ul li a
{
    display: block;
    height: 22px;
    font-size: 1.2em;
    font-weight: bold;
    color: #C0C0C0;
    padding-top: 7px;
    text-decoration: none;
}

#navigation ul li a:hover
{
    background-color: #103041;
    color: white;
}

#blog-feed { 
    border: 1px solid #103041; 
    text-align: left;
}

#blog-feed td  { padding-left: 10px; }


.content-section
{
    /*background-color: green;*/
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    width: 100%;
    text-align: left;
}

.lobby-game-details, .province-chooser-province-details, .invitation
{
    border: 1px solid #103041;
    padding: 15px 5px 5px 5px;
    margin-bottom: 40px;
    text-align: center; 
}

table.details { 
    text-align: left; 
    color: #C0C0C0; 
    margin-bottom: 0.3em; 
    width: 400px; 
    margin-left: auto; 
    margin-right: auto;
}

table.details th{
    vertical-align: top;
}

.good
{
    color: #90ee90;
}
.bad
{
    color: red;
}
.message
{
    border: 1px solid white;
    padding: 8px;
    font-weight: bold;
    line-height: 1.5em;
    text-align: left;
    margin: 15px;
}

.good .message
{
    background-color: green;
    color: white;
}
.bad .message
{
    background-color: #400000;
    color: white;
}

.mEnable-form
{
    text-align: right;
}

#mpush_logo
{
    text-align: right;
    display:inline;
    float: right;
    padding-left: 10px;
}

#bug_report { border: 1px solid #103041;  }


/* User profile page 
-------------------------------------------------------------- */
.user-profile-pane{
    width: 520px;    
    position: relative;
    margin: 0 auto;
}

.user-profile-pane .content-table{    
    width:250px; 
}

.user-profile-pane .left-pane{
    position: absolute;
    left: 0px;
}

.user-profile-pane .right-pane{
    position: absolute;
    right: 0px;
}


.user-profile-top-pane{       
    margin-top: 20px;
    height: 280px;
}

.user-profile-top-pane .avatar{
    position: absolute;
    left: 30px;
    width:190px; 
    height:210px;     
    text-align: center;
}

.user-profile-top-pane .display-name{   
    width:250px; 
}

.user-profile-top-pane .user-details{   
    top: 50px;
}

.user-profile-top-pane .current-province-details{   
    top: 120px; 
}

.user-profile-top-pane .statement{    
    height: 70px;
    position: absolute; 
    width: 300px;
    top: 220px;
    background: url('../../game/images/province_profile/scroll.png') no-repeat;
    left: 0px;
}

.user-profile-top-pane .statement .statement-content{   
    position: relative; 
    top: 35%;    
    margin-left: 10px;
    width: 200px;
    color: #000;
    font-style:italic;     
    text-align: center;
}

.user-profile-external-link{    
    margin-top: 20px;
}

/* MODS */
div.age-changes {
    padding: 0px;
    border: 0px;
    margin: 0px;
    /*width: 300px;*/
}

.age-changes .race, .age-changes .trait {
    margin-bottom: 20px;
    padding: 8px;
    border: 1px solid gray;
    /*background-color: gray;*/
}

.age-changes .race .name, .age-changes .trait .name {
    font-size: 1.5em;
    margin-top: 5px;
    margin-bottom: 14px;
    text-decoration: underline;
    font-weight: bold;
}

.age-changes .section-title {
    font-size: 1.1em;
    margin-top: 15px;
    margin-bottom: 6px;
    font-weight: bold;
}

.age-changes .mod, 
.age-changes .quirk,
.age-changes .spellbook .entry {
    margin-bottom: 3px;
}

.age-changes .good {
    color: green;
}

.age-changes .bad {
    color: bad;
}

.age-changes .military table {
    width: 240px;
}
.age-changes .military table td {
    /*border: 1px solid gray;*/
    padding-top: 2px;
    padding-bottom: 2px;
}

.age-changes .military table td.unit-name
{ 
    width: 130px; 
    padding-left: 0px;
}

.age-changes .military table td.def-def-value {
    width: 30px;
    text-align: center;
}

.age-changes .military table td.cost, 
.age-changes .military table td.net-worth {
    width: 40px;
}

.age-changes .military table tr.thief-unit td {
    padding-top: 10px;
    /*border-top: 1px dashed white;*/
}