/* fort-collins-tree-care.css */

html, body {
 margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #EEEEEE;
	background-color: #10340E;
	}

h1, h2, h3 {
	font-family: 'Lustria', serif;
	font-weight: normal;
	font-style: normal;
}

h1 { font-size: 30px; margin-bottom: 20px; font-weight: bold; }
h2 { font-size: 24px; font-weight: bold; }
h3 { font-size: 18px; font-weight: bold; }

div.stripe { background-color: #D5FAC7; height: 2px; width: 100%; margin-top: 5px; margin-bottom: 5px; }
div.boxwidth { margin-left: auto; margin-right: auto; }
	
#header { color: #FFC105; margin-left: auto; margin-right: auto; }

#menu2 { text-align: center; margin-left: 10px; margin-right: 10px; }
#navphone { text-align: center; margin-left: 10px; margin-right: 10px; font-family: 'Lustria', serif; font-size: 22px; padding-left: 10px; padding-right: 10px; }
#menubutton, #menucontents, #navmenu { text-align: center; margin-left: 10px; margin-right: 10px; }
#menubutton a, #menucontents a, #navmenu a, #navphone a { color: #FFFFFF; text-decoration: none; font-family: 'Lustria', serif; font-size: 22px; padding-left: 10px; padding-right: 10px; }
#menubutton a:hover, #menucontents a:hover, #navmenu a:hover, #navphone a:hover { color: #9ecd8c; }
#menucontents { display: none; }

#maincontent { background-color: #FBF1CB; color: #333333; padding: 10px; }

.col1 { width: 96%; margin-left: 2%; margin-right: 2%; vertical-align: top; clear: both; }
.col2 { width: 46%; margin-left: 2%; margin-right: 2%; float: left; vertical-align: top; }
.clr { width: 100%; margin: 0px; padding: 0px; height: 0px; clear: both; }
.vspc { width: 100%; height: 20px; clear: both; }

#footer1 { font-family: 'Lustria', serif; color: #D5FAC7; text-align: center; margin-left: 10px; margin-right: 10px; }
#footer1 a { color: #649E4D; text-decoration: none; }
#footer2 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: right; margin: 10px; }
#footer2 a { color: #649E4D; text-decoration: none; }
#footer2 a:hover { color: #FFFFFF; }

/* responsive design section */
/* screen width > 1000px */
#header { width: 1000px; }
div.boxwidth { width: 1000px; }
#menu1 { display: block; }
#menu2 { display: none; }

/* screen width <= 1000px */
@media only screen and (max-width : 1000px) 
{
#header { width: 100%; }
div.boxwidth { width: 100%; }
}

/* screen width <= 510px */
@media only screen and (max-width : 510px) 
{
#menu1 { display: none; }
#menu2 { display: block; }
}

/* screen width <= 500px */
@media only screen and (max-width : 500px) 
{
.col2 { width: 96%; float: none; clear: both; }
}