/*	Assignment 2
   	Cathy Gurski
	gurski-assignment5.css */

html, body {
	height: 100%;
	overflow-x: hidden;
	color: #303E5C;
	background-color: #FFF4E6;
	margin:0;
	font-size:16px !important;
	font-family: Helvetica, sans-serif;
}

header {
	background-color: #334b6e;
	padding:20px;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}


header h1, header h2 {
	color: #FFFFFF !important;
	letter-spacing: 5px;
	font-weight: normal;
}

/* Logo Area Header */

#logoArea {
	width:100%;
	margin-left: 70px;
	margin-top:10px;
	margin-bottom:-5px;
}
	/* Fonts */

	html,body,h1,h2,h3,h4,h5,h6 {
		color: #303E5C!important;
		letter-spacing: 1px;
		font-weight: normal;
	}

	/* Font Sizes */
	h1{font-size:36px}
	h2, .pageTitle{font-size:30px}
	h3{font-size:24px !important}
	h4{font-size:20px}
	h5{font-size:18px}
	h6{font-size:16px}

.pageTitle {
	text-align: center;
	margin-top:15px;
}


article h2, h3 {
	margin-top:0px;
}

article {
	margin-bottom: 20px !important;
}

.grayBox {
	width:80%;
	margin:auto;
	padding:20px;
	border: 1px solid #303E5C;
	border-radius: 8px;
	background-color: #E6E8EC;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

#articleContents {
	width:90%;
	margin:auto;
}

#leftColumn {
	width: 40%;
	float:left;
	overflow: hidden;
	margin-right:20px;
}

#rightColumn {
	overflow: hidden;
}

input {
	font-size:14px;
	width: 30%;
	color: #303E5C;
	border: 1px solid #303E5C;
	margin-bottom:20px;
	padding:5px;
}

#areaOutput,
#perimOutput {
	margin-bottom:20px;
}

#formContents {
    border: 1px solid #303E5C;
 	width: 90%;
    margin-bottom: 10px;
    padding: 20px 10px 20px 10px;
    background-color: #F1F0F3;
    border-radius: 8px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

form {
	margin-top: 8px;
}

#canvas {
	margin-top:8px;
	cursor: crosshair;
	background-color:#FCFCFC;
	border: 1px solid #303E5C;
	border-radius: 8px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    position:relative;
    width:600px;
    height: 500px;
}

#message {
	font-size: 14px;
	color:red !important;
	margin-bottom:8px;
}

#button {
	margin-top:10px;
	text-align: center;
}
button {
	font-size: 16px;
	background-color: #303E5C;
	border: 1px solid #303E5C;
	color: #F1F0F3;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	border-radius: 8px;
	padding:8px;
}

button:hover {
	background-color: #F1F0F3 !important;
	color: #303E5C !important;
}