/*
============================
DESKTOP AND TABLET STYLES
============================
*/

@media only screen and (min-width: 481px) {
	
/* styles for page body*/

body {
	font-family: "Arial", sans-serif;
	font-size: large;
	background: white url("images/clayback2.png") bottom repeat-x fixed;
}

/* styles for page wrapper */
.wrapper {
	margin: 0 10%;
}

/* styles for header element with class "claytop", allowing for potential other header elements */
.claytop {
	margin: 0;
	background: #4DA6DB;
	padding: 10px 20px; 
	color: #FFFFFF;
	border-radius: 30px;
	font-size: 125%;
}

/* 5/6: style to make logo responsive */

.responsive {
	max-width: 100%;
	height: auto;
}

/* styling for main body content*/
/* 4/30: added border styles to .claymain class for consistent site decoration. dotted seemed like a playful, friendly style. */
main {
	background: #fdffe2;
	border-left: 5px dotted #4DA6DB; 
	border-right: 5px dotted #FFB355;
	border-radius: 30px;
	padding: 20px 50px;
	overflow: auto;
}

blockquote {
	border-radius: 30px;
	background: linear-gradient(rgba(16, 95, 142, 0.4), rgba(16, 95, 142, 0));
	padding: 20px;
	font-weight: bold;
	width: 30%;
	text-align: center;
	margin: auto;
}



/* styles for tables */

table {
	margin: auto;
}

th {
	margin: 5%;
	background: white;
	border-radius: 15px;
	padding: 10px;
	border: 2px dotted #FFB355;
}

tr td {
	padding: 7px 0;
	margin: 7px 0;
	border: 2px dotted #4DA6DB;
	background: white;
	border-radius: 15px;
	text-align: center;
}

/* styles for figure and figcaption */

figure {
	padding: 0;
	margin: 0;
	float: right;
}

figcaption {
	width: 366px;
	padding: 10px;
}


/* 4/30: I thought that rounded edges and a subtle box-shadow would make the photos fit better in the site design. This section still needs some work to ensure the flow I want.

5/7: On further review I'm honestly fine with the current flow.*/

img.claypics {
	border-radius: 20px;
	box-shadow: 5px 5px rgba(16, 95, 142, 0.4);
	margin: 10px;
}

/* styling for form elements */

.req {
	color: #FF8C00;
	font-weight: bold;
}

.opt {
	color: #686868;
}

div.formRow {
	margin: 10px 0px;
}

input {
	margin-left: 5px
}

fieldset {
	border-radius: 15px;
	background: #d5eaf6;
}

legend {
	border-radius: 15px;
	background: #ffe8cc;
	padding: 7px;
}

textarea {
	margin-top: 10px;
	height: 100px;
	width: 95%;
}

/* styling for horizontal nav, in order of specificity */
.claynav ul {
	margin: 0;
	padding: 0;
}
.claynav ul li {
	text-decoration: none;
	display: inline;
	margin: 0 15px 0 0;
}
.claynav ul li a {
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
}

.claynav ul li a:hover {
	color: #F4FE3A;
}

/* styles for footer */
footer {
	text-align: center;
	margin-top: 0;
	margin-bottom: 50px;
	background: #FFB355;
	border-radius: 30px;
	padding: 5px;
}

footer address a {
	color: #0781C9;
	text-decoration: none;
}

/* style to conceal footer nav on desktop and tablet */
.clayfoot {
	display: none;
}
}

/*
==============
PHONE STYLES
==============
*/

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

/* style to conceal top nav on mobile */
	
.claynav {
	display: none;
}

/* styles for page body - font and background image*/

body {
	font-family: "Arial", sans-serif;
	font-size: large;
	background: white url("images/clayback2.png") bottom repeat-x fixed;
}

/* styles for page wrapper */
/* 5/7: Wrapper margins shrunk to allow more screen real estate for content */

.wrapper {
	margin: 0 2%;
}

/* styles for header element with class "claytop", allowing for potential other header elements */
.claytop {
	margin: 0;
	background: #4DA6DB;
	padding: 5px 10px; 
	color: #FFFFFF;
	border-radius: 15px;
	font-size: 125%;
}

/* 5/6: style to make logo responsive */

.responsive {
	max-width: 100%;
	height: auto;
}

/* styling for main body content*/
/* 4/30: added border styles to .claymain class for consistent site decoration. dotted seemed like a playful, friendly style. */
/* 5/7: Border, margin, and padding sizes decreased to allow more screen real estate for text on small screens.*/

main {
	background: #fdffe2;
	border-left: 2px dotted #4DA6DB; 
	border-right: 2px dotted #FFB355;
	border-radius: 15px;
	padding: 10px 25px;
	overflow: auto;
}

blockquote {
	border-radius: 15px;
	background: linear-gradient(rgba(16, 95, 142, 0.4), rgba(16, 95, 142, 0));
	padding: 10px;
	font-weight: bold;
	width: 30%;
	text-align: center;
	margin: auto;
}



/* styles for tables */

table {
	margin: auto;
}

th {
	margin: 5%;
	background: white;
	border-radius: 15px;
	padding: 10px;
	border: 2px dotted #FFB355;
}

tr td {
	padding: 7px 0;
	margin: 7px 0;
	border: 2px dotted #4DA6DB;
	background: white;
	border-radius: 15px;
	text-align: center;
}

/* styles for figure and figcaption */

figure {
	padding: 0;
	margin: 0;
	float: right;
}

figcaption {
	width: 366px;
	padding: 10px;
}

/* 4/30: I thought that rounded edges and a subtle box-shadow would make the photos fit better in the site design. This section still needs some work to ensure the flow I want.

5/7: On further review I'm honestly fine with the current flow.*/

img.claypics {
	border-radius: 20px;
	box-shadow: 5px 5px rgba(16, 95, 142, 0.4);
	margin: 10px;
}

/* styling for form elements */

.req {
	color: #FF8C00;
	font-weight: bold;
}

.opt {
	color: #686868;
}

div.formRow {
	margin: 10px 0px;
}

input {
	margin-left: 5px
}

fieldset {
	border-radius: 15px;
	background: #d5eaf6;
}

legend {
	border-radius: 15px;
	background: #ffe8cc;
	padding: 7px;
}

textarea {
	margin-top: 10px;
	height: 100px;
	width: 95%;
}

/* styles for nav on mobile */

.clayfoot ul {
	margin: 0;
	padding: 0;
}
.clayfoot ul li {
	text-decoration: none;
	display: inline;
	margin: 0 15px 0 0;
}
.clayfoot ul li a {
	text-decoration: none;
	color: #000000;
	font-weight: bold;
}


/* styles for footer */
footer {
	text-align: center;
	margin-top: 0;
	margin-bottom: 50px;
	background: #FFB355;
	border-radius: 30px;
	padding: 5px;
}

footer address a {
	color: #0781C9;
	text-decoration: none;
}
	
}