@import url("reset.css");

/* -------- Snapshot Films css ---------- **/
/* ----------------- by SJJ ---------------- */

* { font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif; line-height: 150%;}
body {background: #ffffff url(../img/bg/body-bg.gif) top left repeat-x; color: #272727;}
html {background-color: #1c170b;}

hr { text-align: right; width: 100%; height: 1px; color: #d4dee8; border: none;  margin: 15px 0px;} /* For Internet Explorer */

html>body hr { margin-right: 0; width: 100%; height: 1px; background-color: #d4dee8; border: none; margin: 15px 0px;} /* For Gecko-based browsers */

html>body hr { margin-right: 0; width: 100%; height: 1px; background-color: #d4dee8; border: 0px solid #d4dee8; margin: 15px 0px;} /* For Opera and Gecko-based browsers */

#wrapper {width: 977px; padding: 0px; margin-left: auto; margin-right:auto; overflow: hidden; height: 1%; position: relative;}
#header {height: 451px; height: 1%; position: relative; overflow: hidden; z-index: 1;}
#header p.phone {margin-top: 13px; background: url(../img/bg/phone-number.gif) right top no-repeat; text-indent: -9999px; height: 20px; width: 230px; float: right;}
#header p.reading {background-image: url(../img/phone/reading.gif);}
#header p.newbury {background-image: url(../img/phone/newbury.gif);}
#header p.abingdon {background-image: url(../img/phone/abingdon.gif);}
#header p.uxbridge {background-image: url(../img/phone/uxbridge.gif);}
#header p.oxford {background-image: url(../img/phone/oxford.gif);}
#header p.maidenhead  {background-image: url(../img/phone/maidenhead.gif);}
#header p.slough {background-image: url(../img/phone/slough.gif);}
#header p.bracknell {background-image: url(../img/phone/bracknell.gif);}
#header p.guildford {background-image: url(../img/phone/guildford.gif);}
#header p.farnborough {background-image: url(../img/phone/farnborough.gif);}
#header p.witney {background-image: url(../img/phone/witney.gif);}
#header p.henley {background-image: url(../img/phone/henley.gif);}
#header p.basingstoke {background-image: url(../img/phone/basingstoke.gif);}
#header p.highwycombe {background-image: url(../img/phone/highwycombe.gif);}
#header p.londonderry {background-image: url(../img/phone/londonderry.gif);}
#header p.preston {background-image: url(../img/phone/preston.gif);}
#header p.camberley {background-image: url(../img/phone/camberley.gif);}
#header p.winchester {background-image: url(../img/phone/winchester.gif);}
#header p.andover  {background-image: url(../img/phone/andover.gif);}
#header p.southampton {background-image: url(../img/phone/southampton.gif);}

#header div.logo-col, #header div.image-col {height: 451px; background-position: bottom right; background-repeat: no-repeat; width: 557px; float: left; position: relative; }

#header div.logo-col {background-image: url(../img/bg/logo-bg.jpg); width: 420px; overflow: visible; z-index: 5;}
#header div.logo-col a.logo {display: block; height: 56px; width: 320px; text-indent: -9999px; position: absolute; top: 61px; left: 0px;}
#header div.logo-col h1 {position: absolute; top: 199px; left: 19px; width: 388px; height: 22px; background: url(../img/headings/fully-accredited-aerial-installers.jpg) top left no-repeat; text-indent: -9999px;}
#header div.logo-col blockquote {position: absolute; top: 300px; left: 0px; width: 336px;  border-left: 1px solid #1e3233; padding: 25px 23px 20px 49px; font-size: 95%; color: #65848d; background: url(../img/bg/quote-open.gif) 19px 25px no-repeat;  }
#header div.logo-col blockquote p {background: url(../img/bg/quote-close.gif) bottom right no-repeat; padding-right: 17px; font-family: Georgia; line-height: 130%;}
#header div.logo-col div.main-content {position: absolute; top: 150px;}
#header div.logo-col div.main-content h1.home {position: none; top: -10px; left: 0px; background: none; text-indent: 0px; color: #a1a09d; font-size: 110%;}
#header div.logo-col div.main-content p {color: #a1a09d; font-size: 80%; margin-top: 25px; margin-bottom: -10px;}
#header div.logo-col div.selection {position: absolute; top: 320px; left: 0px; width: 100%;}
#header div.logo-col div.selection p {color: #ffffff; font-weight: bold; margin-bottom: 10px; font-size: 80%;}
#header div.logo-col div.selection ul {font-size: 80%;}
#header div.logo-col div.selection ul li {display: inline; padding: 0 4px;}
#header div.logo-col div.selection ul li a {color: #88806c; text-decoration: underline;}
#header div.logo-col div.selection ul li a:hover {text-decoration: underline; color: #c6bba1; }

#header div.logo-col div.selection select {border: 1px solid #333333; font-size: 80%; display: block; margin-bottom: 15px; width: 250px; background-color: #fafffd; margin-left:auto; margin-right: auto;}
#header div.logo-col div.selection select option {padding: 0px 5px;}
#header div.logo-col div.selection input {height: 44px; width: 129px; display: block; background: url(../img/icons/button.gif) top left no-repeat; color: #ffffff; font-weight: bold; cursor: pointer; cursor: hand; border: none; margin-left: auto; margin-right: auto;}
#header div.logo-col div.selection input:hover {background-image: url(../img/icons/button-active.gif)}

body.home #header div.image-col {background-image: url(../img/bg/home-bg.jpg);  }
body.freeview #header div.image-col {background-image: url(../img/bg/freeview-bg.jpg); }
body.freesat #header div.image-col {background-image: url(../img/bg/freesat-bg.jpg); }
body.sky #header div.image-col {background-image: url(../img/bg/sky-bg.jpg); }
body.faq #header div.image-col {background-image: url(../img/bg/faq-bg.jpg); }
body.contact #header div.image-col {background-image: url(../img/bg/contact-bg.jpg); }

/* ----------------- Main Nav ---------------- */

#navigation {overflow: hidden; width: 600px; top: 13px; left: 0px; position: absolute; z-index: 10; display: block; clear: both;}
#navigation li {float: left; }
#navigation li a {background-repeat: no-repeat; background-image: url(../img/nav/nav.gif); height: 22px; text-indent: -9999px; display: block;}
#navigation li.n1 a {background-position: 0px 0px; width: 51px;}
#navigation li.n2 a {background-position: -52px 0px; width: 82px;}
#navigation li.n3 a {background-position: -134px 0px; width: 71px;}
#navigation li.n4 a {background-position: -205px 0px; width: 64px;}
#navigation li.n5 a {background-position: -269px 0px; width: 49px;}
#navigation li.n6 a {background-position: -318px 0px; width: 103px;}

#navigation li.n1 a:hover, #navigation li.n1 a.active {background-position: 0px -22px; width: 51px;}
#navigation li.n2 a:hover, #navigation li.n2 a.active {background-position: -52px -22px; width: 82px;}
#navigation li.n3 a:hover, #navigation li.n3 a.active {background-position: -134px -22px; width: 71px;}
#navigation li.n4 a:hover, #navigation li.n4 a.active {background-position: -205px -22px; width: 64px;}
#navigation li.n5 a:hover, #navigation li.n5 a.active {background-position: -269px -22px; width: 49px;}
#navigation li.n6 a:hover, #navigation li.n6 a.active {background-position: -318px -22px; width: 103px;}

body.mainhome #navigation li a {background-image: url(../img/nav/home-nav.gif);}
body.mainhome #navigation li.n6 a {background-position: -52px 0px;}
body.mainhome #navigation li.n6 a:hover, body.mainhome #navigation li.n6 a.active {background-position: -52px -22px;}

/* ----------------- Content---------------- */

#content {overflow: hidden; position: relative; height: 1%; }
#content div.leftcol {width: 654px; float: left; padding-top: 32px; overflow: hidden; height: 1%; font-size: 75%;}
#content div.single {padding-left: 16px; padding-right: 27px; width: 610px;}
#content div.leftcol h2 {height: 22px; text-indent: -9999px; background-repeat: no-repeat; background-position: 16px 0px; margin-bottom: 20px;}
#content div.single h2 {background-position: 0px 0px;}

body.home #content div.leftcol h2 {background-image: url(../img/headings/digital-solutions.gif);}
body.freeview #content div.leftcol h2 {background-image: url(../img/headings/freeview.gif);}
body.freesat #content div.leftcol h2 {background-image: url(../img/headings/freesat.gif);}
body.sky #content div.leftcol h2 {background-image: url(../img/headings/sky-tv.gif);}
body.faq #content div.leftcol h2 {background-image: url(../img/headings/faq.gif);}
body.contact #content div.leftcol h2 {background-image: url(../img/headings/contact-us.gif);}

#content div.leftcol div.col {width: 270px; padding: 0px 41px 0px 16px; float: left; }
#content div.leftcol p {margin-bottom: 15px;}
#content div.leftcol p.summary {font-weight: bold;}
#content div.leftcol p a, #content div.leftcol ul.bullets li a {color: #237793; text-decoration: none;}
#content div.leftcol p a:hover, #content div.leftcol ul.bullets li a:hover {color: #055069; text-decoration: underline;}

#content div.leftcol img {margin-bottom: 20px; display: block; text-align: center; margin-left: auto; margin-right: auto;}
#content div.leftcol h3 {color: #203c42; font-size: 120%; border-bottom: 1px solid #acb6bc; margin-bottom: 5px; padding-bottom: 2px;}
#content div.leftcol ul {margin-bottom: 15px; overflow: hidden; height: 1%; }
#content div.leftcol ul li {margin-bottom: 10px; }
#content div.leftcol ul.bullets {margin-left: 0px;}
#content div.leftcol ul.bullets li {list-style: disc outside; margin-left: 30px;}

#content div.leftcol ul.flags {margin-bottom: 30px;}
#content div.leftcol ul.flags li {padding-left: 22px; background-position: 0px 50%; background-repeat: no-repeat; float: left; margin-right: 20px; margin-bottom: 3px;}
#content div.leftcol ul.flags li.fr {background-image: url(../img/flags/french.gif);}
#content div.leftcol ul.flags li.it {background-image: url(../img/flags/italian.gif);}
#content div.leftcol ul.flags li.ar {background-image: url(../img/flags/arabic.gif);}
#content div.leftcol ul.flags li.ge {background-image: url(../img/flags/german.gif);}
#content div.leftcol ul.flags li.tu {background-image: url(../img/flags/turkish.gif);}
#content div.leftcol ul.flags li.pr {background-image: url(../img/flags/portugese.gif);}

#content div.leftcol ul.form li {clear: both; margin-bottom: 10px; overflow: hidden; height: 1%;}
#content div.leftcol ul.form li label {width: 100px; margin-right: 15px; display: block; float: left; font-weight: bold; }
#content div.leftcol ul.form li label span {color: #ff0000;  margin-left: 2px;}
#content div.leftcol ul.form li input {float: left; width: 200px; margin-right: 10px;}
#content div.leftcol ul.form li textarea {float: left; width: 400px; height: 70px; margin-right: 10px; font-size: 100%;}
#content div.leftcol ul.form li.button input {width: auto; margin-left: 115px;}
#content div.leftcol ul.form li span.error {float: left;}
#content div.leftcol ul.form li span.error img {float: left; text-align:left ; margin: -3px 0px 0px 0px;}

#content div.rightcol {width: 323px; padding-top: 32px; float: left; background: #ffffff url(../img/bg/rightcol-bg.gif) top left repeat-x; min-height: 309px; text-align: center; margin-top: 2px;}
#content div.rightcol a {width: 121px; background-position: top left; background-repeat: no-repeat; display: block; margin-left: auto; margin-right: auto; margin-bottom: 20px; text-indent: -9999px;}
#content div.rightcol a.freeview {background-image: url(../img/logos/freeview.gif); height: 52px; }
#content div.rightcol a.sky {background-image: url(../img/logos/sky.gif); height: 68px;}
#content div.rightcol a.freesat {background-image: url(../img/logos/freesat.gif); height: 72px;}

/* ----------------- Footer ---------------- */

#footer {width: 100%; font-size: 90%;  padding-top: 2px; overflow: hidden; clear: both;  background: #1c170b url(../img/bg/footer-bg.gif) top left repeat-x;}
#footer div {width: 950px; padding: 0px 10px 55px 17px; margin-left: auto; margin-right:auto; overflow: hidden; height: 1%; background: url(../img/bg/footer.gif) 50% 0px no-repeat; padding-top: 15px;}
#footer div.links {background-image: none; text-align: center; width: auto; padding: 10px 0px 0px 0px;}
#footer div.links a, #footer div.links a:visited {color: #88806c; margin: 0px 3px; font-size: 75%;}
#footer div.links a:hover {color: #c6bba1;}

#footer div p {float: left; margin-bottom: 10px; width: 430px; color: #a1a09d; font-size: 90%;}
#footer div p a {color: #88806c; text-decoration: none; font-weight: bold;}
#footer div p a:hover {text-decoration: underline; color: #c6bba1; }
#footer div p.design {float: right; text-align: right;  }
#footer div p.details { width: 100%; clear: both; float: none; color: #88806c; }