@charset "UTF-8";

#logo img {
		max-width:200px;
		max-height:200px;
	}



/* All over it. (Global) */
html,button,input,select,textarea {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
}

body {
	width: 100%;
	margin: 0 0 20px;
}


h1,h2,h3,h4,h5,h6 {
	font-weight: 100;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

/* Up top! (Header) */
header {
	color: #000;
}

header h1 {
	background: #FFF;
	box-shadow: 0 1px 10px 1px #222;
	float: left;
	font-size: 36px;
	width: auto;
	margin: 0 20px 0 30px;
	padding: 0px;
}
header h1 img {
	position:relative;
	top:4px;
}
header h2 {
	background: #000;
	color: #FFF;
	margin: 0;
	padding: 10px;
}

header h4,header p {
	margin: 5px 0 0;
}

/* Your Body is a Wonderland (Body) */
#wrapper {
	clear: both;
	margin: 20px 0;
	padding: 0 40px;
}

#elements,#words {
	width: 47%;
}

/* The colors, Duke, the colors! (#Colors) */
#colors {
	clear: both;
}

.square,.bigsquare {
	box-shadow: 1px 1px 10px 1px #222;
	float: left;
	height: 60px;
	width: 60px;
	margin: 0 15px 10px 0;
	padding: 5px;
}

#square-one,#square-two,#square-three,#square-four,#square-five {
	height: 100%;
	width: 100%;
}

#square-one {
	background: #F6C1D6;;
}

#square-two {
	background: #3684B4;
}


#square-three {
	background: #5FCDD9;
}
#square-four {
	background: #6BC9F7;
}


#square-five {
	background: #CEFAF8;
}


/* Stroke the Furry Wall (#Textures) */
#textures {
	clear: both;
	padding-top: 20px;
}

.bigsquare {
	height: 120px;
	width: 120px;
}

#texture-one,#texture-two,#texture-three {
	height: 100%;
	width: 100%;
}

#texture-one {
	background-image: url(darkcyantile.png);
}

#texture-two {
	background-image: url(lightcyantile.png);
}

#texture-three {
	background-image: url(pinktile.png);
}

/* The Easy Button(s) (#Buttons) */
#buttons {
	clear: both;
	padding-top: 20px;
}

#buttons a {
	background-color: #3684B4;
	color: #FFF;
	float: left;
	font-size: 20px;
	text-decoration: none;
	margin: 0 10px 10px 0;
	padding: 10px;
	font-family:kalam;
	border-radius:10px;
}

#buttons a:hover {
	background-color:#6BC9F7;
}



/* Gosling-Approved Typography (#Typography) */
#typography {
	font-family: Lato;
}
#typography h1 {
	font-size: 40px;
	font-weight: 100;
	line-height: 34px;
	margin: 0;
}

#typography h3 {
	font-size: 24px;
	line-height: 26px;
	margin: 20px 0 0;
	font-family: kalam;
}

#typography p {
	font-size: 20px;
	line-height: 22px;
}

#typography a {
	color:#3684B4;
	text-decoration:none;
	border-bottom: 1px dotted #6BC9F7;
}
#typography a:hover {
	background-color: #F6C1D6;

}





.font {
	color: gray;
	font-size: 12px;
	margin: 0;
}

/* Redundant adjectives are redundant. (#Adjectives) */
#adjectives span {
	font-size: 36px;
	margin-right: 30px;
}

#adjectives .big {
	font-size:60px;
}
#adjectives .medium {
	font-size:48px;
}
#adjectives .darkblue {
	color:#3684B4;	
}
#adjectives .lightblue {
	color:#6BC9F7;	
}
#adjectives .black {
	color:#000000;	
}
#adjectives .pink {
	color:#F6C1D6;	
}
#adjectives .fontone {
	font-family:Lato;
}
#adjectives .fonttwo {
	font-family:Kalam;
}



/* Down low! (Footer) */
footer {
	clear: both;
	color: gray;
	font-size: 14px;
	line-height: 22px;
	padding: 40px;
}



footer p {
	margin: 0;
}

footer .alignleft p {
	font-style: italic;
}

footer .alignright p {
	font-weight: 700;
}

/* Make it look good on your new-fangled Palm Pilot! (Media Queries) */
 
@media (max-width: 600px) {
	#elements, #words {
		width: 100%;
	}
	
	#colors, #textures, #buttons {
		padding-top: 10px;
	}
	
	#typography {
		margin-top: 20px;
	}
}

@media (max-width: 400px) {
	header h1, header h2, header h4, header p {
		text-align: center;
	}
	
	#logo h1 {
		float: none;
		display: block;
		margin: 0 auto;
		padding: 10px;
	}
	
}

/* If you're going to print it, you should probably use the PSD: http://styletil.es/downloads/Style_Tile_Template.psd.zip
...but sometimes we have preemptive printers for bosses. :) So, let's make it one page, hide the footer, and ask Webkit to print background images. */

@media print {
	* {
		-webkit-print-color-adjust: exact;
		overflow: hidden;
		box-shadow: none !important;
	}
	
	#logo {
		overflow: visible;
	}	
	
	.square,.bigsquare {
		height: 40px;
		width: 40px;
	}
	
	#colors, #textures, #buttons {
		padding-top: 5px;
	}
	
	footer {
		display: none;
	}
}