* {
padding:0;
margin:0;
}


body {
    background-image: url("../images/confectionary.png");
}

img {
display:block;
}


div#topleft {
float:left;
margin-top:50px;
}

div#wrapper {
width: 85%;
margin: 0px auto;
background-color:white;
padding: 30px;
}

img#homebanner {
display: inline-block;
width: 100%;
margin-top: 25px;
}

img#logo {
width:200px;
clear:both;
}

img#janet {
width: 100%;
}

img#ladderbird {
width: 100%;
}


#widget {
display: inline;
width: 30%;
float: left;
}

nav {
height:20px;
line-height:20px;
margin-right:20px;
}

nav ul{
text-align:center;
}

nav li {
display:block;
width:12%;
float: right;
font-family:arial;
font-size:1em;
}

nav a {
color:#008fd5;
text-decoration:none;
display:block;
}

nav a:hover{
background:#ccebfa;
}

#active {
    background-color: #008fd5;
    color: white;
}



div#buttons img {
display:block;
float: left;
width:75px;
margin-right:10px;
-webkit-box-shadow: 5px 5px 12px 0px rgba(50, 50, 50, 0.36);
-moz-box-shadow:    5px 5px 12px 0px rgba(50, 50, 50, 0.36);
box-shadow:         5px 5px 12px 0px rgba(50, 50, 50, 0.36);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

div#topbar {
Width: 100%
}

#buttons {
float:left;
width:450px;
margin-top: 20px;
margin-bottom: 20px;
}

div#main {
float:left;
width:50%;
float:left;
}

div#portfoliomain img{
width:100%;
}


aside{
Float:right;
width:50%;
vertical-align: bottom;
}


#portfolio{
Float:left;
width:20%;
}



footer {
height: 50px;
line-height: 50px;
border-top:4px solid #008FD5;
clear:both;
}

footer ul li {
display:inline;
Font-family:arial;
font-size:.75em;
margin-right:50px
}

P {
font-family:arial;
line-height:1.75em;
color:#22445f;
}


h1 {
Font-family:americana;
font-size:4em;
color:#dcdcdc;
margin-top:20px;
}

h2 {
font-family: 'Handlee', cursive;
Font-size:2em;
padding-bottom:7px;
padding-top:20px;
color:#008FD5;
font-weight:200;
}

h3 {
Font-size:2em;
padding-bottom:14px;
color:#22445f;
}


h8 {
Font-family:arial;
font-size:5.5em;
color:#004d84;
margin-bottom:20px;
}

h9 {
font-family:americana;
Font-size:2em;
Line-height:2em;
color:#9b1305;
font-weight:200;
}

/* STRUCTURE */

#pagewrap {
	padding: 5px;
	width: 100%;
	margin: 20px auto;
}
header {
	height: 100%;
	padding: 0 15px;
}
#logos {
	width: 100%;
	float: left;
	padding: 5px 15px;
}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#logos {
		width: 100%;
		padding: 1% 4%;
	}
	
	#widget {
	width: 50%;
}

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

	#logos {
		width: 100%;
		float: none;
	}
	
		#widget {
	width: 100%;
}


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

	header {
		height: auto;
	}
	h1 {
		font-size: 2em;
	}
	#sidebar {
		display: none;
	}