/*
Theme Name: Special Sections
Theme URI:http://vvhmag.com/
Description: A custom theme for special sections
Author: Swift Communications
Author URI: http://www.swiftcom.com/
Version: 1.0
*/

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 1em Georgia, Times, "Times New Roman", serif;}

/* We like off-black for text. */
body, select, input, textarea {color: #333;}

a {color: #69f; text-decoration: none;}
a:hover {text-decoration: underline;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #696969; color: #fff; text-shadow: none;}
::selection {background: #696969; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}


/* And here begins the WordPress fun.
-------------------------------------------------------------------------------*/

body {
	background-image: url('_/images/bg-main.png');
}

#wrapper {
	width: 1020px;
	margin: 8px auto;
	background-color: #fff;
}

header {
	padding: 23px 2% 8px;
	text-align: center;
	border-bottom: 1px solid #9a9a9a;
	margin-bottom: 8px;
}

article {
	padding: 2% 2% 0 2%;
	text-align: center;
}

article h1 {
	margin-bottom: 0;
	line-height: 1.5;
}

#content {
	width: 100%;
}

#content #arrow {
	width: 20%;
	text-align: right;
	float: left;
	position: relative;
}

#content #arrow img { 
	width: 110px;
	right: -50%;
	top: 500%;
	position: absolute;
}

#content #cover {
	width: 80%;
	text-align: left;
	float: left;
}

#content #cover img {
	width: 70%;
}

#content #social {
	width: 100%;
	float: left;
	margin-bottom: 25px;
}

#content #social .addthis_share_toolbox {
	margin: 0 auto;
	display: inline-block;
}

#content #ad {
	width: 100%;
	float: left;
	margin-bottom: 15px;
}
footer {
	border-top: 1px solid #9a9a9a;
	text-align: center;
	padding: 7px 2% 14px;	
	font-size: .75em;
	line-height: 1.5;
}

footer ul li {
	display: inline-block;
}

footer ul li.name {
	text-transform: uppercase;
}


/* Media queries!
-------------------------------------------------------------------------------*/


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

	#wrapper {
		width: 96%;
		margin: 2%;
	}
	
	#content #arrow img { 
		top: 100%;
	}
	
	#content #ad {
		display: none;
	}
	
	footer ul li {
		display: block;
	}
	
	footer ul li.divider {
		display: none;
	}

}

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

	header img {
		width: 45%;
	}
	
	article h1 {
		font-size: .9em;
	}
	
}