/*Colors
  Blue - #0054a4
  Green - #589f49
*/
html {-webkit-text-size-adjust: none;}

body {font-family: Arial, Helvetica, sans-serif; line-height: 18px; background: url(../images/background.png); margin: 0px; line-height: 18px;}
#page {background: #fff; margin: 0 auto; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1); width: 960px;}
.clear {clear: both;}
.left {float: left}
.right {}

body p {font-size: 12px;}

/*Typography*/
h1 {font-size: 28px; color: #0054a4; display: block; border-bottom: 2px solid #0054a4; padding: 0 0 10px 0;}
body .services li {color: #666; font-size: 14px;}
#locationMaps h2 {font-size: 18px; color: #589f49; font-weight: bold; margin: 0px;  height: 20px; text-transform: uppercase;}
a {color: #0054a4;}

/*Header*/
#header {background: #0054a4; padding: 20px 40px;}
#header .logo {background: url(../images/logo_big.png) no-repeat; width: 461px; height: 39px; display: block;}
.printLogo {display: none;}

/*Content*/
#content {padding: 20px 40px;}
#content .services {margin: 0px; padding: 0px 0px 0px 20px;}
#content .services li {margin: 0 0 10px 0;}
#content .leftColumn.services {float: left; width: 40%;}
#content .rightColumn.services {float: right; width: 40%;}
#content h1.locations {margin: 30px 0 0 0;}

/*Location Maps*/
#locationMaps {margin: 30px 0px; padding: 0px; list-style: none;}
#locationMaps li {width: 80%; float: left; margin: 0 0 20px 0;}
#locationMaps .map {float: left; width: 260px; height: 220px; overflow: hidden; background: #ccc; position: relative;}
#locationMaps .map img { position: relative; left: 50%; margin-left: -200px; margin-top: -115px;}
#locationMaps .details {float: left; padding: 0 20px; width: 240px;}
#locationMaps h2.one {background: url(../images/one.png) no-repeat; padding: 0 0 0 25px;}
#locationMaps h2.two {background: url(../images/two.png) no-repeat; padding: 0 0 0 25px;}
#locationMaps h2.three {background: url(../images/three.png) no-repeat; padding: 0 0 0 25px;}
#locationMaps h2.four {background: url(../images/four.png) no-repeat; padding: 0 0 0 25px;}
#locationMaps li.clear {display: block; clear: both; float: none!important; padding: 0px; width: 100%; margin: 0px;}
    .kris-thorkelson {float: left;
    width: 170px;
    margin-right: 20px;
}
h1>a:hover {
    color: #589f49;
}
h1>a {
    text-decoration: none;
}
/*Footer*/
body .copyright {width: 960px; margin: 10px auto; text-align: center; color: #666;}

/*Change maps to single column at 960px*/
@media screen and (max-width:960px){
  #page {width: 100%;}
  #locationMaps li {width: 100%;}
  #locationMaps .map {float: left; width: 40%; height: 140px; overflow: hidden;}
  #locationMaps .details {float: left; width: 60%; padding: 0px;}
  #locationMaps p, #locationMaps h2 {margin-left:20px;}
  body .copyright {width: 100%;}
}

/*Change everything to single column at 600px and change logo to stacked version*/
@media screen and (max-width:600px){
  #header {padding: 20px;}
  #header .logo {background: url(../images/logo_sm.png) no-repeat; width: 217px; height: 68px;}
  #content .leftColumn.services, #content .rightColumn.services {float: none; display: block; padding-right: 20px; width: auto; clear: both;}
  #content {padding: 20px;}
}

/*Move map details below maps*/
@media screen and (max-width:400px){
  #locationMaps h2 {margin: -170px 0 0 0; position: absolute; left: 20px;}
  #locationMaps p {margin-left: 0px;}
  #locationMaps .map {margin: 30px 0 0 0; width: 100%;}
  #locationMaps .details {padding: 0px; width: 100%;}
}

/*HD Graphics*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #header .logo{background: url(../images/logo_sm_hd.png) no-repeat; background-size: 217px 68px;}
  #locationMaps h2.one {background: url(../images/one_hd.png) no-repeat; background-size: 20px 20px;}
  #locationMaps h2.two {background: url(../images/two_hd.png) no-repeat; background-size: 20px 20px;}
  #locationMaps h2.three {background: url(../images/three_hd.png) no-repeat; background-size: 20px 20px;}
  #locationMaps h2.four {background: url(../images/four_hd.png) no-repeat; background-size: 20px 20px;}
  
}