@charset "utf-8";

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;}

/*Note: using this in lieu of Javascript IE shiv*/

/*TOP HEADER*/

body {font-family:"Garamond", serif; color: rgb(63,72,204); background-color:rgb(98, 214, 247);}
/*header {margin-bottom: 10px; }*/
header a {color: rgb(63,72,204); text-decoration: none;}
h1 {margin-left: 10px; }

/*SIDE NAVIGATION*/

header {float: left; /*height: 100%;*/ 
margin-left: 10px;
margin-top: 0px;
border-top: 1.5px solid rgb(98, 214, 247);
width: 285px;
padding-left: 5px;}

nav h3 {margin-top: 25px;}

nav ul {list-style-type: none; padding-left: 0px;}
nav ul li {border-bottom: 1px solid rgb(63, 72, 204); padding-bottom: 5px;}

#logoleft {float:left;}

/*WELCOME MESSAGE*/

article {margin-left: 50%; border-top: 1.5px solid rgb(63, 72, 204);
border-left: 1.5px solid rgb(63, 72, 204);	
padding-left: 15px;
margin-top: -17%;}

article h3 {text-decoration: underline;}

article p, figcaption {font-family: Arial, sans-serif; }

figure {text-align: center;}

/*FOOTER*/

footer {text-align: right;}

/*MOBILE OPTIMIZATION*/

#topSarah {max-height: 480px; max-width: 640px;}
#bottomSarah {max-height: 650px; max-width: 662px;}

@media only screen and (max-width: 950px)
{
	nav {float: none; width: 100%; text-align: center; padding-left: 0px;}
	article {margin-left: 10px; border-right: 1px solid rgb(98, 214, 247); padding-right: 10px;}
}

/*ASSIGNMENT 3 ADDITION*/

#box1 {/*box-sizing: border-box;*/
	width: 599px; height: 400px;
	border: 20px double red;
	margin-top: 30px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;	
	border-radius: 10px;
	background-color: pink;
	padding: 0px;}
	
	#box2 {box-sizing: border-box;
	width: 609px; height: 410px;	
	border: 10px inset green;
	/*border-image: url("images/picture_frame.png") 20 round;*/ 
	margin-top: 30px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
	background-color: blue;
	padding: 0px;}