@import url(reset.css);
@import url(rwd.css);


*{	
	padding:0;
	margin:0;
}

#wrapper {width:960px; margin:auto; overflow: auto; padding: 20px; }
#wrapper1{width:960px; margin:auto; overflow: auto; padding: 20px; }
#wrapper2{width:960px; margin:auto; overflow: auto; padding: 20px; }

#myCarousel{width:960px;overflow: auto; padding:20px; margin-left: -35px;}

body  	{
		background-color:#ffffff;
		font-family: Arial;
		text-align:left;
}

header 	{
		height:200px;
		text-align:center;
		margin-top: 40px;  
}

header img {width:100%;}

h1 		{	
		color: #000000;
		font-family: Arial, sans-serif;
		text-align: center;
		padding: 10px ;
		margin:5px;
		font-size:2em;
		font-weight:bold;
}

h2	{	color: #000000;
		font-family: Arial, sans-serif;
		text-align: left;
		padding: 10px ;
		margin: 5px;
		font-size: 1em;
		font-weight:bold;		
}

h3	{	color: #000000;
		font-family: Arial, sans-serif;
		text-align: left;
		padding: 10px ;
		margin: 5px;
		font-size: 1em;
		font-weight:bold;		
}

  
p {		color:#000000;
		font-family: Arial, sans-serif;
		text-align: justify;
		margin:30px;
}

img {margin:20px, 30px, 30px, 30px;}

#wrapper hr {border:0;
 									width: 100%;
  									background-color: #000000;
									height: 1px;
}

#wrapper1 hr {border:0;
 									width: 100%;
  									background-color: #000000;
									height: 1px;
}

#wrapper2 hr {border:0;
 									width: 100%;
  									background-color: #000000;
									height: 1px;
}
/*navigation*/

nav{
	position:fixed;
	top:0;
	left:0;
	margin:auto;
	width:100%;

	text-align: center;
	background-color: #000000;
}

.nav ul{
	list-style-type: none;
	overflow: visible;
	text-align:center;
}

li 	{
    float: left;
}

nav a{height:10px; }

a:link, a:visited {   
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    color: white;
    background-color: #000000;
    text-align: center;
    padding:10px;
    text-transform: uppercase;

} 

a:hover, a:active {
    background-color: #555;
}


/* 3 column STRUCTURE */

header, #content, #middle, #sidebar {
	margin-bottom: 10px;
}

#content {
	width: 300px;
	float: left;
	padding: 10px ;
	margin: 10px ;
}

#middle {
	width: 300px; /* Account for margins + border values */
	float: left;
	padding: 10px ;
	margin: 10px ;
}

#sidebar {
	width: 300px;
	float: left;
	padding: 10px ;
	margin: 10px ;
}


#content 	li {text-align: left;}
#middle 	li {text-align: left;}
#sidebar 	li {text-align: left;}



#content ul {list-style-image: url(images/raindrop10percent.jpg);
			margin-left:10px;
			padding:20px;
			margin-bottom: 50px;
}

#middle ul {list-style-image: url(images/raindrop10percent.jpg);
			margin-left:10px;
			padding:20px;
			margin-bottom: 50px;
}

#sidebar ul {list-style-image: url(images/raindrop10percent.jpg);
			margin-left:10px;
			padding:20px;
			margin-bottom: 50px;
}

#content 	h2 { padding: 20px;text-align: center;font-weight: bold;}
#middle 	h2 { padding: 20px;text-align: center;font-weight: bold;}
#sidebar 	h2 { padding: 20px;text-align: center;font-weight: bold;}



#sidebar 	img {padding:20px;
				float:center;}



#about	img {float:left; margin:10px;
			padding: 10px;}

#about h1{text-align: left;}

#contact img {float:left;}

#contact h1{text-align: left;}

#footer p {float:left;}

hr {border:0;
 	width: 100%;
  	background-color: #000000;
	height: 1px;
}

#blog	h1{text-align:left;}

#post	img {float:right;
			position:relative;
			padding: 20px;
			margin-left: 30px ;		
}

#post h1{text-align: left;}

#post ul {list-style-image: url(images/raindrop10percent.jpg);
			margin-left:10px;
			padding:20px;
			margin-bottom: 50px;
}

#post li {text-align: left; 
			margin-bottom: 20px; }





/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 41%;
		padding: 1% 4%;
	}
	#middle {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	
	#sidebar {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

	header, footer {
		padding: 1% 4%;
	}
}


#shield img {float:right;}








/************************************************************************************/
/* for 700px or less */
@media screen and (max-width: 600px) {

	#content {
			width: auto;
			float: none;
	}
	
	#middle {
			width: auto;
			float: none;
			margin-left: 0px;
	}
	
	#sidebar { width: auto;
				float: none;
	}

}

/************************************************************************************/

/* for 480px or less */
@media screen and (max-width: 480px) {

	header { height: auto;}
	h1 {font-size: 2em; }

	#sidebar {display: none; }
}