@charset "utf-8";
/* CSS Document */

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

body { 
  font-family: 'Open Sans', sans-serif;
  color: #888;
}

h1 {
		font-size: 20px;
		font-weight:200;
		text-transform:uppercase;
	}

/* STRUCTURE */

#pagewrap {
	text-align:center;
	padding: 5px;
	max-width: 1820px;
	margin: 20px auto;
}
header {
	height: 70px;
	padding: 0 15px;
}
#content {
	/*width: 290px;*/
	width: 31.33%;
	float: left;
	padding: 5px 15px;
}

#middle {
	width: 31.33%; /* 294px Account for margins + border values */
	float: left;
	padding: 5px 15px;
	margin: 0px 0px 5px 0px;
}

#sidebar {
	/*width: 270px;*/
	width: 31.33%;
	padding: 5px 15px;
	float: left;
}
footer {
	clear: both;
	padding: 0 15px;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 41%;
		padding: 1% 4%;
	}
	#middle {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	
	#sidebar {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

	header, footer {
		padding: 1% 4%;
	}
}

/* for 700px or less */
@media screen and (max-width: 600px) {

	#content {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	header {
		height: auto;
	}
	h1 {
		font-size: 2em;
	}
	#sidebar {
		/*display: none;*/
	}

}

header, #content, #middle, #sidebar {
	margin-bottom: 5px;
}

#pagewrap, header, #content, #middle, #sidebar, footer {
	border: 0px solid #ccc;
}

#content a, #sidebar a,  #middle a {
	opacity: 1;
	filter: alpha(opacity=100);
	display: block;
	overflow: hidden;
	transition: all 300ms ease-out 0s;
	-moz-transition: all 300ms ease-out 0s;
	-webkit-transition: all 300ms ease-out 0s;
	-o-transition: all 300ms ease-out 0s;
}

.box > a > img {
    -webkit-transform: scale(1) rotateZ(0deg);
    -moz-transform: scale(1) rotateZ(0deg);
    -ms-transform: scale(1) rotateZ(0deg);
    -o-transform: scale(1) rotateZ(0deg);
    transform: scale(1) rotateZ(0deg);
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.box:hover > a > img {
    -webkit-transform: scale(1.2) rotateZ(0deg);
    -moz-transform: scale(1.2) rotateZ(0deg);
    -ms-transform: scale(1.2) rotateZ(0deg);
    -o-transform: scale(1.2) rotateZ(0deg);
    transform: scale(1.2) rotateZ(0deg);
}

#content a:hover, #sidebar a:hover,  #middle a:hover {
	opacity: 0.9;
	filter: alpha(opacity=90);
}

.box {
    float: left;
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 15px 0 25px;
    color: #97abaa;
	transition: all 300ms ease-out 0s;
	-moz-transition: all 300ms ease-out 0s;
	-webkit-transition: all 300ms ease-out 0s;
	-o-transition: all 300ms ease-out 0s;
}

.box:hover {
    -moz-box-shadow: 5px 0px 30px rgba(0,0,0,0.4);
    -webkit-box-shadow: 5px 0px 30px rgba(0,0,0,0.4);
    -o-box-shadow: 5px 0px 30px rgba(0,0,0,0.4);
    box-shadow: 5px 0px 30px rgba(0,0,0,0.4);
    z-index: 1999;
}

#content a.weblinks, #sidebar a.weblinks, #middle a.weblinks {
	color: #777;
	font-size:16px;
	text-decoration:none;
	transition: all 300ms ease-out 0s;
	-moz-transition: all 300ms ease-out 0s;
	-webkit-transition: all 300ms ease-out 0s;
	-o-transition: all 300ms ease-out 0s;
}

#content a:hover.weblinks, #sidebar a:hover.weblinks, #middle a:hover.weblinks {
	color: #06C;
}