/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html 
{ 
    overflow-y: scroll;
}

body { 
    background:#ffffff; 
    font-size: 1.1em; 
    color: #666666; 
    font-family: 'Cormorant Garamond', serif;
}



ol, ul { 
    list-style: none; 
    margin: 0;
}

ul li { 
    margin: 0; 
    padding: 0;
}

h1 { 
    margin-bottom: 10px; 
    color: #336699;
    font-size: 2em;
}

h2 {
    margin-bottom: 10px;
    color: #CC0000;
}

.boldText {
    font-weight: 700;
}

.quoteText {
    font-size: 1.8em;
    text-align: center;

}

a, img { 
    outline: none; 
    border:none; 
    font-weight: bold; 
    text-decoration:none; 
    color:#336699;
}

a:hover {
    color:#FFFFFF; 
    background-color:#CCCCFF;
}

p { 
    margin: 0 0 10px; 
    line-height: 1.5em; 
    font-size: 1.2em;
}

img { 
    display: block; 
    margin-bottom: 10px;
}

aside {  
    font-size: 0.9em;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
	}
	
/* Structure */


#wrapper {
	width: 96%;	
	max-width: 920px;
	margin: auto;
	padding-left:2%;
	padding-right:2%;
	} 
	

	
	socialmedia {
		width: 90%;
		margin-top:2%;
		float:left;
		margin-right: 5%;
		margin-left: 5%;
		}
		
	socialmedia img {
		display:inline;
		}

	#main {
		width: 58%;
		margin-right: 3%;
		margin-left: 2%;
		float: left;
		}

	#mainBooks {
		width: 100%;
		margin-right: 3%;
		margin-left: 2%;
		float: left;
		}

#mainNovel {
        width: 50%;
		margin-right: 2%;
		margin-left: 2%;
		float: left;
}

#subNovel {
        width: 100%;
		margin-right: 2%;
		margin-left: 2%;
        margin-top: 5%;
		float: left;
}

#quotes {
    width: 100%;
    float: left;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: 2%;
    margin-left: 2%; 
    text-align: center;
}

#block {
    width: 100%;
    float: left;
    margin-right: 2%;
    margin-left: 2%;   
}

.ruleBlock {
    width: 100%;
    height: 20px;
    display: block;
    background-color: #CC0000;
}

.ruleBlock2 {
    width: 100%;
    height: 30px;
    display: block;
    background-image: linear-gradient(to right, #adb8d4, #e3e7f2);   
}

.ruleBlock3 {
    width: 100%;
    height: 20px;
    display: block;
    background-color: #CC0000;
    margin-top: 40px;
    margin-bottom: 40px;
}

.ruleBlock4 {
    width: 100%;
    height: 20px;
    display: block;
    background-color: #CC0000;
    margin-top: 40px;  
}

.ruleBlock5 {
    width: 100%;
    height: 20px;
    display: block;
    background-color: #CC0000;
    margin-bottom: 40px;
}

.ruleShort {
    width: 30%;
    height: 5px;
    display: block;
    background-color: #CC0000;
    margin-top: 20px;
    margin-bottom: 20px;
}



		
aside {
		width: 30%;
		margin-right: 2%;
		margin-left:5%;
		float: right;
        text-align: center;
		}

aside.homeAside {
		width: 30%;
		margin-right: 2%;
		margin-left:5%;
        margin-top: 5%;
		float: right;
        font-size: .8em;
		}

asideNovel {
		margin-right: 2%;
		float: right;
}

hr {
    margin-top: 2%;
    margin-bottom: 2%;
    border: none;
    height: 0px;
    border-top: 3px solid #CC0000;
    width: 60%;
    margin-left: 20%;
    margin-right: 25%;

}

p.center {
    text-align: center;
}


/* Logo H1 */
header h1 {
	height: 137px;
	width: 100%;
	float: left;
	display: block;
	background: url(../images/enter.jpg) 0 0 no-repeat;
	text-indent: -9999px;
	}
		
/* Nav */
header nav {
	float: top;
	margin-top: 20px; 
	}
	
	header nav li {
		display: inline;
		margin-left: 15px;
        padding-top:10px;

		}

#skipTo {
	display: none;
	}
	#skipTo li {
		background: #b1fffc;
		}

/* Banner */			
#banner {
	float: left;
	margin-bottom: 15px;
	width: 100%;
	}

#banner img {
		width: 100%;
		}
#banner2 img {
		width: 20%;
		float:right;
		padding-left:3%;
		}
#banner3 {
	float: left;
	margin-bottom: 15px;
	width: 50%;	
	}	
#banner3 img {
		width: 20%;
		}

#banner4 {
	float: left;
	margin-bottom: 15px;
	width: 10%;	
	}	
#banner4 img {
		width: 40%;
		}		

#heading {
		padding-top:3%;
		}

.image_caption {
    text-align: center;
    font-size: 0.9em;
}


/* Media Queries */
@media screen and (max-width: 980px) {
    #mainNovel {
        width: 95%;
		float: none;
}
    
asideNovel {
		float: none;
        
}    
    
}



@media screen and (max-width: 780px) {
aside.homeAside {
		width: 55%;
		margin-right: 2%;
		margin-left:2%;
        margin-top: 2%;
		float: left;
        font-size: .8em;
		}

}

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

	#skipTo {
		display: block;
		}
	
	header nav, #main, aside {
		float: left;
		clear: left;
		margin: 0 0 10px; 
		width: 100%;
		}
    
		header nav li {
			margin: 0;
			background: #D9C6C2;
			display: block;
			margin-bottom: 3px;
			}
    
			header nav a {
				display: block;
				padding: 10px;
				text-align: center;
				}
    
    

    
}


/* FOR SCROLL TO TOP  */

#backtop {
	        position: fixed;
            left:auto;right: 20px;top:auto;bottom: 20px;
	        outline: none;
            overflow:hidden;
            color:#fff;
            text-align:center;
            background-color:rgba(49,79,96,0.84);
            height:40px;
            width:40px;
            line-height:40px;
            font-size:14px;
            border-radius:2px;
            cursor:pointer;
            transition:all 0.3s linear;
            z-index:999999;

            opacity:1;
            display:none;
        }
        #backtop:hover {
            background-color:#27CFC3;
        }
        #backtop.mcOut {
            opacity:0;
        }