body {font-family: 'Muli', sans-serif; color:#000; font-size:100%; margin:0;}
.page {width:1024px; margin:0 auto; background-color:#F1F1F1;}

.header {width:100%; background-image:url('images/pattern-sml.png'); padding-bottom:0px; margin-bottom:10px; border-bottom:5px solid #CCC;}
.header-bar {width:100%; height:5px; background-color:#8CC63F}
.header-title {float:right; margin-top:50px; font-size:22px;}
.header-content {width:80%; margin:0 auto;}


.footer {width:100%; padding:10px 0; text-align:center; background-color:#CCC; }
.footer-link {text-align:center; padding-top:20px;}

.nav {width:100%;}
.nav-item {float:left; width:16%; height:30px; color:#000; font-size:1.1em; border-bottom:5px solid #CCC; display:block; text-align:center;}
.nav-item:hover {float:left; width:16%; color:#808080; border-bottom:5px solid #8CC63F; display:block; text-align:center;}
.nav-edge {float:left; width:10%; height:30px; border-bottom:5px solid #CCC;}

.content {width:80%; margin:0 auto; padding:0 0 20px 0;}
.logo {float:left; margin-top:10px;}
.linkedin {float:right; margin-top:50px; margin-left:10px;}
.div-thirds {width:26%; margin:.5%; padding:5px 3%; float:left; background-color:#ddd; height:230px; border-radius:2px;}
.div-thirds-sml {height:auto; text-align:center}
.index-img {float:left; display:block; width:29%; background-color:#ccc; padding:1%; margin:0 1.5% 0 0;}
.projects-img {float:left; padding:0; width:33%;}
.caption {background-color:#ddd; font-size:.8em; width:240px; padding:5px 10px; font-style:italic; }
.caption2 {width:370px;}
.caption3{width:220px;}
.separator {display:block; margin:60px auto;}
.contact-separator {margin:30px auto}
.clear {clear:both;}

a {text-decoration:none; color:#6AA015}
a:hover {color:#808080}
h2 {font-weight:normal; color:#808080}
h3 {color:#6AA015; font-size:1.2em; padding-top:1em;}
h4 {color:#6AA015}
p {font-weight:1em;}
ul {padding-left:10px;}

#peta-name {padding-bottom:0; margin-bottom:0}
#peta-qual {font-size:.8em; font-weight:bold; padding-top:0; padding-bottom:20px; color:#808080;}
#tagline {float:right; color:#6AA015; font-size:.7em; font-style:italic; font-weight:normal;}
#contact {margin-left:38%;}

@media only screen 
and (max-device-width : 480px) {
.page {width:100%; margin:0 auto !important;}
 .logo {width:35%; margin-bottom:5px}
 .header-img {width:100%; height:30px}
 .header-title {float:right; margin-top:0px;}
 .header-content {width:90%; margin:0px auto;}
 h2 {font-size:1em;}
 .separator {width:100%; height:36px; margin:30px auto;}
.nav-item {float:left; width:33.3%; height:30px; color:#000; font-size:1.1em; border-bottom:5px solid #CCC; display:block; text-align:center;}
.nav-item:hover {float:left; width:33.3%; color:#808080; border-bottom:5px solid #8CC63F; display:block; text-align:center;}
.nav-item-m {width:50%; margin-top:10px;}
.nav-item-m:hover {width:50%}
.nav-edge {float:left; width:0%; height:30px; border-bottom:5px solid #CCC;}
.clear-mobile {}
.projects-img {width:100%; margin-bottom:15px;}
.index-img {width:95%; padding:5%; margin-bottom:15px;}
.caption {}
.div-thirds {width:100%}
ul {padding-left:20px;}
#contact {margin-left:0}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.page {width:100%;}
.header-img {width:100%}
.div-thirds {height:280px;}
.projects-img {width:30%; margin: 0 1% 0 0;}
.projects-img img {width:100%}
.projects-img div {width:90%}
.index-img {width:30%; margin: 0 1% 0 0;}
.index-img img {width:100%}
.index-img div {width:90%}
#contact {margin-left:35%;}
}