/* CSS Document */
html {background-color:  #FC0;}
body {-webkit-text-size-adjust: 100%;}
.wrapper {width: 1000px; margin: 0 auto; position: relative;}
p {font-family: "museo";}
.clear-both {line-height: 1pt; clear: both;}

/*Nav rules*/
.nav-background {width: 100%; height: 40px; display: block; background-color: black; z-index: 2; position: relative; top: 0px;}
nav li {list-style: none; float: left; padding-top: 12px;}
nav li a {color: white; text-decoration: none; margin-right: 20px; height: 25px; font-family: "nimbus-sans-condensed", "franklin-gothic-urw", Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif; font-size: 1.2em;}
.home {width: 20px; height: 20px; background-image:url(../images/Home.png); background-size: 20px; background-repeat:no-repeat; display: block; margin-top:-4px;}
nav li a:hover {color: #FC0;}
.home:hover { background-position:0px -24px;}

.links {float: right;}
.links li {float: right; margin-left: 10px; margin-top: 5px; height: 30px; width: 30px; display: block;}
.links li a {height: 30px; width: 30px; display: block;}
.twitter {background-image: url(../images/twitter-logo.png); background-size: 30px;}
.instagram {background-image: url(../images/instagram-logo.png); background-size: 30px;}
.linkedin {background-image: url(../images/linkedin-logo.png); background-size: 30px;}
.linkedin:hover, .twitter:hover, .instagram:hover {background-position: 0 -30px;}


/*Header rules*/
.header-image {width: 100%; height: 560px; border-bottom: solid black 5px; background-image: url(../images/jungle-001.jpg); background-repeat:no-repeat; background-size: 100%; overflow:hidden; position: relative; background-color: #453110;}


/*Content rules*/
.monkey {width: 143px; height: 131px; background: url(../images/monkey-normal.png) no-repeat 0px 0px; display: block; margin-top: -131px;cursor: pointer;}
.monkey:hover {background-position: 0px -131px;}
.content {width: 940px; min-height: 340px; display: block; background-color: white; border-top: solid 5px #676767; margin-top: -350px; padding: 30px; font-family: "museo";}
article {width: 670px; margin-right: 30px; float: left;}
aside {width: 240px; float: left;}
h1 {font-family: "nimbus-sans-condensed"; font-size: 3em; border-bottom: solid 2px black; margin-bottom: 30px; text-transform: uppercase;}
.content p {line-height: 1.5em; margin-bottom: 1.3em;}
.content-image {width: 50%; margin-bottom: 1.3em; margin-right: 1.3em; float: left;}
.content a {text-decoration: none; color: #453110; font-weight:700;}
.content a:hover {color: brown;}
.small-pic {width: 200px; float: left; margin-right: 10px; margin-bottom:10px;}
.news-end {border-bottom: solid 2px lightgrey; margin-bottom: 20px; padding-bottom: 5px; text-align: right; clear: both;}
.news-end p {margin-bottom: 0px;}
.news-end p b {font-weight: 700;}


/*Sidebar rules*/
.web-side {width: 240px; height: 240px; display: block; background-image: url(../images/websites-sidebar.jpg); margin-bottom: 30px; position: relative;}
.print-side {width: 240px; height: 240px; display: block; background-image: url(../images/print-sidebar.jpg); margin-bottom: 30px; position: relative;}
.photo-side {width: 240px; height: 240px; display: block; background-image: url(../images/photography-sidebar.jpg); position: relative; background-size: 240px;}
.side-text  {width: 240px; color: white; background-color: black; opacity: 0.7; position: absolute; bottom: 0;}
.side-text p {opacity: 1; margin-left: 10px; margin-bottom: 5px; margin-top: 5px; font-family: "nimbus-sans-condensed"; text-transform: uppercase; font-size: 1.4em;}


/*Contact rules*/
.input_box, .input_area {float: left; width: 480px; border: none; margin-bottom: 10px; background-color: #ffcc00; height: 25px; padding: 5px; font-size: 1em; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
.input_area {height: 200px;}
.input_title {float: left; width: 180px; margin-bottom: 10px; height: 30px;}
.input_button {float: right; width: 100px; height: 30px; background-color: black; color: white; border: none; margin-left: 20px;
font-family: "nimbus-sans-condensed", Tahoma, Georgia, "Times New Roman"; font-size: 0.9em;} 
.input_button:hover {background-color: #3EA400;}


/*Test*/
.test, .test-1, .test-2, .test-3, .test-4, .test-5 {width: 40px; height: 40px; display: block; overflow: hidden;}
.test-1 {background-color: red;}
.test-2 {background-color: blue;}
.test-3 {background-color: yellow;}
.test-4 {background-color: green;}
.test-5 {background-color: black;}


/*Media rules*/
@media (max-width: 1100px){
    .wrapper {width: 800px;}
	.content {width: 740px;}
	article {width: 520px;}
	aside {width: 190px;}
	.web-side, .print-side, .photo-side {width: 190px; height: 190px; background-size: 190px;}
	.side-text {width: 190px;} 
}