@import url(http://fonts.googleapis.com/css?family=Montserrat);

header, main, nav, article, footer, h1 { display: block; }

body { font-family: 'Montserrat', sans-serif; 
	background-color: #0A2550; 
	background-image: radial-gradient(#FFFFFF, #0A2550); 
	background-repeat: no-repeat; 
	padding: 0; }

#header { margin: auto;
	max-width: 960px; 
	padding: 0; 
	background-color: #0A2550; }

#container { margin: auto;
	max-width: 960px; 
	padding: 0; }
	
/* header */
header { margin: 0 0 10px 0; }

button { font-family: 'Montserrat', sans-serif; 
	background-color: transparent; }
	
.btn { float: right;
	width: 25px; 
	margin: 4px 10px 0 0;}
	
.logo { float: left;
	padding: 0;
	margin: 4px 5px 0 5px; 
	width: 25px; 
	height: 25px;
	background-image: url(images/logo.png);
	background-size: 100%;
	background-repeat: none;
	background-position: right 0; }

.logo:hover { background-position: right -27px; }

/* nav */
.navmenu { position: relative;
	display: inline-block;
	float: right; }
	
.navicon { float: left; 
	width: 15px;
	height: 1px;
	background-color: #FFFFFF;
	position: relative;
	margin: 12px 0 0 12px;
	display: block; }

.navicon:after, .navicon:before { content: '';
	width: 100%;
	height: 1px;
	background-color: #FFFFFF;
	position: absolute; }

.navicon:after { top: 4px; }
.navicon:before { top: 8px; }
	
.navbutton { color: white;
	font-size: 14px;
	font-weight: bold;
	border: 0;
	cursor: pointer;
	padding: 7px 7px 7px 3px; 
	text-transform: uppercase; }

.navmenulinks { display: none;
	position: absolute;
	background-color: #405577;
	min-width: 150px;
	z-index: 100; 
	text-transform: uppercase; }

.navmenulinks a { padding: 5px 10px;
	text-decoration: none;
	display: block;
	color: white; }

.navmenulinks a:hover {background-color: white;
	color: #0A2550; }

.navmenu:hover .navmenulinks { display: block; }

.navmenu:hover .navbutton { color: #0A2550; }

/* main */
main { background-color: #FFFFFF; }

footer { color: #FFFFFF; 
	clear: both;
	text-align: center;
	margin: 5px 0 50px; }
	
footer a { color: white; }

/* headings */
h1 { font-size: 25px;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; 
	margin: 0; }
		
h1 a { text-decoration: none; }
h1 a:link { color: #0A2550; }
h1 a:visited { color: #0A2550; }
h1 a:hover { color: #405577; }

h2 { color: #FFFFFF; 
	text-align: center; 
	background-color: #0A2550;
	margin-top: 0;
	margin-bottom: 0; 
	border-style: solid;
    border-width: 5px 0px;
    border-color: #FFFFFF;
	font-size: 18px; }

/* index nav headings*/
.indimgnav h3 { text-align: center;
	display: block;
	position: absolute;
	z-index: 2;
	color: #FFFFFF;
	background: rgb(0, 0, 0); 
	background: rgba(0, 0, 0, 0.7);	
	width: 100%;	
	top: 5%;
	margin: 0;	
	padding: 0;
	font-size: 14px; }

.indimgnav h3:hover { display: none; }

/* category nav headings */
.catimgnav h3 { text-align: center; 
	display: block;
	position: absolute;
	z-index: 2;
	color: #FFFFFF;
	background: rgb(0, 0, 0); 
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 80px;
	bottom: 15%;
	margin: 0;
	padding: 0;
	font-size: 12px; }

.catimgnav h3:hover { display: none; }

/* rival page headings */
h4 { color: #FFFFFF; 
	padding: 0 5px;
	margin: 0;
	background-color: #0A2550; }
	
h5 { color: #FFFFFF;
	background-color: #0A2550;
	width: 50%;
	margin-bottom: 0px;
	font-size: 16px;
	font-weight: bold; }

/* back to top link */
h6 { text-align: center;
	color: #FFFFFF; 
	background-color: #0A2550; 
	width: 50%;
	margin: auto;
	font-size: 14px; 
	clear: both; }
	
h6 a { text-decoration: none; 
	padding: 10px 50px; }
h6 a:link { color: #FFFFFF; }
h6 a:visited { color: #FFFFFF; }
h6 a:hover { background-color: #FFFFFF; 
	color: #0A2550; }

/* index.html */
#indbod { height: 98%; }

#indtable { border: 0;
	width: 100%;
	height: 94%;
	background-color: #FFFFFF;
	border-spacing: 0; }

#indtable td { padding: 0; }

#feabod { max-width: 200px; 
	margin: auto;
	padding: 0; }

#footer { background-color: #0A2550;
	border-top: 2px solid #FFFFFF;
	color: #FFFFFF; 
	clear: both;
	text-align: center; }
	
#footer a { color: white; }

.bloghead {  padding: 0;
	border-bottom: 2px solid #FFFFFF; }

.featuredhead { width: 25%;
	border-bottom: 2px solid #FFFFFF; }

.blogcol { height: 100%; }

.featuredcol { height: 100%; }

.indimgnav { position: relative;
	float: left;
	clear: none;
	overflow: hidden; 
	width: 100%; }

.indimgnav img { position:relative;
	z-index: 1; }

.indimgnav img:hover { z-index: 5; }

/* category pages */
.catimgnav {
	position: relative;
	float: left;
	clear: none;
	overflow: hidden; 
	width: 20%; }

.catimgnav img { position:relative;
	z-index: 1; }

.catimgnav img:hover { z-index: 5; }
	
/* rivals page */
.rivalstop { text-align: center; }

.rivalstop2 { margin: 0 0 5px 0;
	text-align: center; 
	background-color: #0A2550;
	font-size: 18px; }

.rivalstop2 a:link { color: #FFFFFF; 
	padding: 0 50px; }
.rivalstop2 a:visited { color: #FFFFFF; }
.rivalstop2 a:hover { background-color: #FFFFFF; 
	color: #0A2550; }

.rivalsarticle { vertical-align: top; 
	padding: 5px;
	text-align: justify;
	background-color: #FFFFFF; }
	
.rivalsimg { width: 100%;
	margin: auto;
	text-align: center; 
	background-color: #0A2550;
	font-size: 14px; 
	max-width: 480px; }

.rivalsimg a:link { color: #FFFFFF; }
.rivalsimg a:visited { color: #FFFFFF; }
.rivalsimg a:hover { background-color: #FFFFFF; 
	color: #0A2550; }

.rival1div { float: left;
	width: 49%; }
	
.rival2div { float: right;
	width: 49%; }

.rival1div2 { float: left;
	width: 49%; }
	
.rival2div2 { float: right;
	width: 49%; }

.rival1imgs { width: 50%;
	padding: 0; 
	float: left; }

.rival2imgs { width: 50%;
	padding: 0; 
	float: right; }
	
.rival1imgs h4 { margin: 0 4px;
	text-align: center; }
.rival2imgs h4 { margin: 0 4px;
	text-align: center; }
	
/* related section */

.relimgnav { position: relative;
	float: left;
	clear: none;
	overflow: hidden; 
	width: 25%; }

.relimgnav img { position:relative;
	z-index: 1; }

.relimgnav img:hover { z-index: 5; }

.relimgnav h3 { text-align: center; 
	display: block;
	position: absolute;
	z-index: 2;
	color: #FFFFFF;
	background: rgb(0, 0, 0); 
	background: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 80px;
	top: 0;
	margin: 0;
	padding: 0;
	font-size: 12px; }
	
.relimgnav h3:hover { display: none; }

/* comments section */
.share { width: 100%;
	margin: auto;
	text-align: center;
	padding: 0; 
	background-color: #0A2550; }

.facebook { width: 35%;
	float: right; }

.comments { max-width: 700px;
	width: 62%;
	margin: auto;
	padding: 5px;
	float: left; 
	background-color: #FFFFFF; }
	
/* ads */
.search { float: right;
	padding: 4px 5px 0; }

.ad728x15 { width: 100%;
	clear: both;
	text-align: center;
	padding: 2px 0 5px 0;
	background-color: #405577;
	border-style: solid;
    border-width: 2px 0 2px 0;
    border-color: #FFFFFF; }

.ad960x50 { width: 100%;
	clear: both;
	text-align: center;
	background-color: #0A2550;
	border-style: solid;
    border-width: 2px 0 2px 0;
    border-color: #FFFFFF; }

/* mobile */
@media screen and (max-width: 728px) {	
	.logo { margin: 1px 5px 0 0;
	width: 17px;
	height: 17px;
	background-size: 100%; }
	
	.logo:hover { background-position: right -18px;}
	
	.btn { margin: 1px 4px 0 0; 
	width: 17px; }

	.navicon { margin: 5px 0 0 5px; }
	
	.navbutton { font-size: 14px;
	padding: 0px 2px 0px 2px; }
	
	.navmenulinks { right: 0; }

	/* headings */
	h1 { font-size: 14px; 		
		bottom: 0; 
		padding: 1px 2px 0 0; }

	h2 { font-size: 14px; }

	.featuredhead { width: 30% }

	.indimgnav h3 { height: auto;
	top: 0;
	font-size: 12px; 
	padding: 0; }

	.indimgnav h3 a { padding: 0; }

	.catimgnav h3 { height: auto;
	top: 0;
	font-size: 10px; }

	.catimgnav h3 a { padding: 0; }

	.relimgnav h3 { height: auto;
	top: 0;
	font-size: 10px; }

	.relimgnav h3 a { padding: 0; }
	
	h4 { font-size: 12px;
	margin: 0 0 5px 0; }
	
	h5 { font-size: 12px; }

	h6 { font-size: 12px; }

	h6 a { padding: 5px 20px; }

	/* nav menus */
	#indbod { height: 95%; }
	
	/* category nav */
	.catimgnav { width: 33.3333%; }

	/* rivals page */
	.rivalstop2 a:link { padding: 0; }

	.rival1div { float: none; 
	width: 100%; }

	.rival2div { float: none; 
	width: 100%; }
	
	.rivalsimg { padding: 0;
	font-size: 12px;
	float: none;
	margin: auto; }
	
	.rivalsarticle { padding: 5px; }
	
	.rival1imgs { width: 100%; 
	clear: both; }

	.rival2imgs { width: 100%; 
	clear: both; }
	
	.relimgnav { width: 50%; }
	
	/*comments section mobile*/
	.facebook { display: block;
	width: 100%;
	float: none;
	margin: auto;
	text-align: center; }

	.comments { width: 100%;
	float: none; }
	
	/* ads */
	.search { display: none; }
}

@media screen and (max-width: 568px) {	
	.btn { display: none; }

}

@media screen and (max-width: 170px) {	
	.indimgnav h3 { display: none; }
}