/* 
    Document   : mainstyles
    Created on : Feb 6, 2014, 9:07:13 PM
    Author     : ac5xh
    Description:
        Purpose of the stylesheet follows.
*/

body{
    
    background-repeat: no-repeat;
    background-position: center;
    background-color: #BDBDBD;
    margin: 0;
}


a{
    text-decoration: none;
}

.welcome-body{
    background-attachment: fixed;
    background-image: url(../img/starfield.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-size: cover;
}

.welcome-body img{
    position: absolute;
    top: 5px;
    left: 5px;
    height: 95%;
    width: 95%;
    opacity: .35;
    z-index: -10;
}

.welcome-section{
    margin: 5% 2%;
    padding: 0;
    height: 25em;
    font-family: Times New Roman;
    width: 96%;
    
}

.welcome-section p{
    font-size: 2em;
}

#firstsection{
    margin-top: 5%;
    text-align: center;
    border-radius: 50px;
    color: #E6E6E6;
}

#firstsection img{
    height: 70%;
    width: auto;
    float: right;
    opacity: .85;
}

#secondsection{
    text-align: center;
    /*background-image: url(../img/welcomeskein.png);
    background-size: 96% 96%;
    background-repeat: no-repeat;*/
    background-color: #E6E6E6;
    border-radius: 50px;
    border-style: double;
    border-width: 8px;
}

#thridsection{
    text-align: center;
    border-radius: 50px;
    color: #801010;
}

.body{
    width: 96%;
    margin: 1% 2%;
}

.maincontent{
    float: left;
    width: 65%;
    margin: 1% 3%;
}

.imgleft{
    position: fixed;
    top: 24%;
    opacity: 0.05;
    z-index: -10;
    margin: 5%;
    
}

#whisper{
    height:50%;
    width: auto;
    top: 65%;
}


.imgcenter{
    position: fixed;
    top: 50%;
    left: 35%;
    opacity: 0.08;
    z-index: -10;
}

.imgright{
    position: fixed;
    bottom: 25%;
    right: 1%;
    opacity: 0.05;
    z-index: -10;
}
.mainheader img{
    width: 100%;
    height: auto;
    margin: 0;
    
}

.mainheader nav{
    background-color: #666;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: .2% auto;    
}

.mainheader nav ul{
    list-style:none;
    margin: 0 auto;
    position: relative;
    display: inline-block;
}

.mainheader nav ul li{
    float: left;
}

.mainheader nav a:link, .mainheader nav a:visited{
    color: #FFF;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav.active a:visited{
    background-color: #CF5C3F;
    text-shadow: none
}


.mainheader nav ul li a{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 0;
}

.mainheader nav ul ul {
    display: block;
    background-color: #666;
    position: absolute; 
    top: 100%;
    margin: 0;
    padding: 0;
}

.mainheader nav ul li:hover > ul {
	display: block;
	
}

.mainheader nav ul ul li {
    float: none;
    /*position: relative;*/
    top: 100%;
    background-color: #666;
    padding-left: 0;
    margin: 0;
}

.mainheader nav ul ul li a{
    padding: 0;
    margin: 0;
}


.slide-out:hover{
    margin-left: 0px;
}

.slide-out{
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    background-color: #686868;
    height: 25%;
    width: 10%;
    color: #fff;
    position: absolute;
    margin-left: -15%;
    float: left;
    
}

.slide-out p{
    -webkit-transform: rotate(90deg);
    margin-left: -10%;
    margin-right: -20%;
}

.slide-out ul {
    list-style: none;
    padding: 0 3%;
}

.slide-out ul li a {
    padding: 0;
    margin: 0;
    border-radius: 5px;
}

.slide-out a:link, .slide-out a:visited {
    color: #FFF;
    display: inline-block;
    padding: 7px 7px;
    height: 10px;
} 

.slide-out a:hover, .slide-out a:active {
    background-color: #CF5C3F;
    text-shadow: none
}


.top-content{
    float: left;
    background-color: #FFF;
    padding: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 2% 0;    
}

.bottom-content{
    float: left;
    padding: 2%;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 2% 0;    
}

.character {
    height: 200px;
    width: 100%;
    float: left;
    clear: both;
    margin-top: 2%;
}

.organization{
    height: 225px;
    width: 100%;
    float: left;
    clear: both;
    margin-top: 2%;
}

.datafield{
    padding: .5%;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-top: .5%;
    width: 55%;
    height: 150px;
    float: left;
}

.datafield img {
    float: right;
    width: auto;
    height: 45%;
}

.datafieldbody{
    width: 70%;
    margin: 0 2%;
    float: left;
}

.smalldata {
    height: 155px;
    width: 12%;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 1%;
    float: left;
    text-align: center;
}

.smalldata img{
    width: 50%;
    height: auto;
    margin: -1% 25% 5% 25%;
    border-radius: 25px;
}

.smalldata h1,h2,h3,h4,h5{
    margin: .5% 0;
}
.article-info{
    color: #9D9D9D;
}

.top-aside{
    width: 20%;
    float: left;
    background-color: #FFF;
    padding: 1%;
    margin: 2%;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.data_supliment {
    width: 20%;
    float: right;
    background-color: #FFF;
    padding: 1%;
    margin: 2% 1% ;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainfooter {
    width: 100%;
    float: left;
    background-color: #666;
    margin: 2% 0 2% 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
    /* clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em; */
}

.mainfooter p {
    width: 92%;
    margin: 2% auto;
    color: #FFF;
}

@media only screen and (min-width: 300px) and (max-width: 700px){
	
	.body{
            width: 100%;
            margin: 0;
        }
        
        .welcome-body{
            width: 94%;
            margin: 0 3%;
            background-size: cover;
        }
	
        .welcome-section {
            font-size: .6em;
        }
        .mainheader nav{
            height: 80px;
            display: none;
	}
	.maincontent{
            width: 94%;
	}
	
        .top-content {
            width: 94%;
            margin: 2% 0%;
            
	}
	
	.bottom-content{
            width: 94%;
            margin: 2% 0%;
	}
	
	.top-aside{
            display: none;
		
	}

	.slide-out{
            -moz-transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
            margin-top: 1%;
            margin-left: -10%;
            float: left;
            width: 15%;   
	}
	
        .character {
            width: 94%;
            padding: 3%;
               
        }
	       
        .datafield{
            width: 94%;
            margin: 2% auto;
        }
        
        .data_supliment{
            display: none;
        }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){ 
    .body{
            width: 100%;
            margin: 0;
        }
        
        .welcome-body{
            width: 94%;
            margin: 0 3%;
            background-size: cover;
        }
	
        .welcome-section {
            font-size: .6em;
        }
        .mainheader nav{
            height: 80px;
            display: none;
	}
	.maincontent{
            width: 94%;
	}
	
        .top-content {
            width: 94%;
            margin: 2% 0%;
            
	}
	
	.bottom-content{
            width: 94%;
            margin: 2% 0%;
	}
	
	.top-aside{
            display: none;
		
	}

	.slide-out{
            -moz-transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
            margin-top: 1%;
            margin-left: -10%;
            float: left;
            width: 15%;   
	}
	
        .character {
            width: 94%;
            padding: 3%;
               
        }
	       
        .datafield{
            width: 94%;
            margin: 2% auto;
        }
        
        .data_supliment{
            display: none;
        }
    
    
}