/* | _____ _____ _____ _____ | | / ____| | __ \ |_ _| | __ \ | | | | __ | |__) | | | | | | | | | | | |_ | | _ / | | | | | | | | | |__| | | | \ \ _| |_ | |__| | | | \_____| |_| \_\ |_____| |_____/ | | | | whitbydesignstudio.co.uk | */ /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ @charset "UTF-8"; -ms-@viewport { width: 980; zoom: fixed; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ @viewport { width: 980; zoom: fixed; } /*--------------------------------------|----------------------------------------------------------------|------------------------------ PAGE STYLES ----------------------------------------|----------------------------------------------------------------|----------------------------*/ body { min-width: 980px; font-size: 14px; line-height: 20px; letter-spacing: 0px; word-spacing: 1px; background-image: url("../images/background.jpg"); background-position: center top; background-repeat: no-repeat; font-family: "opensansreg"; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ p + P { margin-top: 12px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ hide, .hide { display:none; } /*--------------------------------------|----------------------------------------------------------------|------------------------------ LINKS ----------------------------------------|----------------------------------------------------------------|----------------------------*/ A:link { text-decoration: none; color: inherit; font-family: "opensansbold"; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ A:visited { text-decoration: none; color: inherit; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ A:active { text-decoration: none; color: inherit; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ A:hover { text-decoration: none; /*TEXT LINK HOVER*/ color: #8a995a; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ A[href^=tel] { text-decoration:none; color:inherit; font-family: "opensansbold";; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ A[href^=tel]:visited { text-decoration:none; color:inherit; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ A[href^=tel]:active { text-decoration:none; color:inherit; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ A[href^=tel]:hover { text-decoration:none; /*PHONE NUMBER HOVER*/ color: #8a995a; } /*--------------------------------------|----------------------------------------------------------------|------------------------------ HEADINGS ----------------------------------------|----------------------------------------------------------------|----------------------------*/ h1 { } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ h2 { } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ h3 { } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ h4 { } /*--------------------------------------|----------------------------------------------------------------|------------------------------ FONTS ----------------------------------------|----------------------------------------------------------------|----------------------------*/ @font-face { font-family: 'opensansreg'; src: url('../fonts/opensansreg/opensansreg.eot'); src: url('../fonts/opensansreg/opensansreg.eot?iefix') format('eot'), url('../fonts/opensansreg/opensansreg.woff') format('woff'), url('../fonts/opensansreg/opensansreg.ttf') format('truetype'), url('../fonts/opensansreg/opensansreg.svg') format('svg'); font-weight: normal; font-style: normal; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ @font-face { font-family: 'opensansbold'; src: url('../fonts/opensansbold/opensansbold.eot'); src: url('../fonts/opensansbold/opensansbold.eot?iefix') format('eot'), url('../fonts/opensansbold/opensansbold.woff') format('woff'), url('../fonts/opensansbold/opensansbold.ttf') format('truetype'), url('../fonts/opensansbold/opensansbold.svg') format('svg'); font-weight: normal; font-style: normal; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ @font-face { font-family: 'copperplate'; src: url('../fonts/copperplate/copperplate.eot'); src: url('../fonts/copperplate/copperplate.eot?iefix') format('eot'), url('../fonts/copperplate/copperplate.woff') format('woff'), url('../fonts/copperplate/copperplate.ttf') format('truetype'), url('../fonts/copperplate/copperplate.svg') format('svg'); font-weight: normal; font-style: normal; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ @font-face { font-family: 'scriptina'; src: url('../fonts/scriptina/scriptina.eot'); src: url('../fonts/scriptina/scriptina.eot?iefix') format('eot'), url('../fonts/scriptina/scriptina.woff') format('woff'), url('../fonts/scriptina/scriptina.ttf') format('truetype'), url('../fonts/scriptina/scriptina.svg') format('svg'); font-weight: normal; font-style: normal; } /*--------------------------------------|----------------------------------------------------------------|------------------------------ FONT WEIGHTS ----------------------------------------|----------------------------------------------------------------|----------------------------*/ text_reg, .text_reg { font-family: "opensansreg"; } /*REGULAR FONT*/ /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ text_bold, .text_bold { font-family: "opensansbold"; } /*BOLD FONT*/ /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ text_script, .text_script { font-family: "scriptina"; font-size: 18px; /*SCRIPT FONT*/ line-height: 20px; margin-left: 20px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ text_copper, .text_copper { font-family: "copperplate"; } /*COPPER FONT*/ /*--------------------------------------|----------------------------------------------------------------|------------------------------ FONT COLOURS ----------------------------------------|----------------------------------------------------------------|----------------------------*/ text_brown, .text_brown { color: #4b2a12; } text_brown A:hover { text-decoration: none; color: #4b2a12; } /*BROWN TEXT*/ .text_brown A:hover { text-decoration: none; color: #4b2a12; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ text_white, .text_white { color: #fff; } text_white A:hover { text-decoration: none; color: #f3ebde; } /*WHITE TEXT*/ .text_white A:hover { text-decoration: none; color: #f3ebde; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ text_lightbrown, .text_lightbrown { color: #ccc6b2; } text_lightbrown A:hover { text-decoration: none; color: #ccc6b2; } /*WHITE TEXT*/ .text_lightbrown A:hover { text-decoration: none; color: #ccc6b2; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ text_green, .text_green { color: #8a995a; } text_green A:hover { text-decoration: none; color: #8a995a; } /*WHITE TEXT*/ .text_green A:hover { text-decoration: none; color: #6a783f; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ text_black, .text_black { color: #000; } text_black A:hover { text-decoration: none; color: #000; } /*WHITE TEXT*/ .text_black A:hover { text-decoration: none; color: #8a995a; } /*--------------------------------------|----------------------------------------------------------------|------------------------------ FONT SIZES ----------------------------------------|----------------------------------------------------------------|----------------------------*/ text_small, .text_small { font-size: 14px; /*SMALL FONT*/ line-height: 20px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ text_medium, .text_medium { font-size: 25px; /*MEDIUM FONT*/ line-height: 35px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ text_large, .text_large { font-size: 60px; /*LARGE FONT*/ line-height: 80px; } /*--------------------------------------|----------------------------------------------------------------|------------------------------ FONT SPACING ----------------------------------------|----------------------------------------------------------------|----------------------------*/ text_spaced, .text_spaced { letter-spacing: 6px; } /*SPACED TEXT*/ /*--------------------------------------|----------------------------------------------------------------|------------------------------ FONT HIGHLIGHTING ----------------------------------------|----------------------------------------------------------------|----------------------------*/ .highlight_lightbrown { padding-top:4px; padding-bottom:4px; padding-left: 8px; padding-right: 8px; background:#837266; color: #ffffff; box-decoration-break: clone; -webkit-box-decoration-break: clone; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .highlight_green { padding-top:4px; padding-bottom:4px; padding-left: 8px; padding-right: 8px; background:#8a995a; color: #ffffff; box-decoration-break: clone; -webkit-box-decoration-break: clone; -webkit-box-decoration-break: clone; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .link { white-space: nowrap; } /*NON-LINE BREAKING LINK*/ /*--------------------------------------|----------------------------------------------------------------|------------------------------ BUTTONS AND HOVERS ----------------------------------------|----------------------------------------------------------------|----------------------------*/ .button_green { display: inline-block; padding: 20px; background:#8a995a; color: #ffffff; -webkit-appearance: none; -moz-appearance: none; border-radius: 0px; /*BUTTON*/ min-width: 150px; border: none; margin: 5px; margin-left: 0px; text-align: center; white-space: nowrap; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .hover_green { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; /*BUTTON HOVER*/ -o-transition: all 0.3s ease; transition: all 0.3s ease; } .hover_green:hover { background: #6a783f } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .button_share { display: inline-block; padding: 2px; padding-left: 0px; } /*--------------------------------------|----------------------------------------------------------------|------------------------------ THE GRID ----------------------------------------|----------------------------------------------------------------|----------------------------*/ .wide { position: relative; width: 100%; /*WIDE WRAPPER*/ margin-right: auto; margin-left: auto; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .wrapper { position: relative; width: 960px; margin-right: auto; margin-left: auto; /*STANDARD WRAPPER*/ padding-left: 10px; padding-right: 10px; padding-bottom: 20px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .wrapper .wrapper { padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; clear:both; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .cover { height:100vh } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ /*--------------------------------------|----------------------------------------------------------------|------------------------------ CLEARFIX ----------------------------------------|----------------------------------------------------------------|----------------------------*/ .wrapper:before, .wrapper:after { content: " "; display: table; } .wrapper:after { clear: both; } /*--------------------------------------|----------------------------------------------------------------|------------------------------ LAYOUT ----------------------------------------|----------------------------------------------------------------|----------------------------*/ .col6, .col4, .col3, .col3-2, .col2, .col1, .col4-3, .cube6, .cube4, .cube3, .cube2, .cube1 { float: left; min-height: 1px; position: relative; margin-top: 20px; margin-left: 10px; margin-right: 10px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .col6 { width: 140px; } /*SIX IN A ROW*/ /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .col4 { width: 220px; } /*FOUR IN A ROW*/ /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .col4-3 { width: 700px; } /*ONE + COL4 IN A ROW*/ /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .col3 { width: 300px; } /*THREE IN A ROW*/ /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .col3-2 { width: 620px; } /*ONE + COL3 IN A ROW*/ /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .col2 { width: 460px; } /*TWO IN A ROW*/ /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .col1 { width: 940px; } /*ONE IN A ROW*/ /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .cube6, .cube4, .cube3, .cube2, .cube1 { overflow: hidden; padding: 20px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .cube6 { width: 100px; /*SIX IN A ROW*/ height:100px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .cube4 { width: 180px; /*FOUR IN A ROW*/ height:180px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .cube4.alt { width: 180px; /*FOUR IN A ROW*/ height:180px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .cube3 { width: 260px; /*THREE IN A ROW*/ height:260px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .cube2 { width: 420px; /*TWO IN A ROW*/ height:420px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .cube1 { width: 900px; /*ONE IN A ROW*/ height: 900px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .split { width: 50%; float: left; min-height: 1px; position: relative; } /*--------------------------------------|----------------------------------------------------------------|------------------------------ CUBE EXPANDING ----------------------------------------|----------------------------------------------------------------|----------------------------*/ .cube6.expand { height:auto; min-height: 100px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .cube4.expand { height:auto; min-height: 180px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .cube3.expand { height:auto; min-height: 260px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .cube2.expand { height:auto; min-height: 420px; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .cube1.expand { height:auto; min-height: 900px; } /*--------------------------------------|----------------------------------------------------------------|------------------------------ FLOATING ----------------------------------------|----------------------------------------------------------------|----------------------------*/ .clear { clear:both; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .right { float:right; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ .left { float:left; } /*--------------------------------------|-----------------------------------------------------------------|----------------------------- CENTERING ----------------------------------------|-----------------------------------------------------------------|---------------------------*/ .center { clear:both; float:none; margin-left: auto; /*DIV CENTERING*/ margin-right: auto; } div span.center { display:block; /*SPAN CENTERING*/ text-align: center; } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ img.center { display:block; margin: 0 auto; } /*IMAGE CENTERING*/ /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .vcenter { top: 50%; -webkit-transform: translateY(-50%); /*VERTICAL CENTER*/ -ms-transform: translateY(-50%); transform: translateY(-50%); } /*--------------------------------------|----------------------------------------------------------------|------------------------------ LAYOUT PUSHING ----------------------------------------|----------------------------------------------------------------|----------------------------*/ .push { margin-top: 20px; } .push1 { margin-top: 40px; } .push2 { margin-top: 60px; } .push3 { margin-top: 80px; } .push4 { margin-top: 100px; } .push5 { margin-top: 120px; } .push6 { margin-top: 140px; } .push7 { margin-top: 160px; } .push8 { margin-top: 180px; } .push9 { margin-top: 200px; } span.push { display:inline-block; margin-top: 20px; } span.push1 { display:inline-block; margin-top: 40px; } span.push2 { display:inline-block; margin-top: 60px; } span.push3 { display:inline-block; margin-top: 80px; } span.push4 { display:inline-block; margin-top: 100px; } span.push5 { display:inline-block; margin-top: 120px; } span.push6 { display:inline-block; margin-top: 140px; } span.push7 { display:inline-block; margin-top: 160px; } span.push8 { display:inline-block; margin-top: 180px; } span.push9 { display:inline-block; margin-top: 200px; } /*--------------------------------------|----------------------------------------------------------------|------------------------------ LAYOUT PULLING ----------------------------------------|----------------------------------------------------------------|----------------------------*/ .pull { margin-bottom: 20px; } .pull1 { margin-bottom: 40px; } .pull2 { margin-bottom: 60px; } .pull3 { margin-bottom: 80px; } .pull4 { margin-bottom: 100px; } .pull5 { margin-bottom: 120px; } .pull6 { margin-bottom: 140px; } .pull7 { margin-bottom: 160px; } .pull8 { margin-bottom: 180px; } .pull9 { margin-bottom: 200px; } span.pull { display:inline-block; margin-bottom: 20px; } span.pull1 { display:inline-block; margin-bottom: 40px; } span.pull2 { display:inline-block; margin-bottom: 60px; } span.pull3 { display:inline-block; margin-bottom: 80px; } span.pull4 { display:inline-block; margin-bottom: 100px; } span.pull5 { display:inline-block; margin-bottom: 120px; } span.pull6 { display:inline-block; margin-bottom: 140px; } span.pull7 { display:inline-block; margin-bottom: 160px; } span.pull8 { display:inline-block; margin-bottom: 180px; } span.pull9 { display:inline-block; margin-bottom: 200px; } /*--------------------------------------|-----------------------------------------------------------------|----------------------------- ROUNDED CORNERS ----------------------------------------|-----------------------------------------------------------------|---------------------------*/ .rounded { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /*--------------------------------------|-----------------------------------------------------------------|----------------------------- IMAGE EFFECTS ----------------------------------------|-----------------------------------------------------------------|---------------------------*/ img { max-width: 100%; } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ img.imagehover { opacity: 1; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } /*IMAGE HOVER*/ img.imagehover:hover { opacity: 0.5; } /*--------------------------------------|-----------------------------------------------------------------|----------------------------- IMAGE SIZES ----------------------------------------|-----------------------------------------------------------------|---------------------------*/ .logo { width: 80px; } .footericon { padding: 10px; padding-top: 0px; } .headermap { z-index: 900; } /*--------------------------------------|-----------------------------------------------------------------|----------------------------- BACKGROUNDS ----------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_lightgreen { background:#ccc6b2; } /*LIGHT GREEN BACKGROUND*/ /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_green { background:#8a995a; } /*GREEN BACKGROUND*/ /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_lightcream { background:#fffaf1; } /*LIGHT CREAM BACKGROUND*/ /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_cream { background:#f3ebde; } /*CREAM BACKGROUND*/ /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_lightbrown { background:#837266; } /*LIGHT BROWN BACKGROUND*/ /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_brown { background:#4b2a12; } /*BROWN BACKGROUND*/ /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_none { background: none; } /*NO BACKGROUND*/ /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_line { background-image: url("../icons/line.png"); height: 20px; background-position: center top; background-repeat: no-repeat; } /*BACKGROUND LINE*/ /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_linetwo { background-image: url("../icons/line3.png"); height: 25px; background-position: center top; background-repeat: no-repeat; } /*BACKGROUND LINE*/ /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_footerline { background-image: url("../icons/line2.png"); height: 20px; margin-top: 29px; background-position: center top; } /*BACKGROUND LINE*/ /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_header { height: 500px; background-position: center top; background-repeat: no-repeat; } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_footer { background-image: url("../images/footer.png"); background-position: center top; background-repeat: no-repeat; } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_hounds1 { background-image: url("../images/header-homepage.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_hounds2 { background-image: url("../images/the-hare-and-hounds.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_pudding { background-image: url("../images/pudding.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_steak { background-image: url("../images/steak.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_bread { background-image: url("../images/bread.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_wine { background-image: url("../images/wine.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_functions { background-image: url("../images/functions.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_fishandchips { background-image: url("../images/fishandchips.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_steaknight { background-image: url("../images/steaknight.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_pieday { background-image: url("../images/pieday.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_inside { background-image: url("../images/hare-and-hounds-inside.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_bar { background-image: url("../images/bar.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_pudding2 { background-image: url("../images/pudding2.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_chips { background-image: url("../images/chips.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_fish { background-image: url("../images/fish.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_food { background-image: url("../images/food.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_food2 { background-image: url("../images/food2.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_food3 { background-image: url("../images/food3.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_nuggets { background-image: url("../images/nuggets.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_pie { background-image: url("../images/pie.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_sandwich { background-image: url("../images/sandwich.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ .bg_wine2 { background-image: url("../images/wine2.jpg"); } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ /*--------------------------------------|-----------------------------------------------------------------|----------------------------- TOOL TIPS ----------------------------------------|-----------------------------------------------------------------|---------------------------*/ a.tooltip { position: relative; display: inline; } /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ a.tooltip:after { display: block; visibility: hidden; position: absolute; bottom: 0; margin-bottom: 5px; left: -20px; opacity: 0; content: attr(data-tool); height: auto; min-width: 120px; padding: 10px 10px; z-index: 999; color: #fff; /*TOOLTIP TEXT COLOUR*/ text-decoration: none; text-align: center; background: rgba(52,126,201,1.0); } /*TOOLTIP BACKGROUND*/ /*--------------------------------------|-----------------------------------------------------------------|---------------------------*/ a.tooltip:before { position: absolute; visibility: hidden; width: 0; height: 0; left: 20%; bottom: 0px; margin-bottom: 5px; opacity: 0; content: ""; border-style: solid; border-width: 6px 6px 0 6px; border-color: rgba(52,126,201,1.0) transparent transparent transparent; } /*TOOLTIP ARROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ a.tooltip:hover:after { visibility: visible; opacity: 1; bottom: 20px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ a.tooltip:hover:before { visibility: visible; opacity: 1; bottom: 14px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ a.tooltip:after, a.tooltip:before { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } /*--------------------------------------|------------------------------------------------------------------|---------------------------- FIRST TIER NAVIGATION ----------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation { background:none; } /*BACKGROUND COLOUR*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation a { font-family:"opensansreg"; color:#FFF; } /*FONT COLOUR*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul { text-align:center; /*TEXT ALIGNMENT*/ font-size:0px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul li { display:inline-block; position:relative; font-size:14px; margin-right: -3px; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; -ms-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul li a { display:block; line-height:50px; /*TEXT ALIGNMENT*/ text-transform:uppercase; /*LINK CAPITALS*/ text-decoration:none; /*NO UNDERLINES*/ letter-spacing: 1px; padding: 0 20px; } /*LINK SPACING*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul li:hover, .navigation ul li:focus { background:#8a995a; /*MOUSE OVER COLOUR*/ cursor: pointer; } /*POINTER*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation a:hover, /*MOUSE OVER TEXT COLOUR*/ .navigation a:focus { color:#FFF;} /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul li.mobiletab { display:none; } /*--------------------------------------|------------------------------------------------------------------|---------------------------- SECOND TIER NAVIGATION ----------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul ul { position:absolute; z-index:999; background:#8a995a; /*DROPDOWN BACKGROUND*/ white-space:nowrap; min-width: 220px; /*DROPDOWN WIDTH*/ display:none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul li:hover ul, .navigation ul li:focus ul { display: list-item; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul ul li { float:none; display: list-item; border-bottom: 1px solid #FFF; /*DROPDOWN LINES*/ text-align:left; margin-right: 0px; } /*DROPDOWN ALIGNMENT*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul ul li:hover, .navigation ul ul li:focus { background:#6a783f; } /*MOUSE OVER COLOUR*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul ul li a { display: block; width:auto; line-height: 50px; /*DROPDOWN SPACING*/ text-transform:none; } /*LOWERCASE*/ /*--------------------------------------|------------------------------------------------------------------|---------------------------- THIRD TIER NAVIGATION ----------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul ul ul { position:absolute; left:100%; top:0; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul ul ul li { background:#5d5d5d; /*FLYOUT BACKGROUND*/ display:none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul ul ul li:hover, .navigation ul ul ul li:focus { background:#347ec9; } /*MOUSE OVER COLOUR*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul ul li:hover ul li, .navigation ul ul li:focus ul li { display: list-item; } /*--------------------------------------|------------------------------------------------------------------|---------------------------- NAVIGATION HIGHLIGHT ----------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation .highlight, .navigation ul ul .highlight, .navigation ul ul ul .highlight { border-right-style: solid; border-right-width: 2px; border-right-color: #8a995a; } /*MENU HIGHLIGHT*/ /*--------------------------------------|------------------------------------------------------------------|-------------------------- .navigation .highlight:hover, .navigation .highlight:focus, .navigation ul ul .highlight:hover, .navigation ul ul .highlight:focus, .navigation ul ul ul .highlight:hover, .navigation ul ul ul .highlight:focus { background:#000; } /*HIGHLIGHT HOVER*/ /*--------------------------------------|------------------------------------------------------------------|---------------------------- VERTICAL MENU ----------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical { float: left; position: relative; margin-top: 20px; margin-left: 10px; margin-right: 10px; margin-bottom: 0px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical.col4 { width: 220px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical.col3 { width: 300px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical ul { text-align:left; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical ul li { display:list-item; position:relative; border-bottom: 1px solid #FFF; } /*DROPDOWN LINES*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical ul li a { padding-left: 20px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical ul li.right { float:none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical ul li.left { float:none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical ul li.mobiletab { display:none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical ul ul { left:100%; top:0; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical ul ul ul li { display:none; } /*--------------------------------------|------------------------------------------------------------------|---------------------------- FORMS ----------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube2.form, .cube3.form, .cube1.form { height: auto; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form span { display: block; margin-bottom:5px;} /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form fieldset { margin-top:0px; margin-bottom:20px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form div { margin-top:5px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form form { width:100%; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input { width:100%; height: 50px; box-sizing: border-box; padding-left: 20px; border:none; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -moz-appearance: none; -webkit-appearance: none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form label { display:block; margin-top:0px; margin-bottom: 5px;} /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form textarea { width:100%; box-sizing: border-box; border:none; padding-left: 20px; padding-top:20px; -moz-appearance: none; -webkit-appearance: none; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form select { width: 100%; margin-bottom: 5px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-appearance: none; -moz-appearance: none; height: 50px; border: none; padding-left: 10px; box-sizing: border-box; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input:focus, .form textarea:focus, .form select:focus { outline-style: none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input[type="checkbox"], .form input[type="radio"] { -webkit-appearance: none; background: #FFF; /*CHECKBOX BACKGROUND*/ width:20px; height: 20px; display: inline-block; margin-top: 0px; margin-right:10px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input[type="checkbox"] + label { display:inline-block; vertical-align: super; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form button { -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; padding: 20px; min-width: 150px; border: none; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; -ms-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form button:hover { cursor: pointer; } /*--------------------------------------|------------------------------------------------------------------|---------------------------- FORM COLOURS ----------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input, .form textarea, .form select { -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; -ms-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input { background: #ccc6b2; } /*INPUT BACKGROUND*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input:focus { background: #8a995a; color: #FFF;} /*INPUT ACTIVE*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form textarea { background: #ccc6b2; } /*TEXTBOX BACKGROUND*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form textarea:focus { background: #8a995a; color: #FFF; } /*TEXTBOX ACTIVE*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form select { background: #787878; } /*SELECT COLOUR*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form select:focus { background: #347ec9; color: #FFF; } /*SELECT ACTIVE*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input[type="password"] { background: #787878; } /*PASSWORD BACKGROUND*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input[type="password"]:focus { background: #347ec9; } /*PASSWORD ACTIVE*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input[type="radio"] { background: #787878; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input[type="radio"]:checked { background: #347ec9; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input[type="checkbox"] { background: #787878; } /*CHECKBOX COLOUR*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form input[type="checkbox"]:checked { background: #347ec9; } /*CHECKBOX CHECKED*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form button { background: #8a995a; /*BUTTON COLOUR*/ color: #FFF } /*BUTTON TEXT*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .form button:hover { background: #6a783f; /*BUTTON COLOUR HOVER*/ color: #FFF; } /*BUTTON TEXT HOVER*/ /*--------------------------------------|--------------------------------------------------------------------------------------------*/ .form select { background-image:url(../icons/formtab.png); /*SELECT ARROW*/ background-position: right 20px center; background-size: 30px 30px; background-repeat: no-repeat; } /*--------------------------------------|--------------------------------------------------------------------------------------------*/ #spam { background-image:url(../icons/spam.png); background-position: right 0px center; background-repeat: no-repeat; } /*--------------------------------------|------------------------------------------------------------------|---------------------------- SPLIT FORMS ----------------------------------------|------------------------------------------------------------------|--------------------------*/ .splitform { width: 460px; float: left; margin-right: 20px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .splitcheckbox { width: 220px; float: left; margin-right: 20px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ div span.splitbutton { margin-top:41px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .last { margin-right: 0px; } /*--------------------------------------|------------------------------------------------------------------|---------------------------- FORM TOOLTIPS ----------------------------------------|------------------------------------------------------------------|--------------------------*/ input + .fieldtip, textarea + .fieldtip { box-sizing: border-box; display:none; position: relative; bottom: 0; left: 0px; opacity: 0; content: attr(data-tool); height: auto; width: 100%; padding-top: 10px; padding-left: 8px; padding-right:8px; z-index: 9999; color: #347ec9; /*TOOLTIP TEXT COLOUR*/ text-decoration: none; } /*TOOLTIP BG COLOUR*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ input + .fieldtip:after, textarea + .fieldtip:after { display: block; position: absolute; visibility: hidden; content:''; width: 0; height: 0; top: 8px; left: -8px; border-style: solid; border-width: 4px 8px 4px 0; border-color: transparent rgba(0,0,0,0.75) transparent transparent; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ input:focus + .fieldtip, input:focus + .fieldtip:after, textarea:focus + .fieldtip, textarea:focus + .fieldtip:after { display:block; opacity: 1; } /*--------------------------------------|------------------------------------------------------------------|---------------------------- LIGHTBOX ----------------------------------------|------------------------------------------------------------------|--------------------------*/ .lightbox { display: none; position: fixed; z-index: 9999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: black; /*FULLSCREEN BACKGROUND*/ background: rgba(0,0,0,0.6); } /*BACKGROUND COLOUR*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .lightbox:target { display: block; outline: none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .lightboxclose { position: absolute; right: 0px; top: 0px; width: 40px; height: 40px; } .lightbox .wrapper { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); max-height: 100vh; } /*--------------------------------------|----------------------------------------------------------------|------------------------------ BANNER ----------------------------------------|----------------------------------------------------------------|----------------------------*/ .banner { position: fixed; z-index: 10; } .banner .navigation, /*FIXED BANNER*/ .banner .wrapper { margin-bottom: 0px; } /*--------------------------------------|--------------------------------------------------------------------|-------------------------- EXTRAS ----------------------------------------|--------------------------------------------------------------------|------------------------*/ .thethreehs { z-index: 10; position: absolute; top: -75px; left: -50px; } .arrow { z-index: 10; position: absolute; top: 37px; left: -20px; } .viewourmenus { z-index: 10; position: absolute; top: 10px; right: -50px; } .arrowtwo { z-index: 10; position: absolute; top: 37px; right: -20px; } .arrowthree { z-index: 10; position: absolute; top: -90px; left: 455px; } .bg_headermap { background-image: url("../images/headermap.png"); z-index: 1; margin-top: -500px; pointer-events: none; } /*--------------------------------------|------------------------------------------------------------------|---------------------------- TABLET STYLES ----------------------------------------|------------------------------------------------------------------|--------------------------*/ @media screen and (max-width:980px) { /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ -ms-@viewport { width: 680; zoom: fixed; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ body { min-width: 680px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ tablethide, .tablethide { display: none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .wrapper { width: 640px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .col1 { width: 620px; } /*ONE IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .col2 { width: 300px; } /*TWO IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .col3 { width: 193px; } /*THREE IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .col4 { width: 139px; } /*FOUR IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .col6 { width: 193px; } /*SIX IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .col4-3 { width: 461px; } /*ONE + COL4*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .col3-2 { width: 406px; } /*ONE + COL3*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical.col4 { width: 139px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical.col3 { width: 193px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube1 { width: 580px; height: 580px; } /*ONE IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube2 { width: 260px; height: 260px; } /*TWO IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube3 { height:153px; width:153px; } /*THREE IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube4 { width: 99px; height:99px; } /*FOUR IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube4.alt { width: 260px; height:260px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube6 { width: 46px; height:46px; } /*SIX IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube6.expand { height: auto; min-height: 46px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube4.expand { height: auto; min-height: 100px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube3.expand { height: auto; min-height: 153px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube2.expand { height: auto; min-height: 260px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube1.expand { height: auto; min-height: 580px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul li a { padding: 0 10px; } /*NAVIGATION SPACING*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ tabletclear, .tabletclear { clear:both } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .splitform { width: 300px; float: left; margin-right: 20px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .splitcheckbox { width: 139px; float: left; margin-right: 20px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .split { width: 100%; } /*--------------------------------------|----------------------------------------------------------------|----------------------------*/ /*--------------------------------------|--------------------------------------------------------------------|-------------------------- TABLET EXTRAS ----------------------------------------|--------------------------------------------------------------------|------------------------*/ text_script, .text_script { font-size: 12px; } .button_green { padding-left: 10px; padding-right: 10px; } .footericon { padding: 5px; width: 25px; } .arrowthree { z-index: 10; position: absolute; top: -90px; left: 300px; } } /*--------------------------------------|------------------------------------------------------------------|---------------------------- MOBILE STYLES ----------------------------------------|------------------------------------------------------------------|--------------------------*/ @media screen and (max-width:679px) { /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ -ms-@viewport { width: 340; zoom: fixed; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ tablethide, .tablethide { display: inherit; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ mobilehide, .mobilehide { display: none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ tabletclear, .tabletclear { clear:none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ mobileclear, .mobileclear { clear:both } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ body { min-width: 340px; background-image: none; background:#fffaf1; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .wrapper { width: 320px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .col6 { width: 140px; } /*TWO IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .col4, .col3, .col3-2, .col2, .col1, .col4-3 { width: 300px; } /*ONE IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube3, .cube2, .cube1 { width: 260px; height:260px; } /*ONE IN A ROW*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .cube3.expand, .cube2.expand, .cube1.expand { height:auto; min-height: 260px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .splitform { width: 100%; float: none; margin-right: 0px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .splitcheckbox { width: 100%; float: none; margin-right: 0px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ div span.splitbutton { margin-top:0px; } /*--------------------------------------|------------------------------------------------------------------|---------------------------- MOBILE NAVIGATION ----------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation { width: 320px; max-height:50px; overflow:hidden; /*MOBILE TAB*/ background-image:url(../icons/mobiletab.png); /*MOBILE TAB ARROW*/ background-position: right 20px center; background-size: 30px 30px; background-repeat: no-repeat; position: relative; margin-right: auto; margin-left: auto; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation:hover, .navigation:focus { max-height:999px; overflow:auto; /*MOBILE TAB*/ -webkit-transition: max-height 0.3s ease; -moz-transition: max-height 1.0s ease; -o-transition: max-height 1.0s ease; -ms-transition: max-height 1.0s ease; transition: max-height 1.0s ease; background-image:none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul { text-align:left; } /*MOBILE MENU ALIGN*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul li { display:list-item; position:relative; border-bottom: 2px solid #8a995a; } /*LINK SEPERATORS*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul li a { display:block; padding-left: 20px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul li.right { float:none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul li.left { float:none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul li.mobiletab, .navigation.vertical ul li.mobiletab { display:list-item; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul ul { position:relative; display:none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul ul li { text-align:left; } /*MOBILE MENU ALIGN*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul ul li a { display: block; width:auto; line-height: 40px; /*DROPDOWN HEIGHT*/ text-transform:none; } /*LOWERCASE*/ /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation ul ul ul { position:relative; left:auto; top:0; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical ul ul { left:auto; top:0; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical.col4 { width: 300px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .navigation.vertical.col3 { width: 300px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ /*--------------------------------------|--------------------------------------------------------------------|-------------------------- MOBILE EXTRAS ----------------------------------------|--------------------------------------------------------------------|------------------------*/ .logo { width: 150px; } .button_green { padding-left: 20px; padding-right: 20px; } .footericon { padding: 10px; width: 35px; } } /*--------------------------------------|------------------------------------------------------------------|---------------------------- DESKTOP ONLY STYLES ----------------------------------------|------------------------------------------------------------------|--------------------------*/ @media screen and (min-width:980px) { /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ deskhide, .deskhide { display:none; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ deskclear, .deskclear { clear: both; } /*--------------------------------------|------------------------------------------------------------------|---------------------------- 3D AND SHAOW EFFECTS ----------------------------------------|------------------------------------------------------------------|--------------------------*/ .threedee { box-shadow: 1px 1px 0px 0px #fff, 2px 2px 0px 0px #eee, 3px 3px 0px 0px #fff, 4px 4px 0px 0px #eee, 5px 5px 0px 0px #fff, 6px 6px 0px 0px #eee, 7px 7px 0px 0px #fff, 8px 8px 0px 0px #eee, 9px 9px 0px 0px #adadad, /*3D COLOUR*/ 5px 5px 20px 0px rgba(0,0,0,0.50); margin-top: 11px; margin-left: 0px; margin-right:20px; margin-bottom: 9px; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .threedeehover { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /*--------------------------------------|------------------------------------------------------------------|--------------------------*/ .threedeehover:hover { box-shadow: 1px 1px 0px 0px #fff, 2px 2px 0px 0px #eee, 3px 3px 0px 0px #fff, 4px 4px 0px 0px #eee, 5px 5px 0px 0px #fff, 6px 6px 0px 0px #eee, 7px 7px 0px 0px #fff, 8px 8px 0px 0px #eee, 9px 9px 0px 0px #adadad, /*3D COLOUR*/ 5px 5px 20px 0px rgba(0,0,0,0.50);} /*--------------------------------------|-------------------------------------------------------------------|-------------------------*/ .cube1.threedeehover:hover, .cube1.shadowhover:hover, .cube2.threedeehover:hover, .cube2.shadowhover:hover, .cube3.threedeehover:hover, .cube3.shadowhover:hover, .cube4.threedeehover:hover, .cube4.shadowhover:hover, .cube6.threedeehover:hover, .cube6.shadowhover:hover { margin-top: 11px; margin-left: 0px; margin-right:20px; margin-bottom: 9px; } /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ .cube2.threedeehover.center:hover, .cube2.shadowhover.center:hover { margin-top: 11px; margin-left: 240px; margin-right:20px; margin-bottom: 9px; } /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ .cube3.threedeehover.center:hover, .cube3.shadowhover.center:hover { margin-top: 11px; margin-left: 320px; margin-right:20px; margin-bottom: 9px; } /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ .cube4.threedeehover.center:hover, .cube4.shadowhover.center:hover { margin-top: 11px; margin-left: 360px; margin-right:20px; margin-bottom: 9px; } /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ .cube6.threedeehover.center:hover, .cube6.shadowhover.center:hover { margin-top: 11px; margin-left: 400px; margin-right:20px; margin-bottom: 9px; } /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ .cube2.threedee.center, .cube2.shadow.center { margin-top: 11px; margin-left: 240px; margin-right:20px; margin-bottom: 9px; } /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ .cube3.threedee.center, .cube3.shadow.center { margin-top: 11px; margin-left: 320px; margin-right:20px; margin-bottom: 9px; } /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ .cube4.threedee.center, .cube4.shadow.center { margin-top: 11px; margin-left: 360px; margin-right:20px; margin-bottom: 9px; } /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ .cube6.threedee.center, .cube6.shadow.center { margin-top: 11px; margin-left: 400px; margin-right:20px; margin-bottom: 9px; } /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ .shadowhover { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ .shadowhover:hover { box-shadow: 1px 1px 0px 0px #fff, 2px 2px 0px 0px #eee, 10px 10px 15px 0px rgba(0,0,0,0.20);} /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ .shadow { box-shadow: 1px 1px 0px 0px #fff, 2px 2px 0px 0px #eee, 10px 10px 15px 0px rgba(0,0,0,0.20); margin-top: 11px; margin-left: 0px; margin-right:20px; margin-bottom: 9px;} /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ .cube1.threedee, .cube1.shadow, .cube2.threedee, .cube2.shadow, .cube3.threedee, .cube3.shadow, .cube4.threedee, .cube4.shadow, .cube6.threedee, .cube6.shadow { margin-top: 11px; margin-left: 0px; margin-right:20px; margin-bottom: 9px; } /*--------------------------------------|--------------------------------------------------------------------|------------------------*/ /*--------------------------------------|--------------------------------------------------------------------|-------------------------- DESKTOP ONLY EXTRAS ----------------------------------------|--------------------------------------------------------------------|------------------------*/ } /*--------------------------------------|--------------------------------------------------------------------|-------------------------- OVERIDES ----------------------------------------|--------------------------------------------------------------------|------------------------*/ .auto { height: auto; } /*CUBE WRAPPING*/ .scroll { overflow-y: scroll } div p { margin-top: 20px; }