/*----------------------------General---------------------------*/

body {
    margin:0px;
    min-width:200px
}

#TopicList li {
    margin: 3px 0px;    
}

/*----------------------------Header---------------------------*/

header {
    margin-top: 0px; 
    width: 100%; 
    max-width: none; 
    position: fixed; 
    top: 0px; 
    z-index: 1; 
    background-color:#e6e6e6; 
    height: auto;
}

header h1 {
    font-weight: 900;
}

.HeaderBar {
    max-width:800px; 
    display:table; 
    width:100%; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 20px 0px;
}

.HeaderLogo {
    height: inherit; 
    width:31%; 
    display:table-cell; 
    background-image:url('../images/logo_trans_small.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: top 0px right 0px; 
    min-width: 91px;
}

.HeaderText {
    height:inherit; 
    width:69%; 
    display:table-cell;
}

.HeaderText h1 {
    text-align: left;
}

/*----------------------------Footer---------------------------*/

.footerdiv a {
    color: black;
    text-decoration: underline;
}

.footerdiv a:hover {
    color: black;
}

.footerdiv {
    width:100%; 
    height:auto; 
    background-color: #e6e6e6;     
    margin-top:50px; 
    display:block; 
    box-sizing:border-box; 
    position:absolute; 
    left:0px;
    color:black;
}

.footerdiv-inner {
    width:auto; 
    max-width:700px; 
    height:inherit; 
    margin:auto;
}

#footerheader {
    text-align: center;
}

.footerblocks {
    height:100%;
    width:50%;
    float: left; 
    margin-bottom: 30px;
}

.footerblockslast {    
    height:100%;
    width:34%;
    float: left; 
    padding: 0px 10px;
    margin-bottom: 30px;
}

.copyright {
    float:right; 
    font-size: 12px; 
    margin-top:100px;
}

/*----------------------------Background---------------------------*/

#mainbackground {
    top:0px; 
    left:0px; 
    height:100%; 
    width:100%; 
    position:fixed; 
    z-index:-1; 
    background-color: #C7B4AE;
}

#TextBackground {
    width:80%; 
    height:100%; 
    background-color: white;
    max-width:800px; 
    opacity:0.3;
    box-shadow:0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px grey, -12px 0 15px -4px grey;
    z-index: -1;
    margin: auto;       
    background-image: url('../images/background_kite.jpg'); 
    background-position:0px 0px; 
    background-repeat: no-repeat;
    background-size: auto 100%;    
}

/*----------------------------Horizontal Bar---------------------------*/

.BlockContainer {
    width:100%; 
    height:auto; 
    margin-top:50px; 
    box-sizing:border-box; 
    display:block; 
    position:relative; 
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    padding: 10px 0px 20px;
    color: white;
}

.HRBar {
    width:80%; 
    background-color: #264d00;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

/*----------------------------Text Blocks---------------------------*/

article {
    margin-top:50px; 
    margin-left:15%; 
    margin-right:15%;
}

.articleText {
    position:relative; 
    text-align:left;
    max-width:750px;
    margin:auto;
}

#TopArticle {
    margin-top: 160px;
}

/*----------------------------Font---------------------------*/

p, ul, li, dl, dd{
	font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
	font-size:16px;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height: 20px;
}

h1 {
	font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
	font-size: 30px;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
    text-align:center;
}

h3 {
	font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
	font-size: 24px;
	font-style:normal;
	font-variant: normal;
	font-weight: 500;
}


/*---------------------------------------------------------------------------------------------------------------------------------------*/
/*Mobile Styles Section*/
/*---------------------------------------------------------------------------------------------------------------------------------------*/


@media screen and (max-width: 760px) {

    /*----------------------------General---------------------------*/

    #TopicList li {
        margin: 10px 0px;    
    }

    /*----------------------------Footer---------------------------*/
    
    .footerdiv {
        width:100%; 
        height:auto; 
        margin-top:50px; 
        display:block; 
        box-sizing:border-box; 
        position:absolute; 
        left:0px;
    }
                  
    .footerblocks { 
        height:auto;
        width:100%;
        float: left; 
        text-align:center;
        margin-bottom: 0px;
    }
    
    .footerblockslast {    
        height:auto;
        width:100%;
        float: left; 
        text-align:center;
        padding: 20px 0px;
        margin-bottom: 0px;    
    }
    
    .copyright {
        float:right; 
        font-size: 12px; 
        margin-top:0px;
    }
    
    /*----------------------------Background---------------------------*/
        
    #TextBackground {
        width: 100%;
        background-position: -200px 0px;
    }

    /*----------------------------Horizontal Bar---------------------------*/
    
    .HRBar {
        width:100%;
        max-width:none;
    }    

    .BlockContainer {
        width: 100%;
        height: auto; 
        margin-top:50px; 
        box-sizing:border-box; 
        display:block; 
        position:relative; 
        margin: 0 auto;
        margin-top: 50px;       
    }
}