/*-----------------------------------------------*/
/*                  selectors                    */
/*-----------------------------------------------*/

body {
    font-family: arial, helvetica;
    font-size: 12px;
    background-color: #fafafa;
}
input {
    font-family: arial, helvetica;
    font-size: 12px;
}
td {
    font-family: arial, helvetica;
    font-size: 12px;
}
th {
    font-family: arial, helvetica;
    font-size: 14px;
}
h1 {
    font-family: arial, helvetica;
    font-size: 24px;
    color: #069;
}
a {
    color: #069;
}

/*-----------------------------------------------*/
/*                    story                      */
/*-----------------------------------------------*/

div.story {
    background-color:#CD853F;
    background-image:url('images/snrpg-dnd-background.jpg');
    padding:5px;
    border: 2px solid black;
    float: left;
    width: 98%;
}

div.storyh1 {
    color:#000000;
    font-size:x-large;
    text-align:center;
    line-height:30px;
}

div.storyh2 {
    color:#000000;
    font-size:large;
    text-align:left;
}

div.storybody {
    color:#000000;
    font-size:medium;
}

/*-----------------------------------------------*/
/*                  campaign                     */
/*-----------------------------------------------*/
div.campaign {
    margin: 5px;
    padding:5px;
    border: 2px solid black;
    float: left;
    width: 100px;
}

div.campaign:hover {
    border: 2px solid #777;
}

div.campaign img {
    width: 100%;
    height: auto;
}

/*-----------------------------------------------*/
/*                bio-selector                   */
/*-----------------------------------------------*/
div.bio-selector {
    margin: 5px;
    padding:5px;
    border: 2px solid black;
    float: left;
}

div.bio-selector:hover {
    border: 2px solid #777;
}

div.bio-selector img {
    max-width: 160px;
    height: 160px;
}

/*-----------------------------------------------*/
/*                    game                       */
/*-----------------------------------------------*/
div.game {
    margin: 5px;
    padding:5px;
    border: 2px solid black;
    float: left;
    width: 100px;
}

div.game:hover {
    border: 2px solid #777;
}

div.game img {
    width: 100%;
    height: 130px;
}

div.desc {
    padding: 5px;
    text-align: center;
}

/*-----------------------------------------------*/
/*                   banner                      */
/*-----------------------------------------------*/
div#banner {
    background-color: #333333;
    height:90px;
}
span#banner-title {
    font-family: arial, helvetica;
    font-size: 24px;
    color: #6dacec;
    font-weight: bold;
    padding: 15px;
    vertical-align: 30px;
}
span#banner-logo {
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    position:relative; 
}

/*-----------------------------------------------*/
/*               navigation bar                  */
/*-----------------------------------------------*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /*purple main wrapper was -  #846899;*/
    /*purple accent was -  #8758ac;*/
    /*purple accent site-slogan was -  #9476af;*/
    /*purple accent menu-hover was -  #c8b1da;*/
    /*purple accent text-shadow was -  #554165;*/
    /*purple accent form-submit url was -  #5D466E;*/
    /*purple accent form-submit border was -  #6B517F;*/
    /*purple accent footer was -  #5C476E;*/
    background-color: #846899;
} /*unordered list*/

li {
    float: left;
} /*list*/

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
} /*list anchor*/

a:hover:not(.active) {
    background-color: #6B517F;
} /*anchor*/

.active {
    background-color:#6B517F;
} /*'.'precursor signifies a class?*/

/*-----------------------------------------------*/
/*                   news                      */
/*-----------------------------------------------*/

div#news-outer {
    color: #6dacec;
    float:left;
    width:97.6%;
    padding: 15px;
    position:relative; 
}
div#news-title {
    float:left;
    width:100%;
    padding: 15px;
    font-weight: bold;
    font-size:x-large;
    text-align:left;
    line-height:40px;
    position:relative; 
}
div#news-line {
    width:97.6%;
    float:left;
    padding: 15px;
    vertical-align: 30px;
    position:relative; 
}
div#news-heading {
    float:left;
    max-width: 90%;
    font-family: arial, helvetica;
    font-size: 24px;
    padding: 8px;
    padding-left: 15px;
    vertical-align: 30px;
    position:relative; 
}
div#news-text {
    float:left;
    max-width: 90%;
    font-family: arial, helvetica;
    font-size: 16px;
    padding: 5px;
    padding-left: 15px;
    vertical-align: 30px;
    position:relative; 
}
img#news-image {
    float:left;
    width:5%;
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    position:relative; 
}
div#news-line:hover {
    background-color: #333333;
    color: white;
} /*anchor*/

/*-----------------------------------------------*/
/*                   content                      */
/*-----------------------------------------------*/

div#content-outer {
    float:left;
    width:97.6%;
    padding: 15px;
    position:relative; 
}
div#content-title {
    float:left;
    width:100%;
    font-weight: bold;
    font-size:x-large;
    text-align:center;
    line-height:40px;
    position:relative; 
}
div#content-section {
    float:left;
    width:100%;
    font-size:large;
    text-align:left;    
    position:relative; 
}
div#content-section-title {
    float:left;
    width:100%;
    font-family: arial, helvetica;
    font-size: 24px;
    font-weight: bold;
    padding: 15px;
    vertical-align: 30px;
    position:relative; 
}
div#content-line {
    width:97.6%;
    float:left;
    padding: 15px;
    vertical-align: 30px;
    position:relative; 
}
div#content-text {
    float:left;
    font-family: arial, helvetica;
    font-size: 24px;
    padding: 15px;
    vertical-align: 30px;
    position:relative; 
}
img#content-image {
    float:left;
    max-width: 60px;
    height: 60px;
    top:10px;
    left:10px;
    right:10px;
    bottom:10px;
    position:relative; 
}
div#content-line:hover:not(.active) {
    background-color: #6B517F;
} /*anchor*/
.active {
    background-color:#6B517F;
} /*'.'precursor signifies a class?*/