@charset "UTF-8";
/* CSS Document */
/*Authored by Ryan Ray Neff 3-6-14 for CIS 244-Intro to CSS Winter 2014*/

/*This is a univeral reset, to negate any margin and padding settings the browser may have*/
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */
/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }
/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }
/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with 
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }
/* de-italicize address */
address { font-style:normal }

html,
body {
	height: 100%;
	min-height:100%;
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	background: rgb(46,54,64);	
}

/*this is a wrapper for the main body of the site*/
#page-wrapper { 
	width:960px;
	min-height: 100%; 
	height:auto;
	background-color:white;
	margin-left:auto; /*this keeps the wrapper centered in the window*/
	margin-right:auto; /*this keeps the wrapper centered in the window*/
	box-shadow:0 0 20px #000;
	overflow:auto;/*this extends the background color to the bottom of the div, other wise it would collapse because it contains floats*/
	z-index:-1;
}

/*this gradient background is used in the header and the footer, so I constructed it as a class for easy re-use*/
.greengradbg {
	background: #8e9738; /* Old browsers */
	background: -moz-linear-gradient(top, #8e9738 0%, #c6c731 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8e9738), color-stop(100%,#c6c731)); 			/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #8e9738 0%,#c6c731 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #8e9738 0%,#c6c731 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #8e9738 0%,#c6c731 100%); /* IE10+ */
	background: linear-gradient(to bottom, #8e9738 0%,#c6c731 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e9738', endColorstr='#c6c731',GradientType=0 ); /* IE6-9 */	
}

/*I used the html5 "header" tag instead of a div for the top logo and top navigation, because it has more semantic meaning than a div*/
header {
	overflow:hidden;/*this prevents scrollbars on the header in ie and firefox*/	
}

/*this hides the menu button that is used only in the mobile site*/
.menu-button{
	display:none;
}

/*This styles the website title "tech time" exclusively*/
header h1 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:700;
	font-size:7em;
	color:white;
	line-height:1em;
	height:85px;
	display:inline;
}

/*to duplicate the skinny font in "time" i used a span tag*/
header h1 span {
	font-weight:300;
	font-style:normal;
}

/*This styles only the tagline*/
header h2 {
	font-family: "Open Sans", sans-serif;
	text-transform: uppercase;	
	text-align: right;
	margin-top:-5px;
	padding:1em;
	color:rgb(46,54,64);
	float: left;
	width: 8em;
	font-weight:700;
	height:95px;
}

/* This styles the site navigation, i chose the html5 nav tag instead of a div or UL, because it has more semantic meaning*/
nav {
	clear:left;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:300;
	float:left;
	width:100%;
	list-style: none;
	background-color:rgb(46,54,64);
	font-weight:500;
	font-size:1.6em;
	text-transform:uppercase;
	padding-top:.25em;
	padding-bottom:.25em;
}

nav li {
     float: left;
}	

nav a{
	padding:.25em .5em .25em .5em;
	color: rgb(238,121,46);
}	
	
nav a:focus,
nav a:hover {
	background: #233;
	color: grey;
}

/*This indicates the page you are currently on*/
#currentpageindicator {
	background-color:rgba(255,255,255,.1);
}

/*this is a container for the main content below the header, the "articles" and "sidebar" divs go inside this*/
.main {
}

/*the featured articles go inside this div*/
#articles {
	width:640px;
	float:left;
	box-sizing: border-box;/*This keeps the padding from expanding the box width*/
	-moz-box-sizing:border-box;
	padding:10px;
	z-index:1;
}

/*the following h1, h2, and p tags style the articles in the "main" div*/
h1 {
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size:2em;
	line-height:1em;
	color:rgb(46,54,64);
}
	
h2 {
	font-size:1.2em;
	color:rgb(142,151,56);
}
	
p {
	text-indent:1em;
}

/*primary article is the biggest article on the page, and should appear first*/
#primaryarticle {
	width:100%;
	height:auto;
	border-bottom: thin rgb(238,121,46) solid; /*divider line between this article and the article below*/
	padding-bottom:10px;
	margin-bottom:10px;
}

/*every image should have a caption or photo credits, so I put images for articles inside figure tags, so it functions just like a div, but with more semantic meaning, and it handles the caption positioning too.  Each article inside the "main" div has a figure with it*/
/*figure styles the box that contains the image and the caption*/
figure {
	background-color:rgb(85,95,116);
	width:100%;
	margin:10px 0px 5px 0px;/*the figure has some default margins that needs to be reset*/
}

/*this styles the caption below the images*/
figcaption {
	font-size:.7em;
	font-style: italic;	
	text-align:right;
	padding-right:5px;
	color:white;
}

/*this styles all the imgs on the page, as well as the figure images*/
img {
	width:100%;
	}

#secondaryarticle {
	float:left;
	width:50%;
	padding-right:10px;
	box-sizing: border-box;/*This keeps the padding from expanding the box width*/
	-moz-box-sizing:border-box;
	border-right: thin rgb(238,121,46) solid; /*divider line between this article to the right*/
}

#tertiaryarticle {
	float:right;
	width:50%;
	padding-left:10px;
	box-sizing: border-box;/*This keeps the padding from expanding the box width*/
	-moz-box-sizing:border-box;
}

/*this sets the default styles for the sidebar floating to the right of the large articles*/
#sidebar {
	float: right;
	width: 310px;
	box-sizing: border-box;/*This keeps the padding from expanding the box width*/
	-moz-box-sizing:border-box;
	margin-right:10px;
	margin-top:10px;
}

#sidebar h1 {
	text-transform: uppercase;	
	color: rgb(238,121,46);
	background-color: rgb(46,54,64);
	font-weight:700;
	font-size:1.2em;
	height:40px;
	text-align:center;
	line-height:2em;
}
	
#sidebar h2 {
	padding: 0px 10px 0px 5px;
	color: rgb(255,255,255);
	font-weight:400;
	font-size:1.2em;
}
	
#sidebar p {
	font-weight:400;
	color:white;
	text-indent:0;
	font-size:.8em;
	padding:0px 0px 10px 10px;
	border-bottom:1px solid rgb(46,54,64);
}	

/*mostpopular is the first section in the sidebar on the right*/
#mostpopular {
	text-align: left;
	background-color:rgb(85,95,116);
	color:rgb(46,54,64);
	font-weight:700;
	height:auto;
	box-sizing: border-box;/*This keeps the padding from expanding the box width*/
}

/*this floats the small images to the left of the p text blurb*/
#mostpopular img {
	width:auto;
	margin:5px 10px 0px 0px;
	float:left;	
}

/*this styles the advertisement in the sidbar*/
#advertisement {
	padding-top:10px;
}
#advertisement p {
	color: rgba(46,54,64,.3);
	text-align:center;
	font-size:.75em;
	padding-bottom:0;
}

/*default for address is italics, the universal reset took car of it*/
address{
	width:100%;
	text-align:center;
}

/*this affects the social media icons floating in the top right - the icons are a font, "font-awesome"-designed for bootstrap*/
#socialmedia  {
	float: right;
	font-size: 2em;
}

#socialmedia li {
	float:right;
}

#socialmedia li a {
	color:white;
	opacity:0.5;
	padding-right:.5em;
}

/*this makes the social media icons glow on hover*/
#socialmedia li a:hover {
	opacity:1;
	text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
}	

/*this styles the footer*/	
#footer{
	clear:both;
	padding-top:10px;
	padding-bottom:10px;
}