@charset "utf-8";
/*
 * @Course: Intro to CSS3
 * @Author: Luis Moreno
 */

	/* Form */

	form {  
		font:100% verdana,arial,sans-serif;
		margin: 0;
		padding: 0;
		min-width: 400px;
		max-width: 500px;
		width: 460px;
		margin-left: auto;
		margin-right: auto;
		
	}

	form label { 
		display: block;
		float: left; 
		width: 50%; 
		padding: 0; 
		text-align: left;
	}

	label.error {
		float: right;
		padding-right: 3%;
		vertical-align: top;
		width: 420px;
	}

	/* Multiple Columns */

	.multi_col{
		-webkit-column-count: 3; 
		-webkit-column-gap: 1em; 
		-webkit-column-rule: 1px solid #5157A5;
		-moz-column-count: 3;
		-moz-column-gap: 1em; 
		-moz-column-rule: 1px solid #5157A5; 
		column-count: 3;
		column-gap: 1em;
		column-rule: 1px solid #5157A5;
		text-align: justify;	
	}

	/* Rotator Animation */

	.rotator_image {
		-webkit-animation-name: rotator_image;
		-moz-animation-name: rotator_image;
		-ms-animation-name: rotator_image;
		animation-name: rotator_image;
		-webkit-animation-duration: 8s;
		-moz-animation-duration: 8s;
		-ms-animation-duration: 8s;
		animation-duration: 8s;
		-webkit-animation-timing-function: ease-in-out;
		-moz-animation-timing-function: ease-in-out;
		-ms-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	}

	@-webkit-keyframes rotator_image {
		from {
			transform: rotateZ(0deg);
		}
		to {
			transform: rotateZ(180deg);
		}
		to{
			transform: rotateZ(270deg);
		}
		to {
			transform: rotateZ(360deg);
		}
	}

	@-moz-keyframes rotator_image {
		from {
			transform: rotateZ(0deg);
		}
		to {
			transform: rotateZ(180deg);
		}
		to{
			transform: rotateZ(270deg);
		}
		to {
			transform: rotateZ(360deg);
		}
	}

	@-ms-keyframes rotator_image {
		from {
			transform: rotateZ(0deg);
		}
		to {
			transform: rotateZ(180deg);
		}
		to{
			transform: rotateZ(270deg);
		}
		to {
			transform: rotateZ(360deg);
		}
	}

	@-o-keyframes rotator_image {
		from {
			transform: rotateZ(0deg);
		}
		to {
			transform: rotateZ(180deg);
		}
		to{
			transform: rotateZ(270deg);
		}
		to {
			transform: rotateZ(360deg);
		}
	}

	@keyframes rotator_image {
		from {
			transform: rotateZ(0deg);
		}
		to {
			transform: rotateZ(180deg);
		}
		to{
			transform: rotateZ(270deg);
		}
		to {
			transform: rotateZ(360deg);
		}
	}

	/* Bounce Animation */

	@-webkit-keyframes bounce {
		from {
			margin-top: 10%;
		}
		to {
			margin-top: 1%;
		}
	}

	@-moz-keyframes bounce {
		from {
			margin-top: 10%;
		}
		to {
			margin-top: 1%;
		}
	}

	@-ms-keyframes bounce {
		from {
			margin-top: 10%;
		}
		to {
			margin-top: 1%;
		}
	}

	@-o-keyframes bounce {
		from {
			margin-top: 10%;
		}
		to {
			margin-top: 1%;
		}
	}

	@keyframes bounce {
		from {
			margin-top: 10%;
		}
		to {
			margin-top: 1%;
		}
	}

	.animation{
		-webkit-animation-name: bounce;
		-moz-animation-name: bounce;
		-ms-animation-name: bounce;
		animation-name: bounce;
		-webkit-animation-duration: 2s;
		-moz-animation-duration: 2s;
		-ms-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-iteration-count: 5;
		-moz-animation-iteration-count: 5;
		-ms-animation-iteration-count: 5;
		animation-iteration-count: 5;
		-webkit-animation-direction: alternate;
		-moz-animation-direction: alternate;
		-ms-animation-direction: alternate;
		animation-direction: alternate;
		position: relative;
		right: 0px;
	}

	/* 2D Transformation */

	.trans2d{
		-webkit-transform: scale(1.2) skewY(2deg);
		-moz-transform: scale(1.2) skewY(2deg);
		-ms-transform: scale(1.2) skewY(2deg);
		-o-transform: scale(1.2) skewY(2deg);
		transform: scale(1.2) skewY(2deg);
		-webkit-transform-origin: -15%;
		-moz-transform-origin: -15%;
		-ms-transform-origin: -15%;
		-o-transform-origin: -15%;
		transform-origin: -15%;
		width: 80%;
	}

	/* 3D Transformation */

	.trans3d{
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform: perspective(300px) rotate3d(30, 20, 10, -30deg) scale3d(1.5, 1.5, 1.5);
		-moz-transform: perspective(300px) rotate3d(30, 20, 10, -30deg) scale3d(1.5, 1.5, 1.5);
		-ms-transform: perspective(300px) rotate3d(30, 20, 10, -30deg) scale3d(1.5, 1.5, 1.5);
		transform: perspective(300px) rotate3d(30, 20, 10, -30deg) scale3d(1.5, 1.5, 1.5);
		-webkit-perspective-origin: 50% 50%;
		-moz-perspective-origin: 50% 50%;
		-ms-perspective-origin: 50% 50%;
		perspective-origin: 50% 50%;
		-webkit-backface-visibility: visible;
		-moz-backface-visibility: visible;
		-ms-backface-visibility: visible;
		backface-visibility: visible;
		margin-left: 10%;
		margin-right: 10%;
		width: 20%;
	}

	/* Web Fonts */

	@font-face {
		font-family: 'roboto_condenseditalic';
		src: url('fonts/robotocondensed-italic-webfont.eot');
		src: url('fonts/robotocondensed-italic-webfont.eot?#iefix') format('embedded-opentype'),
			 url('fonts/robotocondensed-italic-webfont.woff') format('woff'),
			 url('fonts/robotocondensed-italic-webfont.ttf') format('truetype');
		font-weight: normal;
		font-style: italic;
	}

	@font-face {
		font-family: 'roboto_condensedbold';
		src: url('fonts/robotocondensed-bold-webfont.eot');
		src: url('fonts/robotocondensed-bold-webfont.eot?#iefix') format('embedded-opentype'),
			 url('fonts/robotocondensed-bold-webfont.woff') format('woff'),
			 url('fonts/robotocondensed-bold-webfont.ttf') format('truetype');
		font-weight: 900;
		font-style: normal;
	}

	@font-face {
		font-family: 'simonettablack_italic';
		src: url('fonts/simonetta-blackitalic-webfont.eot');
		src: url('fonts/simonetta-blackitalic-webfont.eot?#iefix') format('embedded-opentype'),
			 url('fonts/simonetta-blackitalic-webfont.woff') format('woff'),
			 url('fonts/simonetta-blackitalic-webfont.ttf') format('truetype');
		font-weight: 900;
		font-style: italic;
	}

	/* Hyperlinks */

	section a:link {
		text-decoration: none;
		font-weight: bold;
	}

	section a:visited {
		text-decoration: none;
		color: #FFA435;
	}

	section a:active {
		text-decoration: none;
	}

	section a:hover {
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 2px;
		-webkit-transition: letter-spacing 0.80s ease;
		-moz-transition: letter-spacing 0.80s ease;
		-ms-transition: letter-spacing 0.80s ease;
		-o-transition: letter-spacing 0.80s ease;
		transition: letter-spacing 0.80s ease;
	}

	section, article, aside, figure, header, footer{
		display: block;
	}

	nav{
		clear: both;
		border: medium outset gray;
		width: 100%;
		background-color: #FFBB68;
	}

	h2, h3, h4, h5, h6 {
		font-family: roboto_condensedbold, Courier, monospace;
		height: 10px;
		margin-left: 1%;
		margin-right: 1%;
	}

	h1{
		color: navy;
		background-color: white;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
		font-size: x-large;
		font-style: oblique;
		font-weight: 900;
		word-spacing: 10px;
		letter-spacing: 4px;
		height: 40px;
		line-height: 42px;
		width: 400px;
		-webkit-box-shadow: inset -3px -3px 2px 1px rgba(33, 98, 175, 1);
		-moz-box-shadow: inset -3px -3px 2px 1px rgba(33, 98, 175, 1);
		-o-box-shadow: inset -3px -3px 2px 1px rgba(33, 98, 175, 1);
		-ms-box-shadow: inset -3px -3px 2px 1px rgba(33, 98, 175, 1);
		box-shadow: inset -3px -3px 2px 1px rgba(33, 98, 175, 1);
		-webkit-border-radius: 80px;
		-moz-border-radius: 80px;
		-o-border-radius: 80px;
		-ms-border-radius: 80px;
		border-radius: 80px;
	}

	header {
		margin-top: 5%;
		width: 100%;
	}

	hgroup h1{
		margin-top: 1%;
		margin-right: 0;
		margin-bottom: 0;
		margin-left: 1%;
		float: left;
	}

	hgroup h6{
		width: 78%;
		margin-top: 1%;
		margin-right: 0;
		margin-bottom: 0;
		margin-left: 1%;
		float: left;
	}

	header img{
		float: left;
		width: 20%;
		border: medium outset gray;	
	}

	.mainheader{
		border: medium outset gray;
		width: 100%;
		float: left;
		background: url(embelish-bottom-right.png) no-repeat right bottom, -webkit-gradient(linear, left top, right bottom, color-stop(0.13, rgb(54, 155, 214)),color-stop(0.57, rgb(138, 199, 235)),color-stop(0.79, rgb(149, 155, 238))), rgb(255,255,255);
		background: url(embelish-bottom-right.png) no-repeat right bottom, -webkit-linear-gradient(-230deg, rgb(54, 155, 214) 13%, rgb(138, 199, 235) 57%, rgb(149, 155, 238) 79%), rgb(255,255,255);
		background: url(embelish-bottom-right.png) no-repeat right bottom, -ms-linear-gradient(-50deg, rgb(54, 155, 214) 13%, rgb(138, 199, 235) 57%, rgb(149, 155, 238) 79%), rgb(255,255,255);
		background: url(embelish-bottom-right.png) no-repeat right bottom, -o-linear-gradient(-230deg, rgb(54, 155, 214) 13%, rgb(138, 199, 235) 57%, rgb(149, 155, 238) 79%), rgb(255,255,255);
		background: url(embelish-bottom-right.png) no-repeat right bottom, -moz-linear-gradient(-230deg, rgb(54, 155, 214) 13%, rgb(138, 199, 235) 57%, rgb(149, 155, 238) 79%), rgb(255,255,255);
		background: url(embelish-bottom-right.png) no-repeat right bottom, linear-gradient(-230deg, rgb(54, 155, 214) 13%, rgb(138, 199, 235) 57%, rgb(149, 155, 238) 79%), rgb(255,255,255);
		-webkit-background-size: 15%, 100%;
		-moz-background-size: 15%, 100%;
		-ie-background-size: 15%, 100%;
		-o-background-size: 15%, 100%;
		background-size: 15%, 100%;
	}

	.main-content{
		clear: both;
		text-align: justify;
		width: 100%;
		border: medium outset gray;
		-webkit-box-shadow: inset -3px -3px 2px 1px rgba(76, 76, 76, 1);
		-moz-box-shadow: inset -3px -3px 2px 1px rgba(76, 76, 76, 1);
		-o-box-shadow: inset -3px -3px 2px 1px rgba(76, 76, 76, 1);
		-ms-box-shadow: inset -3px -3px 2px 1px rgba(76, 76, 76, 1);
		box-shadow: inset -3px -3px 2px 1px rgba(76, 76, 76, 1);
	}

	.main-content section h2{
		padding: 0% 0% 2% 2%;
		-webkit-text-shadow: 2px 3px 5px rgba(166, 99, 17, 1);
		-moz-text-shadow: 2px 3px 5px rgba(166, 99, 17, 1);
		-o-text-shadow: 2px 3px 5px rgba(166, 99, 17, 1);
		text-shadow: 2px 3px 5px rgba(166, 99, 17, 1);
	}

	section{
		background-color: #FFFFFF;
		margin-right: 1%;
	}

	section h2{
		padding: 0% 0% 2% 2%;
		-webkit-text-shadow: 2px 3px 5px rgba(23, 32, 143, 1);
		-moz-text-shadow: 2px 3px 5px rgba(23, 32, 143, 1);
		-o-text-shadow: 2px 3px 5px rgba(23, 32, 143, 1);
		text-shadow: 2px 3px 5px rgba(23, 32, 143, 1);
	}

	article{
		border: thick outset rgba(149, 155, 238, 0.9);
		margin-left: 1%;
		width: 96%;
	}

	body{
		background-color: #8AC7EB;
		color: black;
		text-align: justify;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-weight: 500;
		font-style: normal;
		font-size: larger;
		margin-left: 10%;
		margin-right: 10%;
		letter-spacing: 1px;
	}

	p{
		margin-right: 1%;
		text-indent: 1%;
	}

	footer{
/*		background-color: #959BEE; */
	}

	.footer{
		clear: both;
		text-align: center;
		border: medium outset gray;
		width: 100%;
		background-color: #FFBB68;
	}

	.sidebar{
		text-align: left;
		border: medium outset gray;
		width: 100%;
		background-color: #A66311;
	}
	.sidebar h4{
		float: left;
	}

	.author{
		font-family: roboto_condenseditalic, Courier, monospace;
		font-style: italic;
		text-align: right;
	}

	.com-date{
		font-family: simonettablack_italic, Courier, monospace;
		color: graytext;
		font-style: oblique;
		font-weight: bold;
		text-align: right;
		margin-right: 5%;
	}

	/* CSS menu*/
	#navigation {
		text-align: center;
		font-size: 1em;
		font-family: "Times New Roman", Times, serif;
		font-weight: 600;
	}

	#navigation ul{
	    margin-left: auto;
		margin-right: auto;
		text-align: center;
		width: 300px;
		padding-left: 0;		
		background-color: #4651DC;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		-o-border-radius: 10px;
		-ms-border-radius: 10px;
		border-radius: 10px;
		-webkit-box-shadow: 3px 3px 1px rgba(166, 99, 17, 0.8);
		-moz-box-shadow: 3px 3px 1px rgba(166, 99, 17, 0.8);
		-o-box-shadow: 3px 3px 1px rgba(166, 99, 17, 0.8);
		-ms-box-shadow: 3px 3px 1px rgba(166, 99, 17, 0.8);
		box-shadow: 3px 3px 1px rgba(166, 99, 17, 0.8);
	}

	#navigation li {
		list-style: none;
		border-bottom: solid black;
		border-top: solid black;
		border-width: 1px;
		background: #369cd6;
		display: inline;
	}

	#navigation a {
		color: white;
		cursor: pointer;
		display: inline;
		height: 25px;
		line-height: 25px;
		text-decoration: none;
		width: 100%;
	}

	#navigation li a:hover {
		text-decoration:underline;
		color: black;
		background: #2162af;
		position: relative;
		-webkit-transition: color 0.50s ease-out;
		-moz-transition: color 0.50s ease-out;
		-ms-transition: color 0.50s ease-out;
		-o-transition: color 0.50s ease-out;
		transition: color 0.50s ease-out;
	}

	#navigation li span {
		text-decoration: underline;
		color: black;
		background: #2162af;
		position: relative;
		display: inline;
		height: 25px;
		line-height: 25px;	
	}

	/* Drop down menu */
	#navigation .drop {
		display: inline-block;
		position: absolute;
		overflow: hidden;
		height: 0;
		opacity: 0; 
		width: auto;
		margin-top: 2%;
		margin-left: -5%;
	}

	#navigation .drop li{
		display: block;
		position: relative;
	}

	#navigation li:hover > .drop {
		height: auto;
		opacity: 1;
	}
/*
nav.toc .menu .drop {
	display: block;
	position: relative;
	width: auto; }
nav.toc .menu .drop {
	overflow: hidden;
	height: 0;
	opacity: 0; }
nav.toc .menu:hover>.drop {
	height: auto;
	opacity: 1; }

*/
/* Media Query */

@media screen and (min-width: 651px) and (max-width: 1000px){

	body{
		margin-left: 8%;
		margin-right: 8%;
		background-color: #17208F;
	}
}

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

	body{
		margin-left: 6%;
		margin-right: 6%;
		background-color: #FFE190;
	}

	.mainheader{
		float: none;
		display: block;
		padding-top: 10%;
		padding-bottom: 10%;
	}

	hgroup h1{
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	hgroup h6{
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	header img {
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: auto;
	}
	#navigation ul{
		margin-left: 1%;
		margin-right: 1%;
		width: 98%;
	}
	
	h1{
		height: auto;
		width: 100%;
	}
}