@charset "UTF-8";

@font-face {
    font-family: "Aller-Regular";
    src: url("../fonts/Aller_Rg.ttf");
}

@font-face {
    font-family: "Aller-Italic";
    src: url("../fonts/Aller_It.ttf");
}

@font-face {
    font-family: "Aller-Bold";
    src: url("../fonts/Aller_Bd.ttf");
}

@font-face {
    font-family: "Aller-Light";
    src: url("../fonts/Aller_Lt.ttf");
}

#body {
	background-image: url("../images/tile.png");
	margin: 0px;
	font-family: "Aller-Regular";
}

h1 {
	color: rgb(160, 0, 88);
	font-family: "Aller-Bold";
	font-size: 32px;
	margin-top: 16px;
	margin-bottom: 8px;
}

h2 {
	color: rgb(160, 0, 88);
	font-family: "Aller-Bold";
	font-size: 24px;
	margin-top: 24px;
	margin-bottom: 6px;
}

a, a:visited {
	color: rgb(160, 0, 88);
	text-decoration: none;
}

p {
	font-size: 16px;
	margin-top:0px;
	margin-bottom: 16px;
	line-height: 24px;
}

p.summary {
	color: rgb(160, 0, 88);
	font-family: "Aller-Italic";
}

b, strong {
	color: rgb(160, 0, 88);
}

light {
	font-family: "Aller-Light";
}

ul {
	margin-top:0px;
	margin-bottom: 16px;
	line-height: 24px;
}

ul li {
}

table {
	border-collapse: collapse;
}

table, td, tr {
	border: 1px solid rgb(160, 0, 88);
	margin-bottom: 15px;
}

thead td {
	color: rgb(160, 0, 88);
}

#wholepage {
	background-color: rgb(246, 243, 204);
	width: 1022px;
	margin-left: auto;
	margin-right: auto;
}

#sitebanner {
	height: 350px;
	position: relative;
	background-image: url("../images/penguins.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

#sitelogo {
	position: absolute;
	top: 20px;
	left: 20px;
	height: 76px;
	width: 205px;
	background-image: url("../images/logo.png");
	background-size: contain;
	background-repeat: no-repeat;
}

#navigation {
	background-color: RGB(160,0,88);
	height: 34px;
	margin-bottom: 20px;
}

#navigation ul {
	margin: 0px;	
	padding-left: 25px;
}

#navigation ul li { 
	list-style: none;
	float: left;
	display: inline;
	padding-top: 6px;
	padding-right: 50px;
}

#navigation ul li a, #navigation ul li a:visited {
	font-size: 18px;
	color: white;
}

#navigation ul li a:hover, #navigation ul li.active a {
	color: rgb(216, 197, 0);
}

#navigation ul li.icon {
	float: right;
	padding-right: 20px;
	padding-top: 5px;
}

#content {
	padding-left: 25px;
	padding-right: 25px;
}

div.projectcontainer {
	width: 468px;
	height: 400px;
	border-style: solid;
	border-width: 1px;
	border-color: rgb(160, 0, 88);
	margin-bottom: 25px;
	float: left;
	position: relative;
}

div.projectcontainer.odd {
	margin-right: 25px;
}

div.projectheader {
	background-color: rgb(160, 0, 88);
	color: white;
	font-size: 18px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}

div.projectcontent {
}

div.projectcontentimage {
	float: right;
	margin-left: 5px;
}

div.projectcontentimage img {
	width: 150px;
	border-left-style: solid;
	border-bottom-style: solid;
	border-width: 1px;
	border-color: rgb(160, 0, 88);
}

div.projectcontentdescription {
	padding: 10px;
}

div.projecttab {
	height: 30px;
	margin: 0px;
	position: absolute;
	left: 25px;
	bottom: 0px;
}

#sitefooter {
	background-color: RGB(160,0,88);
	color: white;
	font-style: italic;
	margin-top: 50px;
	padding: 5px;
	padding-left: 25px;
	font-size: 13px;
	clear: both;
}

form {
	margin-top: 16px;
}

label {
	display: block;	
	color: rgb(160, 0, 88);
	padding-left: 1px;
	margin-top: 16px;
}

textarea {
	font-family: "Aller-Regular";
	font-size: 16px;
	line-height: 24px;
}

input {
	font-family: "Aller-Regular";
	font-size: 16px;
	line-height: 24px;
}

input[type=submit] {
	font-family: "Aller-Bold";
	font-size: 16px;
	line-height: 24px;
	color: rgb(160, 0, 88);
	margin-top: 16px;
}










/* Adjustments to elements for tablet sizes (anything smaller than 1024px)
 *
 */
 /*
@media all and (min-width: 641px) and (max-width: 1023px) {


#wholepage {
	font-family: "Aller-Regular";
	font-size: 14px;
	width: 768px;
}

#sitebanner {
	height: 263px;
	position: relative;
}

#sitelogo {
	height: 54px;
	width: 153px;
}

#sitebanner img {
	max-width: 100%;
}

#navigation {
	height: 30px;
}

#navigation ul li { 
	font-size: 16px;
}

#navigation ul li.icon {
	float: right;
	padding-right: 20px;
	padding-top: 3px;
}

}
*/

/* Adjustments to elements for phone sizes
 *
 */
@media all and (max-width: 1023px) {

h1 {
	font-size: 24px;
}

h2 {
	color: rgb(160, 0, 88);
	font-size: 16px;
}

#wholepage {
	width: 100%;
}

#sitebanner {
	width: auto;
	height: 220px;
}

#sitelogo {
	top: 10px;
	left: 10px;
	width: 204px;
	height: 72px;
}

#navigation {
	height: 40px;
}

#navigation ul {
	margin: 0px;	
	padding: 0px;
	margin-left: 5px;
	margin-right: 5px;
}

#navigation ul li {
	margin: 0px;
	padding: 0px;
	padding-top: 7px;
	width: 33%;
	text-align: center;
}

#navigation ul li a {
	font-size: 20px;
}

#navigation ul li.icon {
	display: none;
}

#content {
	margin-left: 5px;
	margin-right: 5px;
}

div.projectcontainer {
	width: 100%;
	height: auto;
	float: none;
	padding-bottom: 10px;
	border-right-style: none;
	border-left-style: none;
}

div.projectcontainer.odd {
	margin-right: 0px;
}

div.projectcontentimage img {
	border-right-style: solid;
}

div.projectcontentdescription {
	padding-left: 0px;
	padding-right: 0px;
	font-size: 14px;
}

textarea {
	width: 100%;
}

input[type=text], input[type=email] {
	width: 70%;
}

}