@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

*{margin: 0;padding: 0;list-style: none;}
body{font: normal normal normal 100%/1.3 'Open Sans', Arial, Helvetica, sans-serif; background: #fff url(i/back.png) center 0 no-repeat; color: #334;}

html, body, #holder { height: 100%; }
body > #holder { height: auto; min-height: 100%; }

h1{font: normal normal normal 2em/1.3 'Open Sans', Arial, Helvetica, sans-serif; margin: 0 0 10px; text-shadow: 2px 2px 6px #bbd;}
h2, h3, h4, h5, h6{font: normal normal normal 1.6em/1.3em 'Open Sans', Arial, Helvetica, sans-serif; margin: 10px 0; text-shadow: 2px 2px 6px #bbd;}
p{margin: 10px 0;}
img{ border: none; max-width: 100%; height: auto !important; }
img.controlled{ max-width: auto; }
iframe{ max-width: 100%; }
input, textarea{ width: 400px; max-width: 100%; }
div.nivoSlider{ max-width: 100%; }

a{color: #06c;}
a.none, a:hover{text-decoration: none;}
a:hover{color: #9af;}
a.none:hover{text-decoration: underline;}

ul li{list-style: square outside;margin-left:30px}
ol li{list-style: decimal outside;margin-left:30px}
ul li.none, ul li.clientlink{list-style: none;}
#main ul{
margin: 10px 0;
}

img{border: none;}

#main{padding: 229px 0px 220px 0px; min-height: 200px; }
#holder{width: 980px; margin: 0px auto; max-width: 100%; position: relative; }
#chiropody{position: absolute;top: 0;width: 318px;height: 180px;}
#telephone{position: absolute;top: 20px;right: 20px;font: normal normal bold 1.5em/1.2em 'Open Sans', Arial, sans-serif;color: #bdf}
#menu{position: absolute;top: 105px; right: 20px;width: 700px; max-width: 100%; z-index: 100001;  }

#menu ul {float: right; font-size: .85em; }
#menu li {float: left; list-style: none;margin-left:0px}
#menu li a:hover{color: #056; background: #fff; text-shadow: 2px 2px 6px #bbb; -webkit-transition: all 600ms ease 0s; -moz-transition: all 600ms ease 0s; -o-transition: all 600ms ease 0s; transition: all 600ms ease 0s;}
#menu li a{border: 1px solid #279; border-radius: 4px; margin: 0 3px; text-decoration: none; box-shadow: 2px 2px 6px #000; -webkit-transition: all 600ms ease 0s; -moz-transition: all 600ms ease 0s; -o-transition: all 600ms ease 0s; transition: all 600ms ease 0s; background: #fff; color: #089; padding: 2px 8px; font-weight: bold; display: block;}

#menu li li a{display: block;}
#menu li li{float: none; clear: both;}
#menu ul ul{clear: both; display: none; float: none; position: absolute;}
#menu ul li:hover ul{display: block;}


#footer div{width: 980px; margin: 0 auto; max-width: 100%; position: relative; }
#footer{clear: both;position: relative; z-index: 10; height: 175px; margin-top: -220px; text-align: center;background: #056 url(i/back-bottom.png) center 0 no-repeat;font: normal normal normal .7em/1.3em 'Open Sans', Arial, Helvetica, sans-serif; color: #fff; padding-top: 45px; }

#admin{
position: fixed;
top: 10px;
left: 10px;
}

#admin a{
display: block;
width: 150px;
height: 50px;
background: #fff;
line-height: 50px;
text-align: center;
border-radius: 4px;
box-shadow: 2px 2px 8px #ccc;
text-decoration: none;
font-weight: bold;
color: #f00;
}

#admin a:hover{
background: #f00;
color: #fff;
}

.clearboth{clear: both;}
br.clearboth{font-size:1px; height:1px}
.clearright{clear: right;font-size:1px; height:1px}

label{display: inline-block; width: 200px;}

.mt0 {margin-top: 0px}
.mt10 {margin-top: 10px}
.mt20 {margin-top: 20px}
.mt50 {margin-top: 50px}
.mt60 {margin-top: 60px}
.ml10 {margin-left: 10px}
.ml315 {margin-left: 315px}
.mr10 {margin-right: 10px}
.mb0 {margin-bottom: 0px}
.mb10 {margin-bottom: 10px}
.m10{margin: 10px;}

.left {float: left}
.right {float: right; margin-left: 5px;}
.tright {text-align: right}
.tcenter, .centre {text-align: center}
.tjustify {text-align: justify}
.hon{ display: none; }

.red{color:#f00}
.white{color:#fff}

.rounded {border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px}
.box1{box-shadow: 6px 6px 16px #666; -moz-box-shadow: 6px 6px 16px #666; -webkit-box-shadow: 6px 6px 16px #666;}

.privterms{ position: absolute; top: 0px; right: 10px; }
.nq{ position: absolute; bottom: 0; right: 10px; }
.images-together{ white-space: nowrap; max-width: 100%; }
#menubutton, #menubuttonlabel{ display: none; visibility: hidden; }

@media all and (max-width: 1050px){
  #main{ padding-left: 10px; padding-right: 10px;}
}

@media all and (max-width: 830px){
  #menu{ display: none; visibility: hidden; width: 100%; right: 0; top: 145px; font-size: 1.1em; }
  #menubuttonlabel{ display: inline-block; visibility: visible; position: absolute; top: 105px; right: 20px; border: 1px solid #279; border-radius: 4px; margin: 10px 3px; text-decoration: none; box-shadow: 2px 2px 6px #000; width: auto; background: #fff; color: #089; padding: 2px 8px; font-weight: bold; cursor: pointer; font-size: 1.2em; }
  #menubutton:checked+#menu{ display: block; visibility: visible; }
  #menu li{ width: 100%; display: block; }
  #menu li a{ border-radius: 0; background-color: #089; color: #fff; border: none; text-align: center; }
  #menu ul{ float: none; line-height: 2em; }
  #menu ul ul{ display: block; position: static; }
  #menu ul ul a{ font-size: .8em; font-weight: normal; }
}

@media all and (max-width: 720px){
  .privterms, .nq{ position: static; }
  #footer{ height: 230px; padding-top: 0; margin-top: -240px; background-position: -1700px 0; }
  #main{ padding: 229px 10px 250px; }
  #footer p{ margin-bottom: 0; }
  .left, .right{ float: none; margin-left: auto; margin-right: auto; }
}

@media all and (max-width: 600px){
  #chiropody{ width: 100%; text-align: center; }
  #telephone{ top: 180px; right: auto; left: 0; width: 100%; text-align: center; }
  #menubuttonlabel{ top: 205px; right: auto; left: calc(50% - 50px); margin-right: auto; margin-left: auto; display: block; width: 100px; text-align: center; }
  #menu{ top: 245px; }
  #main{ padding-top: 250px; }
  body{ background-position: -850px 0; background-image: url('i/backTop2.png'); }
}