/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* BASE STYLES */

body {
	background: #f5f5f5;
	margin: 0px auto 20px auto;
	font-family: Avenir, Arial, sans-serif; 
	line-height: 1.4;
	color: #444;

}

#wrapper {
	max-width: 940px;
	margin:auto;
}

header {
	text-align: center;
	padding:0px;
	background-color: #45666a;
}


.row {
width: 100%;
max-width: 1140px;
min-width: 700px;
margin: 0 auto;
margin-top: 10%;
overflow: hidden;
}

/* LINKS */
a:link {
	color: #21a9f8;
	font-size: 14px;
	text-decoration: none;
		
}
.aside a:visited {
	color: #45666a;
}
a:hover, a:active {
	color: #302e2e;
	text-decoration: none;
}


h1 {
	font-weight: normal;
	font-size: 18px;
	color: grey;
	text-align: center;
	padding:20px 10px 40px 10px;
}

	h2 {
		font-weight: lighter;
		font-size: 18px;
		text-align: left;
		color: #302e2e;

	}

		h3, h3 a {
			font-weight: normal;
			font-size: 18px !important;
			text-align:left;
			color: #302e2e !important;
		}
			h4 {
				font-style:normal;
				font-weight: normal;
				font-size: 12px;
				text-align: left;
				color: #aaa;
			}
			
			h5 {
				font-size: 12px;
				color: grey; 
			}
			
		p {
			font-weight: normal;
			font-size: 14px;
			color: grey;
			padding-bottom: 20px;
}

strong {
	font-style: italic;
	color: #aaa;
}

/* NAV STYLES */
nav {
	font-weight: lighter;
	font-size: 18px;
	text-align: center;
	padding: 10px 0px 40px 0px;
	margin-bottom: 20px;
}


nav ul {
	margin: auto;
	float:left;
	left: 50%;
	position: relative;
	text-align: center;
}

nav li {
	float: left;
	display: block;
	margin: 0 30px;
	position: relative;
	right: 50%;
}

nav a:link, nav a:visited {
	font-weight: normal;
	color: #eae2d0;
	text-decoration: none;
}

nav a:hover, nav a:active {
	color: #302e2e;
	text-decoration: blink;
}

/* MAIN STYLES */

.leftColumn {
	max-width:650px;
	float:left;
}

.leftcolumn2 {
	max-width: 650px;
	float:left;
}

.banner {
	overflow: scroll;
}

.thumbnail {
	float:left;
	margin: 10px 20px 10px 20px;
	width: auto;
	margin-top: 20px;
	color: #45666a;
}

	.thumbnail img {
		width:100%;
	}
.thumbnail2 {
	float:left;
	margin: 10px 10px 10px 10px;
}
	
.gallery {
	float: left;
	width: auto;
	margin: 20px 10px 20px 0px;
}

	.gallery img {
		width:100%;
	}

.top {
	text-align: center;
}

.author {
	font-size: 12px;
}


img {
    max-width: 100%;
}

.project {
    position: relative; 
    /* For our container we need to set the position as 
     * relative so we can set the span to be absolute 
     * and overlap the image */
    float: left;
	margin: 20px;
    text-align: center;
}

.project img {
    display: block;
    /* Images tend to have a few extra pixels at the bottom 
     * unless you force them to display as block elements. 
     * If you don't do this your overlay box won't match up 
     * perfectly to the true height of the image. */
}


.project a:link, .project a:visited {
    color: white;
    text-transform: lowercase;
    /* This class ensures our links don't take on the blue 
     * underline default styles */
}


/* LISTS */
ul {
	margin-bottom: 0;
	margin-left: 0px;

}
ul {
	list-style-type:none;
}

/* FOOTER STYLES */

footer {
	clear:both;
	border-top: 1px dotted #444;
	margin-top: 20px;
	text-align: center;
	padding: 5px;
	font-size: 12px;
	font-style: normal;
}

/* LAYOUT */


aside {
	float: right;
	width: 260px;
	margin-left: 10px;
}

/* Here's where all the magic happens! */
.overlay {
    position: absolute; /* This lets us overlap the image - only works because we set relative on the parent */
    top: 0; /* Our 4 offsets stretch the box to all four edges of the image */
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #350; /* A hex colour fallback for older browsers */
    background-color: rgba(198,27,54,0.9); /* An rgba colour to get the transparency on the overlay colour */
    opacity: 0; /* We've set opacity to 0 so our box is invisible first up */
    padding-top: 40%; 
    /* This will vertically centre our text. You might need to tweak this 
     * number depending on text size and number of lines. */
    
    /* The transition below makes for a smooth hover of our colour box */
    -webkit-transition: all 0.3s ease-out; 
     -moz-transition: all 0.3s ease-out; 
       -o-transition: all 0.3s ease-out; 
          transition: all 0.3s ease-out; 

}


.overlay:hover, .overlay:active { /* We've attached the :hover directly to our class */
    opacity: 1; /* Our opacity of 1 now makes our overlay box visible on hover */
}



/* Media Queries / used for Adaptive & Responsive Layouts */
	/* Tablet size/screens */

	@media only screen and (max-width:960px) {
		body {
			width: 700px;
			}
	
			.thumbnail {
				width:270px;
				}
			.gallery {
				width:650px;
				}


	@media only screen and (max-width:700px) {
		body {
			width: 300px;
		}
		
		.thumbnail {
			float: none;
			width: 100%;
			margin: 0 0 20px 0;
		}
		
		.gallery {
			float: none;
			width: 100%;
			margin: 0 0 20px 0;
		}
		
		nav li {
			margin: 0 10px;
		}
	}

/* @media only screen and (min-width:768px)and (max-width:990px) {
	
}*/