/* reset */
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,th,td {
    margin:0;
    padding:0;
    font-family:'Droid Sans', sans-serif;
}

fieldset,img {
    border:0;
}

html {
    height:100%;
    margin-bottom:1px;
}

body {
    position:relative;
    float:left;
    width:100%;
}

:focus {
    outline:none;
}

/* links */
a {
    color:#36648b;
    text-decoration:none;
}

a:hover {
    color:#6699cc;
    text-decoration:none;
}

/* header elements */
h1, h2, h3, h4, h5, h6 {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:bold;
    line-height:100%;
    margin:0;
}

h1 {
    font-size:300%;
    color:#000;
}

h2 {
    font-size:250%;
    color:#000;
}

h3 {
    font-size:200%;
    color:#000;
}

h4 {
    font-size:175%;
    color:#000;
}

h5 {
    font-size:150%;
    color:#000;
}

h6 {
    font-size:125%;
    color:#000;
}

/* page setup */
body {
    background:#f4f4f4;
    color:#666;
    font-size:16px;
    line-height:28px;
}

/* clearing & floating */
.clearingfix:after {
    content:".";
    display:block;
    line-height:0;
    clear:both;
    visibility:hidden;
}

.clearingfix {
    display:block;
}

.floatbox {
    overflow:hidden;
}

/* wrapper setup */
div.outerwpr {
    background:#f4f4f4;
}

div.topwpr {
    background:#36648b;
    height:48px;
}

div.xwpr {
    margin:auto;
    width:946px;
}

/* header */
header#header {
    height:105px;
    text-align:center;
    border-bottom:#406b90 2px solid;
    padding:10px 0;
}

header#header div.logo {
    display:block;
    margin:0 auto; 
}

/* main body setup */
section#middle {
    width:auto;
    clear:both;
}

/* topmenu */
nav#topmenu {
    margin:0;
}

nav#topmenu ul {
    list-style:none;
    overflow:hidden;
    position:relative;
    padding:0 50px;
    text-align:center; 
}

nav#topmenu ul li {
    height:44px;
    font-size:15px;
    cursor:pointer;
    display:inline-block;
}

nav#topmenu ul li a {
    float:left;
    color:#d8d8d8;
    height:30px;
    padding:7px 14px;
    position:relative;
    z-index:10;
    background:#36648b; 
    border-top:4px solid #36648b; 
    border-bottom:4px solid #f4f4f4;
    -webkit-transition: border-top 400ms ease-in; 
    -moz-transition: border-top 400ms ease-in;
    -o-transition: border-top 400ms ease-in; 
    transition: border-top 400ms ease-in;
}

nav#topmenu ul li a:hover, nav#topmenu ul li.active a {
    text-decoration:none;
    border-top:4px solid #ccc;
    border-bottom:4px solid #f4f4f4;
}

nav#topmenu ul li:first-child a {
    background:none;
}

.mobile_nav {display:none;}

/* content */
article.content {
    padding:24px 0 10px 0;
}

article.content h1,h2 {
    font-size:20px;
    color:#666;
    font-weight:normal;
    margin:0 0 1.5em 0;;
}

article.content p {
    margin:1.5em 0;
}

article.content p.contact {
    margin-left:420px; 
}

article.content p.small-screen {
    display:none;
}

article.content contact.full {
    display:block;
}

article.content img.alignleft {
    float:left;
    margin:7px 20px 0 0;
}

article.content img.alignleft-services {
    float:left;
    margin:7px 20px 0 0;
}

article.content img.alignleft-contact {
    float:left;
    margin:7px 20px 0 0;
}

article.content ul {
    list-style:none;
    margin:1em 0 0.2em 2em;
}

article.content ul li {
    padding:0 0 25px 28px;
    line-height:26px;
    background:url(../images/arrow.png) 0 4px no-repeat;
}

/* footer */
footer#footer {
    width:auto;
    clear:both;
    border-bottom:#d2d2d2 7px solid;
    background:#36648b;
    height:181px;
    text-align:center;
    font-size:16px;
    color:#d8d8d8;
    line-height:30px;
    letter-spacing:0.03em;
}

footer#footer div.contact-info {
    display:block;
}

footer#footer div.mobile-info {
    display:none;
}

footer#footer div.design-credits {
    display:block;
    margin-top:6px;
}

footer#footer a {
    color:#d8d8d8;
    border-bottom:#999 1px solid;
    padding-bottom:3px;
}

footer#footer a:hover {
    color:#d8d8d8;
}

footer#footer a:hover {
    color:#f0f0f0;
    text-decoration:none;
}

footer#footer div.footer_logo {
    display:block;
    margin:0 auto;
    padding:28px 0 0 0;
}

footer#footer div.footer_logo a {
    border-bottom:none;
}

@media screen 
and (max-width: 990px) {
    img {max-width:100%; height:auto;} 
    div.topwpr {height:auto;}
    nav#topmenu {display:none;}
    .mobile_nav {display:block;}
    div.xwpr {width:90%;}
    header#header {height:auto; padding:10px 0 6px 0;}
    header#header div.logo {max-width:500px;}
    article.content h1,h2 {line-height:150%; margin:0 0 1.2em 0;}
    article.content {padding-top:19px;}
    article.content img.alignleft {max-width:24%; padding-bottom:5px;}
    article.content img.alignleft-services {max-width:19%; padding-bottom:5px;}
    article.content img.alignleft-contact {max-width:330px; padding-bottom:5px;}
    article.content p.contact {margin-left:350px;}
    article.content ul {list-style:none; margin-left:0;}
    article.content ul li {background-size:12px 12px; background-position:0 6px; padding-left:22px;}
    footer#footer {height:auto;}
    footer#footer div.design-credits {margin-bottom:34px;}
}

@media screen 
and (max-width: 880px) {
    article.content img.alignleft-contact {max-width:250px;}
    article.content p.contact {margin-left:270px;}
}

@media screen 
and (max-width: 790px) {
    article.content img.alignleft-contact {max-width:200px;}
    article.content p.contact {margin-left:220px;}
}

@media screen 
and (max-width: 770px) {
    article.content p.contact {margin-left:0;}
    article.content img.alignleft-services {max-width:24%;}
    footer#footer div.footer_logo {max-width:250px;}
}

@media screen 
and (max-width: 720px) {
    header#header div.logo {max-width:350px;}
    footer#footer div.contact-info {display:none;}
    footer#footer div.mobile-info {display:block;}
    article.content h1,h2 {font-size:18px;}
}

@media screen 
and (max-width: 504px) {
    article.content img.alignleft {max-width:32%;}
    article.content img.alignleft-services {max-width:32%;}
    article.content img.alignleft-contact {display:block; float:none; margin:0 auto; width:236px; max-width:100%;}
    article.content .contact-full {display:none;}
    article.content p.small-screen {display:block; margin:0.1em 0;}
}