@charset "utf-8";
/* CSS DOCUMENT FOR SHARK WEEKEND */

body {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 16px;
	text-align: left;
	line-height: 24px;
	color: #333;
	background-color: #c8f2ff;
	/* ============= Working on an image
	background-image: url("../images/shark-weekend-logo.png");
	background-repeat: no-repeat;
	background-position: right top;
	background-attachment:fixed;
	================= */
	margin: 0;
	padding: 0;
	
}

h1,h2,h3,h4 {
	font-family: Lilita+One, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	color: #222;
}

h1 {
	Font-size:48px;
	line-height: 48px;
}

h2 {
	color: #fff;
	font-size: 30px;
	line-height: 30px;
	background-color: #150078;
	padding: 10px;
}

h3 {
	font-size: 26px;
	line-height: 26px;
}

h4 {
	font-size: 24px;
	line-height: 24px;
}

blockquote {
	font-size: 20px;
	background-color: #eee;
	padding: 30px 10px;
	
}

/* NAV STYLES======================== */

nav {
	background-color: #150078;
	padding: 16px;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 20px;
}

nav li {
	display: inline;
	margin-right: 48px;
}

nav a {
	text-transform: uppercase;
}

nav a:focus, nav a:hover {
	color: #fff;
	text-decoration: none;
}

nav a:active {
	color: #ff9900;
}


/* MAIN STYLES =============== */

main {
	background-color: #fff;
	border: 3px solid #150078;
	padding: 4px 32px 24px;
	width: 68%; /* 680 pixels */
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 20px;
	min-height: 300px;
}

.full-width-main {
	width: 100%;
}
/* ASIDE STYLES =============== */

aside {
	background-color: #fff;
	border: 3px solid #150078;
	padding: 4px 16px 24px;
	width: 30%; /* 300 pixels */
	height: 300px;
	float: right;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 20px;

}

aside h2 {
	background-color: transparent;
	color: #333;
	padding: 0px;
}

/* FOOTER STYLES =============== */

footer {
	color: #eee;
	clear: both;
	background-color: #150078;
	padding: 32px 8px 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-alignt: center;
	height: 200px;
	
		
}
/* LINK STYLES======================== */

a:link {
	color: #ef3b29;
	font-weight:bold;
	text-decoration: none;
}

a:visited {
	color: #f37254;
}

a:focus {
  	color: #222;
	text-decoration: underline;
 
}
a:hover {
	color: #222;
	text-decoration: underline;
}

a:active {
	color: #00aeed;
}

/* HEADER STYLES =============== */

header {
	text-align: center;
		
}

/* IMAGE STYLES =============== */

.float-left {
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}

.float-right {
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
}

.image-margin {
	margin-top: 30px;
}

.image-size {
	max-width: 100%;
}

/* BUTTON STYLES =============== */

.button:link,
.button:visited {
	color: #fff;
	background-color: #ff9900;
	border: #150078 solid 2px;
	text-decoration: none;
	text-align: center;
	padding: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	display: block;
	margin-top: 20px;
}

.button:focus,
.button:hover {
	background-color: #150078;
}

.button:active {
	background-color: #ff9900;
}
/* TABLE STYLES ===================== */

table {
	width: 100%;
	font-size: 20px;
	
}

th {
	background-color: #444;
	color: #fff;
}

tr {
	background-color: #fafafa;
}

tr:nth-child(even) {
	background-color: #BBEBF7;
}

td,tr,th {
	border: 3px solid #fff;
	padding: 1em;
	vertical-align: top;
	text-align: left;
}

table caption {
	color: #999;
	text-transform: uppercase;
}

/* FORM STYLES =================*/

label {
	text-align: left;
	width: 25%;
	float: left;
	padding-right: 0.5em;
}

.textbox {
	width: 70%;
	padding: 0.5em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}

.submit {
	margin-left: 26.3%;
}
/* CUSTOM STYLES =============== */

.message-bar {
	width: 100%;
	margin: 0;
	padding: 1em;
	color: #fff;
	background-color: #ff9900;
	text-align: center;
}

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

.light-grey-background {
	background-color: #eee;
	padding: 10px;
}

.medium-grey-background {
	background-color: #ccc;
	padding: 10px;
}
/* 48em (768px and smaller) ================= */
@media screen and (max-width: 48em) {
	main {
		width: 100%;
	}
	aside {
		width: 100%;
	}
	footer {
		width: 100%;
	}
}
/* 40em (640px and smaller) ================= */
@media screen and (max-width: 40em) {
	.float-left,
	.float-right {
		width: 100%;
	}
}
/* 30em (480px and smaller) ================= */
@media screen and (max-width: 30em) {
	main {
		padding: 0.125em 0.5em 0.25em;
	}
	aside {
		padding: 0.125em 0.5em 0.25em;
	}
	footer {
		padding: 0.125em 0.5em 0.25em; 
	}
	blockquote {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
}