/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
   
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display:block;}
audio, canvas, video {display:inline-block;  max-width: 100%;}
audio:not([controls]) {display:none; height:0;}
[hidden] {display: none;}

:root {
    --standard: #000;
    --heading: #e25653;
    --link: #e25653;
    --linkhover: #e25653;
    --white: #fff;
    --green: #4a7719;
}
/* ==========================================================================
   Base
   ========================================================================== */
   
html {font-family:sans-serif; -ms-text-size-adjust:100%; overflow-y:auto; margin:0; padding:0; height:100%;}
body {margin:0; padding:0; height:100%;}

/* ==========================================================================
   Links
   ========================================================================== */

a:focus {outline:thin dotted;}
a:active, a:hover {outline:0;}

/* ==========================================================================
   Typography
   ========================================================================== */

h1 {font-size:2em;}
abbr[title] {border-bottom:1px dotted;}
b, strong {font-weight:bold;}
dfn {font-style:italic;}
mark {background:#ff0; color:#000;}
code, kbd, pre, samp {font-family:monospace, serif; font-size:1em;}
pre {white-space:pre; white-space:pre-wrap; word-wrap:break-word;}
q {quotes: "\201C" "\201D" "\2018" "\2019";}
small {font-size:80%;}
sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
dt {margin:0px 0px 10px 0px;}
dd {margin:10px 0px 10px 0px;}

/* ==========================================================================
   Embedded content
   ========================================================================== */
img {border:0; max-width:100%; height:auto; vertical-align:middle; -ms-interpolation-mode:bicubic;}
svg:not(:root) {overflow:hidden;}
#map_canvas img, .google-maps img {max-width:none;}

/* ==========================================================================
   Figures
   ========================================================================== */

figure {margin:0;}

/* ==========================================================================
   Forms
   ========================================================================== */

fieldset {border:0 ;margin:0; padding:0;}
legend {border:0; padding:0;}
button, input, select, textarea {font-family:inherit; font-size:100%; margin:0; vertical-align:middle;}
button, input {line-height:normal; *overflow:visible;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button[disabled], input[disabled] {cursor:default;}
input[type="checkbox"], input[type="radio"] {box-sizing:border-box; padding:0;}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing:content-box; box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0;}
textarea {overflow:auto; vertical-align:top; resize:vertical;}
label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {cursor:pointer;}

/* ==========================================================================
   Tables
   ========================================================================== */

table {border-collapse:collapse; border-spacing:0;}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.nocallout {-webkit-touch-callout:none;}
.pressed {background-color: rgba(0, 0, 0, 0.7);}
textarea[contenteditable] {-webkit-appearance:none;}
.hidden {display:none !important; visibility:hidden;}
.visuallyhidden {border:0; clip: rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;}
.invisible {visibility:hidden;}
.cf:before, .cf:after {content:""; display:table;}
.cf:after {clear:both;}
.cf {zoom:1;}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html, button, input, select, textarea {color:var(--standard);}
body {font-size:0.8em; line-height:1.4; background-color:#f7f7f7; font-family: 'Open Sans', sans-serif;}

h1 {font-size:2.2em; line-height:1.0; margin:0px 0px 7px 0px; padding:0px; color:var(--green); font-family:'Open Sans', sans-serif;}
h2 {font-size:1.8em; line-height:1.0; font-weight:normal; margin:0px 0px 7px 0px; padding:0px;}

h2 a {color:#222;}
h2 a:hover {color:#136207;}

a {color:#136207; text-decoration:none;}
a:hover {color:#f5610d; text-decoration:underline;}
a:focus {outline: thin dotted #333; outline:5px auto -webkit-focus-ring-color; outline-offset:-2px;}
a:hover, a:active {outline:0;}

#access {position:absolute; top:0px; left:0px; width:1px;}
.link {text-decoration:none; color:#ffffff; background-color:#136207; font-weight:bold; padding:2px 6px 2px 6px;}
.link:hover {color:#ffffff;}

.imglink {overflow:hidden; width:1px; height:1px;}

.rrClipRegion{border:none !important;}

label {color:#136207;}
input {color:#000000; border:#cad9b8 1px solid; font-size:1.2em; padding:5px;}
select {color:#6c6658; border:#cad9b8 1px solid; font-size:1.2em; padding:5px;}
textarea {color:#6c6658; border:#cad9b8 1px solid; font-size:1.2em; padding:5px;}
input[type="checkbox"], input[type="radio"], input[type="image"] {border:none;}
input:focus {border:#ead59d 1px solid; background-color:#fdf7e7; color:#bd8301;} 
.formsbutton {border:none; color:#ffffff; background-color:#136207; cursor:pointer; text-align:center; font-size:1.2em; height:30px; padding:5px 10px 5px 10px;}
.button a {color:#ffffff; background-color:#136207; cursor:pointer; text-align:center; font-size:1.2em; height:30px; padding:5px 10px 5px 10px;}

/* ==========================================================================
   Responsive Navigation
   ========================================================================== */
   
nav, ul, li, a  {margin:0; padding:0;}

#navbox {position:absolute; top:0; left:0; z-index:2; background-color:#136207;}
#menuback {position:fixed; width:100%; top:0; right:0; height:100%; background-color:#136207; z-index:1; display:none;}

#toolbar {display:none; text-align:left; display:block; margin: 0 auto; z-index:2; }
.toggleMenu {display:inline-block; padding-right:10px;}

.nav {display:none; list-style:none; z-index:3; width:90%; margin:0 5% 0 5%;}
.nav:before, .nav:after {content:" "; display:table;}
.nav:after {clear:both;}

.nav ul {padding:0; list-style-type:none; display:block; width:100%;}
.nav a {padding:10px 20px 10px 20px; color:#fff; font-size:1.3em;}
.nav a.navparent {}
.nav a:hover {color:#fff; background-color:#5c8e25; text-decoration:none;}
.nav li {position:relative;  margin:0; padding:0;}
.nav > li {float:none; text-align:left;}
.nav > li > a {display:block;}


/* selected toolbar */   
.nav > li .toolsel {color:#ffffff;} 

#closebut {display:none;}
.nav li.closenav {margin:0; border-bottom:none; font-size:4em; padding:0 5% 0 0; cursor:pointer; color:#fff;}
.nav li.closenav a:hover {background-color:transparent;}
.nav > li.closenav {border-top:none;}
.nav li.searchbox {margin-bottom:20px;}

/* level 2 */
.subnav {border-top: 1px solid #5c8e25;}

.nav li ul {display:none; padding:10px 0 10px 0;}
.nav > li.hover > ul {left:0;}
.nav li li.hover ul {left:100%; top:0;}
.nav li li a {display:block; position:relative; z-index:150; padding:7px 20px 7px 30px; font-size:1.2em; color:#fff;}
.nav li li a:hover  {color:#fff; outline:0;}

.nav > li.hover > ul , .nav li li.hover ul {position:static;}
.active {display:block;}  
.menuright {float:right;}
.setright {float:right; text-align:right; width:100%;}
 
.searchbox  {display:inline-block; width:100%; float:left; color:#136207; background-color:transparent; border-bottom:1px solid #fff; }
.searchfield {float:left; width:calc(95% - 30px);}
.searchfield input {background-color:transparent; border:none; color:#fff; width:80%;}
.searchbut {float:left; width:30px; text-align:right;}
.searchbut #qButton {width:30px; padding:0; margin:0px;}
.searchbut #qButton:hover {background-color:transparent;} 
.searchlink {overflow:hidden; width:1px; height:1px;}
.searchlabel label {color:#fff; font-size:0.1em; display:none;}
 
.searchbox ::placeholder {color:#5c8e25; opacity:1;}
.searchbox ::-ms-input-placeholder {color:#5c8e25;}
  
 
/* ------------------------------------------------------- 
  Level 2 naviagtion
------------------------------------------------------- */

.menubox {width:100%;}
.menubox a {text-decoration:underline;}

#level2 ul {list-style:none;}
#level2 li {display:block;}
#level2 a {color:#136207; display:block; padding:10px 0px 10px 10px; text-decoration:none; margin:0px; font-weight:normal; border-top:solid 1px #daecc7;}
#level2 a:hover {color:#136207; text-decoration:underline;}
#level2 .noborder a {border-top:none;}

#menu2 a {color:#000; padding:10px 0px 10px 10px; margin:0px;}
#menu2 a:hover {color:#000; text-decoration:none;}

/* ------------------------------------------------------- 
  Level 3 naviagtion
------------------------------------------------------- */

#level3 {position:relative; left:0px; top:0px; margin-top:0px; margin-bottom:25px;}
#level3 ul {background-color:transparent;}
#level3 li {display:block; font-size:0.9em;}
#level3 a {color:#136207; display:block; padding:5px 0px 5px 25px; text-decoration:none; margin:0px; border-top:none;}
#level3 a:hover {color:#136207; text-decoration:underline;}

#menu3 a {color:#000; padding:5px 0px 5px 25px; margin:0px;}
#menu3 a:hover {color:#000; text-decoration:underline;}

/* ------------------------------------------------------- 
breadcrumb and fontsize                            
------------------------------------------------------- */

#breadtext {position:relative; top:0px; left:0px; color:#725303; margin-bottom:20px; font-size:0.9em;}
#breadtext a {color:#725303; text-decoration:underline;}
#breadtext a:hover {color:#725303; text-decoration:underline;}

/* ------------------------------------------------------- 
 site map
------------------------------------------------------- */

#sitemap li {list-style-type:none;}
ul#sitemap > li {margin-bottom:10px; font-size:1.4em;}
#sitemap ul li {list-style-image:url(../images/l2_normal.gif);}
#sitemap ul ul li {list-style-image:url(../images/l3_normal.gif);}
#sitemap ul li.firstfollow {list-style-image:url(../images/l2_first_follow.gif);}
#sitemap ul li.last {list-style-image:url(../images/l2_last_item.gif);  margin-bottom:10px;}
#sitemap ul ul li.firstfollow {list-style-image:url(../images/l3_first_follow.gif);}
#sitemap ul ul li.last {list-style-image:url(../images/l3_last_item.gif);}
#sitemap ul ul li.last2 {list-style-image:url(../images/l3_last_item2.gif);}

/* ------------------------------------------------------- 
  record paging
------------------------------------------------------- */

#showing {font-size:0.9em; color:#3b7baa;}

#pagingnav {position:relative; top:0px; left:0px; font-weight:bold; font-size:1.2em; margin-top:20px;}
#pagingnav ul{margin:0px; padding:0px; list-style-image: none; list-style-type: none; text-indent:0px; text-align: left;}
#pagingnav li {display: inline; background-color:#ffffff; margin-right:6px; padding:5px;}
#pagingnav li a {color:#136207; text-decoration:none; padding:5px;}
#pagingnav li a:hover {text-decoration:underline;}

/* ------------------------------------------------------- 
 search results
------------------------------------------------------- */

.searchitem {position:relative; top:0px; left:0px; background-color:transparent; border-bottom:1px solid #eeeeee;}
.searchitem a {display:block; color:#222; position:relative; left:0px; top:0px; text-decoration:none; padding:15px 15px 15px 0px;}
.searchitem a:hover {color:#f5610d;}

.searchtitle {position:relative; left:0px; top:0px; font-size:1.4em;}
.searchtitle a {font-weight:normal;}


/* ==========================================================================
   horizontal full screen backgrounds
   ========================================================================== */

.fullwidth {position:relative; width:100%;}
.darkgrey {background-color:#ffffff; color:#3d6610; background-image:url(../images/introback.jpg); background-position:top left; background-repeat:repeat-x;}
.lightgrey {background-color:#fdf7e7; color:#b48301; border-bottom:solid 1px #ead59d; border-top:solid 1px #ead59d; background-image:url(../images/newsback.jpg); background-position:top left; background-repeat:repeat-x;}
.white {background-color:#ffffff; color:var(--standard);}
.white2 {background-color:#ffffff; color:var(--standard); padding:20px 0px 20px 0px;}
.grey {color:#323232; border-top:solid 1px #e5e5e5;}

/* ==========================================================================
   Grid
   ========================================================================== */
   
.container {max-width:1100px; width:100%; margin:0px auto; position:relative;}
.container2 {max-width:1300px; width:100%; margin:0px auto; position:relative;}
.container3 {max-width:1100px; width:100%; margin:0px auto; position:relative;}

.row {display:block; width:100%; min-height:30px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; float:left; clear:both;}
.row div[class*='col'], .row aside[class*='col'], .row article[class*='col'] {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; display:block;}
.col {width:70%; padding:20px;}
.right {float:right;}
.green {background-color:#136207; color:#ffffff;}


/* ==========================================================================
   Mobile First Default Layout
   ========================================================================== */
   
    /* ------------------------------------------------------- 
        Cookie Policy                  
    ------------------------------------------------------- */

    .cookiecontainer {background-color:#37474F; padding:20px; font-size:1.2em;}
    .col_cookietitle {float:none; color:#90A4AE; font-size:1.4em; line-height:1.4em; margin-bottom:10px;}
    .col_cookietext {float:none; color:#fff; margin-bottom:10px;}
    .col_cookietext a {text-decoration:underline; color:#B0BEC5;}
    .col_cookieoptions {float:none; padding-top:10px;}
    .col_cookieoptions a {width:170px; padding:8px 0 8px 0; cursor:pointer; text-align:center; font-size:0.9em; font-weight:600; display:inline-block; color:#37474F; background-color:#B0BEC5; border:none; text-transform:uppercase; letter-spacing:0.1em;}
    .col_cookieoptions a:hover {text-decoration:none; background-color:#78909C;}

     /* ------------------------------------------------------- 
     vectors                             
    ------------------------------------------------------- */

    .vectors {display:none;}
    .vector {position:relative; width:100%; height:100%;}

    .searchicon {width:30px; height:30px; padding-right:16px; fill:#fff; cursor:pointer;}
    .menuicon {width:30px; height:30px; fill:#136207;}
    .twicon, .fbicon, .inicon, .yticon, .lkicon {position:relative; width:38px; height:38px; fill:var(--green);}
    .hbrlogo {width:48px; height:28px; fill:#dfdede;}
    .ramsgatelogo {width:257px; height:65px; fill:var(--green);}

    /* ------------------------------------------------------- 
     header
    ------------------------------------------------------- */

    .col_logo {float:left; width:80%; padding:20px 10px 20px 20px; font-size:0.9em; color:#136207;}
    .col_menu {float:left; width:20%; padding:20px 20px 0px 0px;}
    #OpenMenu {text-align:right;}

     #access {width:1px; height:1px; overflow:hidden;}

    /* ------------------------------------------------------- 
     Page
    ------------------------------------------------------- */
    
    .col_left, .col_right, .col_textleft, .col_textright {float:none; width:100%; margin:0px;}
    .col_left, .col_right {padding:20px;}
    .col_textright {margin:20px 0px 0px 0px;} 
    
    .col_left {background-color:#f2faea; color:#333333; border-top: solid 1px #daecc7;}
    .col_right {font-size:1.1em; border-left:solid 1px #daecc7;}

    #level2 a {border-top:solid 1px #daecc7;}
    #level3 a {border-top:none;}

    /* ------------------------------------------------------- 
     footer
    ------------------------------------------------------- */

    footer {font-size: 1em;}
    footer h3 {font-size:1.4em; line-height:1; font-weight:normal; margin:0px 0px 7px 0px; padding:0px; color:var(--green);}
 
    .col_social {width:calc(100%-40px); padding:20px;}
    .socialtitle {position:relative; margin-bottom:10px; font-size:1.2em; color:var(--green);}
    .sociallist {display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; grid-template-rows:auto; width:240px; height:100%; grid-gap:0px;}
   
    .footgrid {display:grid; grid-template-columns:1fr; grid-template-rows:auto;}
    .col_townlogo {padding:0px 20px;}
    .col_copyright {padding:20px; color:#d7d7d7; line-height:1.4em; color:#525151;}
    .col_copyright a {color:#525151; text-decoration:none;}
    .col_copyright a:hover {color:#136207; text-decoration:underline;}
    a.footlink {color:var(--green);}

    .hbr {float:right; padding:0 20px 20px 0;}
  
    /* ------------------------------------------------------- 
     intro / banner
    ------------------------------------------------------- */

    .col_intro {float:none; width:100%; margin:0px; padding:20px;}
    .col_banner img {width:100%; z-index:2;}


    /* ------------------------------------------------------- 
     home news
    ------------------------------------------------------- */

    .whitebox {border-bottom:solid 1px #e5e5e5;}
    .greybox {border:solid 1px #e5e5e5; background-color:#f7f7f7; padding:20px;}

    .col_mainnews {float:none; width:100%; margin:0px; padding:20px; background-color:#ffffff;}
    .col_news {float:none; width:100%; margin:0px; padding:20px; background-color:#ffffff;}

    .homenewsitem {padding-top:20px; border-top:solid 1px #e5e5e5; padding-bottom:20px;}
    .homenewsitem2 {padding:20px 0px 20px 0px;}

    .homenewsimage {float:none; width:100%; margin:0px 0px 20px 0px;}
    .homenewsimage img {width:100%; border:solid 1px #e5e5e5;}

    .homenewstext {float:none; width:100%; margin:0px;}
    .homenewstext a {display:block; text-decoration:none;}
   
    .homenewstitle {font-size:1.4em; line-height:1.2em; color:#136207;}
    .homenewscopy {line-height:1.2em; color:#525151; padding-top:5px;}



    /* ------------------------------------------------------- 
     Adverts
    ------------------------------------------------------- */

    .adsbox {margin:20px 0px 20px 0px; padding-top:20px; border-top:solid 1px #e5e5e5;}
    .adsboxl {float:none; margin-bottom:10px;}
    .adsboxr {float:none;}

    .advertbox {background-color:#136207; margin-top:0px;}
    .advertimage {float:none;}
    .advertimage img {width:100%;}
    .adverttextbox {float:none;}
    .adverttext {padding:20px;}
    .adverttitle {color:#ffffff; font-size:1.6em; margin-bottom:5px; line-height:1.0em;}
    .advertdesc {color:#ffffff;}

    .announcement {margin-bottom:20px;}
    .announcementtitle {font-size:1.4em; margin-bottom:5px;}
    .announcementtitle a {color:#136207;}
    .announcementdesc {}

    .announcementh {padding-top:20px; margin-bottom:20px;}
    .announcementh2 {padding-top:20px; border-top:solid 1px #e5e5e5; margin-bottom:20px;}

    #AdvertButton {width:100%; padding:0px 0px 20px 0px;}

    /* ------------------------------------------------------- 
     News
    ------------------------------------------------------- */

    .newsitem {margin-bottom:20px; padding-top:20px; border-top:solid 1px #e5e5e5; }
    .newsimage {float:none; width:100%; margin:0px 0px 20px 0px;}
    .newsimage img {width:100%;}
    .newstext {float:none; width:100%; margin:0px 0px 20px 0px;}
    .newstext a {display:block; color:#6c6658; text-decoration:none;}
    .newstext a:hover {color:#a8a295;}
    .newstitle {font-size:1.4em; line-height:1.2em; color:#136207;}
    .newscopy {line-height:1.2em;}
    .newsarticle img {width:100%; float:none; margin:0px 0px 20px 0px;}
  
    /* ------------------------------------------------------- 
      whats on
    ------------------------------------------------------- */

    .homeeventitem {padding:10px; border-top:solid 1px #e5e5e5;}
    .homeeventitem2 {padding:10px;}
    .homeeventtitle {font-size:1.2em;}
    .homeeventtitle a {text-decoration:none;}
    .homeeventtitle a:hover {text-decoration:underline;}
    .homeeventlocation {color:#333333;}

    .homeeventdate {float:left; position:relative; top:0px; left:0px; width:80px; margin-right:20px;}
    .homeeventdesc {float:left; width:60%;}

    /* ------------------------------------------------------- 
     events
    ------------------------------------------------------- */

    .eventitem {border-bottom:1px solid #cad9b8; padding:20px 0px 20px 0px;}

    .eventleft {float:none; width:100%; margin:0px;}
    .eventright {float:none; width:100%; margin:0px;}

    .datebox{position:relative; top:0px; left:0px; width:50px; height:52px; background-image:url(../images/calendar.png); background-position:left top; background-repeat:no-repeat;}
    .datenum {position:absolute; top:22px; left:6px; width:38px; text-align:center; font-size:1.4em;}
    .datemon {position:absolute; top:14px; left:6px; width:38px; text-align:center; font-size:0.8em;}

    .datebox2{position:relative; top:0px; left:0px; width:80px; height:80px; background-image:url(../images/calendar2.png); background-position:left top; background-repeat:no-repeat;}
    .datenum1 {position:absolute; top:22px; left:6px; width:38px; text-align:center; font-size:1.4em;}
    .datemon1 {position:absolute; top:14px; left:6px; width:38px; text-align:center; font-size:0.8em;}
    .datenum2 {position:absolute; top:50px; left:39px; width:38px; text-align:center; font-size:1.4em;}
    .datemon2 {position:absolute; top:42px; left:39px; width:38px; text-align:center; font-size:0.8em;}

    .eventtitle {color:#136207; font-size:1.4em; font-weight:bold;}
    .eventtitle a {text-decoration:none; color:#136207; font-weight:bold;}
    .eventtitle a:hover {text-decoration:underline;}

    .eventcontent {padding:15px 0px 20px 0px;}

    .eventinfo {color:#725303; margin-top:7px;}
    .eventlocation {color:#136207;}
    .eventstrong {color:#136207;}

    /* ------------------------------------------------------- 
     calendar
    ------------------------------------------------------- */

    #calbox {padding-bottom:30px;}

    #calcontent {width:216px;}
    #calheadp {background-color:#002d03; height:30px;}
    #calhead {text-align:center; font-weight:600; font-size:1.1em; background-color:#002d03; color:#ffffff; height:30px;}
    #calheadn {background-color:#002d03; height:30px;}

    .day {background-color:#136207; color:#ffffff; height:21px; text-align:center;}
    .cell {background-color:#def0cb; width:29px; height:21px; text-align:center;}
    .celloff {background-color:#ffffff; width:29px; height:21px;}
    .celltoday {background-color:#136207; width:29px; height:21px; text-align:center;}
    .cellcurrent {background-color:#136207; width:29px; height:21px; text-align:center; color:#ffffff;}

    .calendar {color:#588527; text-decoration:none;}
    .today {color:#e0e9f6; text-decoration:none; font-weight: bold;}
    .today1 {color:#ffffff; text-decoration:none; font-weight: bold;}
    .today2 {color:#ffffff; text-decoration:none; font-weight: bold;}
    .eventwhite {color:#ffffff; text-decoration:none; font-weight:normal;}
    .red {color:#ffffff; text-decoration:none; font-weight:bold;}

    .cell2 {background-color:#725303; width:29px; height:21px; text-align:center; color:#ffffff;}

    #calkey {position:relative; top:0px; left:0px; margin-top:20px;}
    #calkeyevent {position:relative; top:0px; left:0px; width:10px; height:10px; background-color:#725303;}
    #calkeylable {position:absolute; top:0px; left:15px; color:#725303;}

    /* ------------------------------------------------------- 
     homepage events / visit / announcement
    ------------------------------------------------------- */

    .col_events, .col_visit, .col_announce {float:none; width:100%; margin:0px; padding:20px;}

    .col_visit ul {list-style:none;}
    .col_visit li {display:block;}
    .col_visit a {display:block; padding:10px 0px 10px 10px; text-decoration:none; margin:0px; font-weight:normal; border-top:solid 1px #e5e5e5;}
       
    
    /* ------------------------------------------------------- 
     business
    ------------------------------------------------------- */
    
    .directorybox {width:100%;}
    .businessrow {float:none; width:100%; margin:0px; padding-top:10px;}

    .business {float:none; width:90%; margin-right:0px; margin-bottom:10px; background-color:#f2faea; border:solid 1px #daecc7; padding:10px;}
    .business2 {float:none; width:90%; margin-right:0px; margin-bottom:10px; background-color:#f2faea; border:solid 1px #daecc7; padding:10px;}
    .business2b {float:none; width:100%; margin:0px 0px 10px 0px;}
    .busimage {width:100%; margin:0px;}
    .bustext {width:100%; max-width:240px;}
    .bustext2 {padding:10px;}

    .busbox {width:100%;}
    .addressbox {background:#ffffff; padding:20px; margin-bottom:20px; border:solid 1px #daecc7;}
    .addresstitle {font-family:'Open Sans', sans-serif; font-size:1.6em; margin-bottom:10px; color:#136207;}
    .addresscopy {font-size:1.0em;}
     
    .email {float:left; position:relative; width:26px; height:26px; background:url('../images/contact.png') -26px 0;}
    .website {float:left; position:relative; width:26px; height:26px; background:url('../images/contact.png') 0 0;}
    .contactitem {float:left; padding:2px 15px 0px 5px;}
    .contactitem a {color:#333333;}
    .contactitem a:hover {color:#136207;}
    .contactbox {margin-top:10px;}

    .directcol {float:none; width:100%;}
    .directgroup {color:#136207; font-size:1.6em; font-weight:bold; margin-bottom:5px; margin-top:20px;}
    .directgroup a {}
    .directpage {}

    .minigroup {position:relative; font-size:1.6em; margin:20px 0px 7px 0px; padding-left:30px;}
    .minisub {font-size:1.1em; margin:12px 0px 5px 0px; background-color:#f7f7f7; padding:10px;}
    .miniitem {padding-left:10px;}

    .test {position:absolute; left:0px; width:26px; height:26px; background:url('../images/food.png') 0 0;}
    .lorry {position:absolute; left:0px; width:26px; height:26px; background:url('../images/food.png') -26px 0;}
    .cup {position:absolute; left:0px; width:26px; height:26px; background:url('../images/food.png') -78px 0;}
    .roll {position:absolute; left:0px; width:26px; height:26px; background:url('../images/food.png') -104px 0;}
    .pot {position:absolute; left:0px; width:26px; height:26px; background:url('../images/food.png') -130px 0;}
    .knife {position:absolute; left:0px; width:26px; height:26px; background:url('../images/food.png') 0 0;}
    .glass {position:absolute; left:0px; width:26px; height:26px; background:url('../images/food.png') -52px 0;}



    .basket {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') 0 0;}
    .flowers {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -26px 0;}
    .book {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -52px 0;}
    .shop {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -78px 0;}
    .microwave {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -104px 0;}
    .sofa {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -130px 0;}
    .fish {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -156px 0;}

    .shirt {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -182px 0;}
    .drill {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -208px 0;}
    .hair {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -234px 0;}
    .gift {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -260px 0;}
    .pig {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -286px 0;}
    .run {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -312px 0;}
    .pencil {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -338px 0;}
    .grocery {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -364px 0;}
    .party {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -390px 0;}
    .drawers {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -416px 0;}
    .towels {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -442px 0;}
    .picture {position:absolute; left:0px; width:26px; height:26px; background:url('../images/shopping.png') -468px 0;}


    /* ------------------------------------------------------- 
     other
    ------------------------------------------------------- */
    
    .meeting {margin-bottom:5px;}
    
    
    .councillor {float:left; height:360px;}
    .cllrimg img {padding:10px; background-color:#fdf7e7; border:1px solid #ead59d; background-image:url(../images/newsback.jpg); background-position:top left; background-repeat:repeat-x;}
    .cllrname {padding:5px 10px 20px 10px; font-size:1.2em; color:#725303; width:180px;}
    .cllrname a {color:#725303;}
    .cllraddress {float:left; margin:20px 0px 0px 10px;}

    .weather {width:70%; margin-bottom:20px;}
    .weatherday {color:#136207; font-size:1.8em; border-bottom:solid 1px #cad9b8; margin-bottom:10px;}
    .weathertype {color:#5c8e25;}
    .weathermax {font-size:1.4em;}
    .weathermin {font-size:1.4em; margin-bottom:10px;}


    .linkcat {margin-bottom:30px;}
    .linkcattitle {font-size:1.4em; margin-bottom:15px;}
    .linkitem {margin-bottom:10px;}

    /* ------------------------------------------------------- 
     forms
    ------------------------------------------------------- */
    .col_right textarea, .col_right input[type="text"] {width:90%;}
    .col_right select {width:93%;}

     /* ------------------------------------------------------- 
     active
    ------------------------------------------------------- */
     .activeitem {float:none; width:100%; margin:0px 0px 10px 0px;}
     .activeitem a {display:block; color:#ffffff; background-color:#136207;}
     .activeitem a:hover {background-color:#000000; text-decoration:none;}

     .activeimg {width:100%; margin:0px;}
     .activename {padding:10px 10px 15px 10px; font-size:1.2em; color:#ffffff;}

     .activequote {background-color:#eaf3e0; color:#136207; font-size:1.4em; padding:20px;}
    .activeattrib {font-size:0.7em; color:#3f6d0c; margin-top:10px;}

    /* photos */
    .putleft {float:none; padding:0px 0px 20px 0px;}
    .putright {float:none; padding:0px 0px 20px 0px;}
    .photo {position:relative; float:none;}
    .photoleft {position:relative; float:none; padding:0px 0px 20px 0px;}
    .photoright {position:relative; float:none; padding:0px 0px 20px 0px;}

/* ==========================================================================
   Tablet Portrait
   ========================================================================== */

@media screen and (min-width:481px) {

    /* homepage */
    .col_mainnews {float:none; width:100%; margin:0px; padding:20px 20px 0px 20px;} 
    .col_news {float:none; width:100%; margin:0px;}   
    .homenewsimage {float:left; width:35%; margin-right:5%;}
    .homenewstext {float:left; width:60%;}  
    
    .homenewsitem {padding-bottom:0px;}
    .homenewsitem2 {padding-bottom:0px;}

    .announcementh {}
    .announcementh2 {margin-bottom:0px;}

    .adsboxl {float:left; width:47%; margin-right:6%; margin-bottom:0px;}
    .adsboxr {float:left; width:47%;}

    .adverttitle2222 {font-size:2.0em;}
    .advertdesc2222 {font-size:1.4em;}

    /* News */
    .newsimage {float:left; width:35%; margin-right:5%;}
    .newstext {float:left; width:60%;}
    .newsarticle img {width:50%; float:right; margin:0px 0px 20px 20px;}
  
    /* events */
    .eventleft {float:left; position:relative; top:0px; left:0px; width:80px; margin-right:20px;}
    .eventright {float:left; width:80%;}
    
    /* general */
     .businessrow {}
    .business {float:left; width:42%; margin-right:5%;}
    .business2 {float:left; width:42%;}
    .business2b {float:left; width:30%; margin:0px 0px 10px 0px;}
    .addressbox {border:none;}

    .col_textleft {float:left; width:45%; margin-left:0; margin-right:-100%; padding-right:5%;}
    .col_textright {float:left; width:45%; margin-left:50%; margin-right:-100%; padding-right:5%; margin-top:0px;}
    .councillor {float:left; margin-right:20px;}

   
    /* forms */
    .col_right textarea, .col_right input[type="text"] {width:60%;}
    .col_right select {width:62%;}

     /* ------------------------------------------------------- 
     active
    ------------------------------------------------------- */
     .activeitem {float:left; width:30%; margin:0px 10px 10px 0px;}

     /* photos */
    .putleft {float:left; padding:0px 20px 20px 0px; max-width:350px;}
    .putright {float:right; padding:0px 0px 20px 20px; max-width:350px;}
    .photoleft {float:left; padding:0px 20px 20px 0px; max-width:350px;}
    .photoright {float:right; padding:0px 0px 20px 20px; max-width:350px;}
}

@media screen and (min-width:600px) {

    .menuicon {width:40px; height:40px;}   
   
    .col_logo {padding:20px 10px 15px 30px;}
    .col_menu {padding:25px 30px 0px 0px;}

}

/* ==========================================================================
   Desktop layout
   ========================================================================== */

@media screen and (min-width:781px) {

     /* ------------------------------------------------------- 
        Cookie Policy                  
    ------------------------------------------------------- */

    .cookiecontainer {position:fixed; bottom:20px; left:20px; right: 0; width:50%; z-index:10;}

    /* ------------------------------------------------------- 
     header
    ------------------------------------------------------- */

    #access {width:2px;}
    .col_logo {width:50%; padding:20px; font-size:1.3em;}
    .col_icons {width:0%; padding:0px;}

    .searchicon {fill:#136207;}
       
   /* ------------------------------------------------------- 
     navigation
    ------------------------------------------------------- */

    #navbox {position:relative; top:0; left:0; z-index:2;}
    #toolbar {float:left; display:block; width:100%; padding-top:5px;}

    #OpenMenu {display:none;}
    #CloseMenu {display:none;}
    .closebut {display:none;}

    .nav {display:inline-block; position:relative; padding-left:30px; width:calc(100% - 30px); margin:0;}
    .nav li {margin:0 25px 0 0; height:42px;}
    .nav a {padding:10px 8px 10px 0; font-size:1em;}
    .nav a:hover {background-color:transparent;}
    .nav a.navparent .menuright {display:none;}
    .nav > li {float:left; border-top:none; position:static;}
    .navon {padding-bottom:0; margin-bottom:0; border-bottom:5px solid #5c8e25;}

    .nav ul {list-style:none; width:320px; z-index:999;}

    .nav > li > ul {left:0; top:47px; position:absolute; text-align:left; background-color:#5c8e25; width:90%; padding:30px 5%;}
    .nav > li > ul > li {float:left; width:230px; height:35px;}
    .nav li li a {font-size:1.1em; padding:0;}
    .nav li.closenav {padding:0;}

    .nav > li.searchbox {position:absolute; top:-70px; right:40px; display:block; width:250px; float:none; border-bottom:1px solid #136207;}
    .searchfield input {width:100%; color:#136207;}
    .searchfield {width:80%;}
    .searchbut {width:20%;}

    .searchbox ::placeholder {color:#136207; opacity:1;}
    .searchbox ::-ms-input-placeholder {color:#136207;}
    
    /* ------------------------------------------------------- 
     Page
    ------------------------------------------------------- */

    .col_left {float:left; width:30%; margin:0px -100% 0px 0px; background-color:#ffffff; background-image:none; border:none;}
    .col_right {float:left; width:70%; margin:0px -100% 0px 30%;}

    .col_textleft {float:left; width:45%; margin-left:0; margin-right:-100%; padding-right:5%;}
    .col_textright {float:left; width:45%; margin-left:50%; margin-right:-100%; padding-right:5%;}

    /* ------------------------------------------------------- 
     intro / banner
    ------------------------------------------------------- */

    .col_intro {float:left; width:40%; margin-left:0; margin-right:-100%;}
  

    /* ------------------------------------------------------- 
     home news
    ------------------------------------------------------- */

    .col_mainnews {float:left; width:50%; margin-left:0; margin-right:-100%;}
    .col_news {float:left; width:50%; margin-left:50%; margin-right:-100%;}
    .homemaintext {float:left; width:100%;}
    .homenewstext {float:left; width:60%;}
   
    .adverttitle222 {font-size:1.6em;}
    .advertdesc222 {font-size:1.0em;}

     .homenewsbox {border-left:solid 1px #e5e5e5; padding-left:20px;}

    /* ------------------------------------------------------- 
     News
    ------------------------------------------------------- */

    .newsimage {float:left; width:35%; margin-right:5%;}
    .newstext {float:left; width:60%;}
    .newsarticle img {width:50%; float:right; margin:0px 0px 20px 20px;}   

    /* ------------------------------------------------------- 
     homepage events / visit / announcement
    ------------------------------------------------------- */

    .col_events {float:left; width:33.33333%; margin-left:0; margin-right:-100%;}
    .col_visit {float:left; width:33.33333%; margin-left:33.33333%; margin-right:-100%; border-left:solid 1px #e5e5e5; border-right:solid 1px #e5e5e5;}
    .col_announce {float:left; width:33.33333%; margin-left:66.66667%; margin-right:-100%;}
    
     /* ------------------------------------------------------- 
     forms
    ------------------------------------------------------- */
    .col_right textarea, .col_right input[type="text"] {width:50%;}
    .col_right select {width:52%;}

      /* ------------------------------------------------------- 
     directory
    ------------------------------------------------------- */
    .directcol {float:left; width:26%; margin-right:7%;}

    .addressbox {background:#f2faea;}
}

@media screen and (min-width:920px) {

   .footgrid {grid-template-columns:230px 1fr;}

}


/* ==========================================================================
   Large Desktop layout
   ========================================================================== */

@media screen and (min-width:990px) {

    .col_banner {width:100%; z-index:2; height:330px; overflow:visible;}
    .col_banner img {width:100%; z-index:2;}

    .nav a {font-size:1.1em;}
   
}

@media screen and (min-width:1050px) {
    /*
    .nav > li > ul {width:80%; padding:40px 15% 40px 5%;}
    .nav > li > ul > li {width:250px;}
    */
}