/*
 * HTML5 ✰ Boilerplate - uses normalize.css instead of reset.css
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 */
/* ==|== primary styles =====================================================
   Author: NXT Digital Solutions
   ========================================================================== */

body { background: #fff; /*url(/assets/Images/978-grid.png) repeat-y center top;*/ }

h1, h2, h3, h4, h5, h6, p, ol, ul { margin-top: 0; }

#articleBody ul { }
#articleBody ul li { background: url(/Assets/Images/bullet.png) no-repeat 0 6px; padding: 0 0 0 10px; }

/* Headings */
header h1 { margin-top: 16px; }

h1,
h2 {
    color: #0096d7;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 5px;
}
h1 { font-size: 30px; font-weight: normal; margin-bottom: 10px; color: #002142; }
h2 { font-size: 20px; margin-top: 1em }
h3 { font-size: 16px; margin-top: 0.8em}
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 13px; }
.main .fibre-optics { background: url(/assets/Images/temp-content-header.png) no-repeat left top; color: White; /* Have set styles on the colours - if all titles havea backgroun image*/ line-height: 127px; padding: 0 30px; }
.line { border-bottom: 5px solid #0096d7; padding-bottom: 5px; }
h2.orange,
h2.green{
    position: relative;
    z-index: 9;
    background: url(/assets/Images/leftnav-header-orange.png) no-repeat left top;
    color: White;
    font-size: 15px;
    margin: 0;
    padding: 4px 10px 18px;
}
#submenu
{
    
}

.ie7 h2.orange,
.ie7 h2.green {
    position: static;
}
h2.green { background-image: url(/assets/Images/leftnav-header-green.png); }

/* Styles for Umbraco */
p { font-family: 'PT Sans', Helvetica, Arial, sans-serif; font-weight: normal; color: #777777; font-size:14px }
.intro { font-size: 1.4em }
p.downloadLink { display: block; background: url(/assets/Images/icon-download.png) no-repeat 0 center; padding: 10px 0 10px 40px }
.smallText { font-size: 0.8em; }
.usefulLinks {  background: url(/assets/Images/leftnav-tier1-arrow-up.png) no-repeat left center; padding-left: 10px; padding-bottom:0; margin-bottom:0.4em  }

/* Buttons */
/* Simple form buttons */
input.button { background: url(/assets/images/button-submit.png) no-repeat center center; color: #b0e0f4; border: 0; width: 86px; height: 29px; font-size: 15px; font-weight: bold; text-align: center; }
input.button:hover { color: White; }

/* Need multiple kinds - blue on white & grey, black on white & grey, etc */
/* Default is blue on white */
.button-container-centre { margin: 20px auto 10px; float: right; position: relative; left: -50%; }
.button-container-right { float: right; }

a.button {
    background: url(/assets/Images/button-blue.png) no-repeat right -62px;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 15px;
    font-weight: normal;
    height: 30px; /* Height of the background image */
    padding-right: 10px;
    position: relative;
    text-align: center;
}
.button-container-centre a.button { position: relative; left: 50%; }
.button-container-right a.button { float: right; margin-left: 20px; }

a.button span {
    background: url(/assets/Images/button-blue.png) no-repeat left top;
    color: white;
    display: block;
    /*height: 1em;*/
    line-height: 30px;
    padding: 0 5px 0 10px;
}
a.button:hover { background-position: right -93px; }
a.button:hover span { background-position: left -31px; }

/* Icon part of the buttons */
.icon {
    background-position: left center;
    background-repeat: no-repeat;
    float: left;
    width: 16px;
    padding-right: 5px;
}
.icon-add { background-image: url(/assets/Images/button-add.png); }
.icon-arrow { background-image: url(/assets/Images/blue-button-arrow.png); }

/* Icons - merge related styles if possible */
.arrow-down { background: url(/assets/Images/top-header-arrow.png) no-repeat left center; padding-left: 10px; }
.arrow-down-blue { background: url(/assets/Images/icon-country-arrow.png) no-repeat left center; padding-left: 10px; }
.arrow-left-white-small { background: url(/assets/Images/carousel-white-arrow.png) no-repeat left center; padding-left: 10px; }
.arrow-right { background: url(/assets/Images/arrow-blue.png) no-repeat left center; padding-left: 15px; font-weight: bold; /* Might want to make this more specific as not all links might want to be bolded */ }
.arrow-right-blue { background: url(/assets/Images/leftnav-tier2-arrow-up.png) no-repeat left center; padding-left: 10px; }
.arrow-right-grey { background: url(/assets/Images/leftnav-tier1-arrow.png) no-repeat left center; padding-left: 10px; }
/*.training { background: url(/assets/Images/icon-training.png) no-repeat left center; padding-left: 23px; }*/
.cart , #miniCart{ background: url(/assets/Images/icon-cart.png) no-repeat left center; padding-left: 28px; }
.email { background: url(/assets/Images/icon-email.png) no-repeat left center; padding-left: 23px; }
/*.plug { background: url(/assets/Images/icon-our-products.png) no-repeat left center; padding-left: 23px; }*/
/*.question { background: url(/assets/Images/icon-why-choose-us.png) no-repeat left center; padding-left: 23px; }*/
.tel { background: url(/assets/Images/icon-tel.png) no-repeat left center; padding-left: 23px !important; }

/**/
#flexibleContent, #aflContent, #trainingContent{
  min-height: 270px;
}

/* Lists which use dotted lines as dividers */
.dotted { list-style: none; margin: 0; padding: 0; background: url(/assets/Images/leftnav-dotline.png) repeat-x left top; }
.dotted li { overflow: hidden; background: url(/assets/Images/leftnav-dotline.png) repeat-x left bottom; padding: 20px 0 30px 0; }
.dotted li li { background: none; padding: 0; }
.xsltsearch_result.dotted{padding: 15px 0px;}
.xsltsearch_result.dotted p{padding: 0px 0px; margin: 0;}
/* Top Bar */
.bar { /*overflow: hidden;*/ float: left; width: 100%; background: #1e1e1e url(/assets/Images/top-header-bkg.png) repeat-x left top; font-size: 12px; line-height: 28px; /* Matches background image */ text-transform: uppercase; }
.bar a { color: #9a9a9a; }
.bar a:hover { color: white; }
.bar .barHomeLink a{font-weight: bold;text-transform: none; font-size: 1.2em;}
.bar li { float: right; background: url(/assets/Images/top-header-divide.png) no-repeat right top; padding-right: 20px !important; /*padding-left: 5px !important;*/ }
/*.bar li { float: right; background: url(/assets/Images/top-header-divide.png) no-repeat left top; padding-right: 5px !important; }*/
.bar li.last { background: none; }
.bar .login a, 
.bar .worldwide a,
.bar .logout a,
.bar .loggedIn{
    display: block;
    padding: 0 15px 0 20px;
    font-weight: bold;
}

.bar .logout a { background: url(/assets/Images/icon-16-logout-nav.png) no-repeat right 7px;}
.bar .logout a:hover { background: url(/assets/Images/icon-16-logout-nav-hover.png) no-repeat right 7px;}

.bar .login a { background: url(/assets/Images/icon-lock.png) no-repeat right center; }
/*.bar .toggle-title { background: url(/assets/Images/top-header-arrow.png) no-repeat 142px center; }
.bar .open { background-color: White; }
.bar .toggle-content { position: absolute; padding: 0; border-top: 1px solid #dedede; -moz-box-shadow: 0 2px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.bar .toggle-content li { display: block; float: none; background: white; text-align: right; padding: 0; border-bottom: 1px solid #dedede; }
.bar .toggle-content a { display: block; color: #0096d7; padding: 0 20px; width: 112px; }*/
.bar .worldwide { position: relative; z-index: 100; padding-right: 0 !important; }
.bar .worldwide a { background: url(/assets/Images/top-header-arrow.png) no-repeat 98% center; } /* horizontal position was: 142px*/
.bar .worldwide a:hover { background-color: White; color: #9a9a9a; }
.bar .worldwide a.selected { background-color: White; color: #9a9a9a; }
.bar .worldwide ul { display: none; position: absolute; top: 28px; right:0px; padding: 0; border-top: 1px solid #dedede; -moz-box-shadow: 0 2px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.bar .worldwide:hover ul { display: block; }
.bar .worldwide ul li { position: relative; z-index: 12; display: block; float: none; background: white; text-align: right; padding: 0; border-bottom: 1px solid #dedede; }
.bar .worldwide ul a { display: block; background: transparent; color: #0096d7; padding: 0 20px; width: 112px; }
.bar .worldwide ul a:hover { text-decoration: underline; color: #0096d7; }

/* Header */
header { padding: 20px 0 0; /*background: url(/assets/Images/tabs-bkg.png) repeat-x left bottom;*/ }
.quick-contact { margin-top: 30px; text-align: right; float: right; width: 700px; }
.quick-contact address { float: right; color: #c3c3c3; text-transform: uppercase; font-weight: bold; }
.quick-contact address.nouk { margin-right : 20px; }
.quick-contact address em {  color: #626262; font-weight: normal; font-style: normal;}
.quick-contact .cart { margin: 0 30px 0 20px; }

#search { position: relative; float: right; text-align:left; background: url(/assets/Images/search-bkg.png) no-repeat left top; width: 211px; line-height: 23px; }
.ie7 #search { z-index:1; } /* If you set to -1 it allows the worldwide to drop over it, but prevents use of the search */
#search input[type=text]{ width: 173px; background: transparent; padding: 0 5px; border: 0; }
#search .toggle-title { width: 20px; padding: 0 24px 2px 7px; }
#search .open { border-bottom: 1px solid white; }
#search .toggle-content { position: absolute; top: 23px; left: 74px; width: 85px; padding: 5px 10px; background: white; border: 1px solid #dedede; border-top: 0; -moz-box-shadow: 0 2px 2px rgba(0,0,0,.2); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); }
#search label { margin-left: 7px; }
#btnSearch { /*display: block; float: right;*/ position: absolute; top: 0; right: 0; width: 30px; height: 23px; text-indent: -9999em; }
#btnSearch:hover { background: url(/assets/Images/search-hover.png) no-repeat left top; }
    
nav a:hover { text-decoration: none; }

/* Main Nav */
/* Tabbed Navigation - the site's main navigation menu. Set horizontally and made of tabs */
.navigation { /*overflow: hidden;*/ background: url(/assets/Images/header-bkg2.png) repeat-x left top; padding: 14px 0 88px; font-size: 16px; line-height: 40px; font-weight: bold; }
.navigation ul { float:left; padding: 0; margin: 0}
.navigation li { float:left; background:none; position: relative; padding: 0; margin: 0}
.navigation li a { display:block; background: url(/assets/Images/main-nav-button.png) no-repeat left top; min-width: 80px; padding:0 14px; color:#002142; text-align: center; }

.navigation .shop { float: right; background: url(/assets/Images/blue-arrows-double.png) no-repeat right center; padding-right: 20px; text-align: right; }
/*  Set the current tab based on what page/section you are on
    Each page has a unique identifier by setting the body tag's ID attribute 
    Each section has at least one class set, again on the body tag - this is more useful than the ID for avoiding lots of selectors
*/
.navigation li a:hover,
body .tab-home a,
.products .tab-products a,
.news .tab-news a,
.about .tab-about a,
.downloads .tab-downloads a,
.contactus .tab-contact a,
.navigation li.active a{
    background-image: url(/assets/Images/main-nav-button-up.png);
}

/* Drop down menus */
.navigation li ul { display: none; position: absolute; top: 40px; left: 0;
                    z-index: 1001;
                    line-height: 26px;
                    -moz-box-shadow: 0 2px 4px rgba(0,0,0,.2);
                    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                    width: 230px;
                    background-color: white;
                    padding-top: 12px;
                    padding-bottom: 12px;
                    }
.navigation li ul li ul.secondTier{display: block; position: relative;
                  top: auto; left: auto;
                    
                    line-height: 26px;
                    -moz-box-shadow: none;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                    width: 190px;
                    background-color: white;
                    padding-top: 7px;
                    padding-bottom: 7px;
 padding-left: 0px;
                    }
.navigation li ul.navPages{display: block; position: relative;
                  top: auto; left: auto;
                    float:left;
                    line-height: 26px;
                    -moz-box-shadow: none;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                    width: 200px;
                    background-color: white;
                    padding-top: 0px;
                    padding-bottom: 7px;
 padding-left: 0px;
  min-height:317px;
                    }
.navigation li ul li ul.secondTier{line-height: 1.2em; }
.navigation li ul li ul.secondTier li{width: 150px; padding: 0; }


.navigation li ul.nav_products{
  width: 870px;}
.navigation li:hover ul { display: block; }

.navigation li ul li { float: none; padding: 0 20px; }
.navigation li ul.nav_products li{ float: left;}

.navigation li li a { background: white !important; color: #0096d7; border-bottom: 1px solid #dedede;
                      width: 190px; font-size: 13px; font-weight: normal; text-align: left; padding: 0 0px;
}
.navigation li ul li ul.secondTier li a{color: #009CDE; width: 180px;border-bottom: 0;}

.navigation li ul.nav_products li{padding-right: 0px;}
.navigation li ul.nav_products li.prodCat{width: 196px; height:auto;}
.navigation li ul.nav_products li a{width: 190px;}
.navigation li ul.nav_products li ul.secondTier li a {width: 177px;}
.navigation li ul.nav_products li.navPage a {width: 170px;}
.navigation li li a:hover{ color: #002142; }
.navigation li li a.nav_ProductCategory:hover{color: #0096d7;}
.navigation li li a.nav_ProductCategory{color: #001121;}
.navigation li ul li ul.secondTier li a:hover{color:#001121; }
/*.navigation li li a.nav_ProductCategory{float: left;}
.navigation li li a.nav_Page{float: left;}*/

/* Container */
#container { margin-top: -84px; }
 
/* Intro */
body #intro { background: black; color: White; }
body #intro .layout-978 { position: relative; overflow: hidden; background: black; height: 304px; width: 958px; padding-left: 20px; }
body #intro ul { /*float: right;*/ position: absolute; top: 35px; right: 0;z-index:999; }
body #intro li { float: left; margin-left: 5px; }
body #intro li a { display: block; background: url(/assets/Images/carousel-circle.png) repeat-x left top; width: 12px; height: 11px; }
/*.ie7 body #intro li a { margin: 0; }*/
body #intro li a:hover,
body #intro .selected a { 
    background-image: url(/assets/Images/carousel-circle-selected.png);
    /*color: White; */
}
body #intro h1 { margin: 30px 0 10px; color: #0096d7; font-size: 28px; font-weight: bold; }
body #intro p { margin: 0 0 50px; width: 400px; color: #FFF;}
.carouselSlide { background: black url(/assets/Images/carousel-bg1.jpg) no-repeat right top; overflow: hidden; width: 100%; height: 100%; }
#carousel2 { background-image: url(/assets/Images/carousel-bg2.jpg); }
#carousel3 { background-image: url(/assets/Images/carousel-bg3.jpg); }
#carousel4 { background-image: url(/assets/Images/carousel-bg4.jpg); }
 
/* Twitter */
.tweets { overflow: hidden; 
          background: url(/assets/Images/twitter-bkg.png) no-repeat left top; 
          margin: 20px 0; 
          line-height: 38px;
          height: 38px; 
          padding: 0 45px 0 12px; }
          
          #tweetOuter
          {
              width: 770px;
              position:relative;/*ie7*/
              overflow: hidden; 
          }
          #tweetContainer
          {
              height: 38px;
              overflow:visible;
              white-space: nowrap;
              width: 2000px;
          }
          .innerTweet
          {
              height: 38px;
              padding-left:30px;
          }
          .innerTweet strong
          {
              padding-right:10px;
          }
.ie7 .tweets, .ie8 .tweets { padding-right: 40px; }
/*.tweets .tweet { background: red; width: 400px; } Will have to make a block to set width - then move link to appear before it in markup, or position: absolute*/
.tweets .follow { float: right; font-weight: bold; }

/* Main */
.main { border-top: 1px solid #dedede; padding-top: 10px; }
body .main { border: 0; padding-top: 0; }

.main .tabs { float: left; width: 100%; margin-bottom: 20px; border-bottom: 1px solid #dedede; }
.main .tabs li { float: left; border: 1px solid #dedede; border-width: 1px 1px 0 0; }
.main .tabs .first { border-left-width: 1px; }
.main .tabs .current { background: white; border-bottom: 1px solid white; margin-bottom: -1px; }
.main .tabs a { display: block; float: left; padding: 0 24px; line-height: 41px; font-weight: bold; font-size: 16px; background-position: 20px center; }
#product .tabs { margin-top: 30px; }
#product .tabs a { cursor:pointer; text-transform: uppercase; font-size: 13px; width: auto; padding: 0 20px; text-align: center; line-height: 32px; }
#product .tabs .current a { color: #002142; }

.breadcrumbs { border-bottom: 1px solid #dedede; background: white; color: #000; margin: 0 0 10px; padding: 0 20px; line-height: 50px; font-size: 12px; }
.breadcrumbs ol { display: inline; }
.breadcrumbs li { color: #555555; margin-right: 10px; }
.breadcrumbs .arrow-right-grey { padding-left: 15px; }

/* Toggle content - content that expans on open - probably separate into generic styles and specific ones */
.toggle-container { background: #ebebeb; border: 1px solid #dedede; }
.toggle-container .toggle-title { background: url(/assets/Images/filter-plus.png) no-repeat 15px center; margin: 0; padding: 0 15px 0 55px; line-height: 46px; font-weight: bold; }
.toggle-container .open { background-image: url(/assets/Images/filter-minus.png); }
.toggle-container .toggle-content { padding: 15px; }

/* Scrollable list */
body .gallery { position: relative; padding: 0 35px 0 47px; }
body .gallery .prev,
body .gallery .next,
.controls .prev-slide,
.controls .next-slide {
    display: block;
    margin-top: -70px; /* changed from 50px so that the buttons line up with the images rather than the centre of the items */
    height: 101px;
    position: absolute;
    text-indent: -9999em;
    top: 50%;
    width: 30px;
}
body .gallery .prev, .controls .prev-slide { background: url(/assets/Images/large-arrow-left.png) no-repeat left center; left: 0; }
body .gallery .next, .controls .next-slide { background: url(/assets/Images/large-arrow-right.png) no-repeat right center; right: 0; }

body .gallery ul { clear: both; overflow: hidden; padding: 0;margin: 0px; }
body .gallery li { float: left; margin-right: 12px; }
body .gallery li a { display: block; text-align: center; width: 128px; /* images are 126px + 1px border each side */}
body .gallery li img { display: block; border: 1px solid #dedede; margin-bottom: 5px; }
body .gallery li span{ font-size: 11px; }
/*.items-container {
    overflow: hidden;
    position: relative;
    width: 560px;
}*/
#memberItems {
    position: relative;
}
/* Lemmon-Slider */
.slider    { overflow:hidden; position:relative; }
.slider ul { margin:0; padding:0; }
.slider li { float:left; margin:0 5px 0 0; list-style:none; }
/* IE6 issues */
.slider ul { width:100%; }


/* Products Category List */
#productCategories ul.products { overflow: hidden; margin:0; padding:0; background: none}
#productCategories ul.products li { float: left; border: 0 solid #dedede; border-right-width: 0px; margin:0; padding:0; background: none }
#productCategories ul.products li.divider { float: none; display: block; clear: both; border-width: 0 0 1px; margin: 0 20px 9px; height: 6px; }
#productCategories ul.products li.first { border-left-width: 1px; }
#productCategories ul.products a { display: block; width: 126px; /*Thumbnail width */ height: 180px; padding: 9px; }
#productCategories ul.products a span {display:block;}
#productCategories ul.products img { margin-bottom: 10px; border: 1px solid #DEDEDE;}

/* Products List */
ul.products { overflow: hidden; margin:0; padding:0; background: none}
ul.products li { float: left; border: 0 solid #dedede; border-right-width: 0px; margin:0; padding:0; background: none }
ul.products li.divider { float: none; display: block; clear: both; border-width: 0 0 1px; margin: 0 20px 9px; height: 6px; }
ul.products li.first { border-left-width: 1px; }
ul.products a {  display: block; width: 126px; /*Thumbnail width */ min-height: 180px; padding:9px;}
ul.products a span {display:block;}
ul.products img { margin-bottom: 10px; border: 1px solid #DEDEDE;}

.products select { margin: 0 30px 0 5px; }
.checkbox-list { margin-left: 15px; font-weight: bold; }
.checkbox-list label { margin: 0 15px 0 5px; }

/* Product Page */
.photos { position: relative; clear: both; overflow: hidden; }
.photos .zoom { position: absolute; right: 10px; bottom: 20px; border: none; }
.thumb-main img { border: 1px solid #dedede;}
.thumb-main,
.thumbs a { 
    
    display: block;
    float: left;
    margin-bottom: 10px;
}
.thumbs img
{
    width: 66px;
    height: 66px;
    padding: 2px;
    border: 1px solid #dedede;
    margin-right: 8px;
}
.thumbs a { margin-left: 8px; } /* Might want to change the size of the thumbs so they fit flush on the edge of the column */

#product h1 { margin-bottom: 10px;}
#product h1, #product h1 a {color: #002142; font-weight: normal;}
#product h2 { color: #777777; font-size: 14px; }

section.add { overflow: hidden; border: 0 solid #dedede; border-width: 1px 0; background: #ebebeb; padding: 15px; }
section.add p { background: white; text-align: center; border: 1px solid #dedede; padding: 10px 0; }
section.add .price { color: #9caf21; font-size: 30px; font-weight: bold; }
section.add fieldset { margin-left:150px; }
.ie7 section.add fieldset { margin-left:126px; }
section.add select { margin: 5px 0 0; }
section.add .button { font-size: 14px; font-weight: bold; }

#productFeatures ul li,
#productFullDescription ul li,
#productNotes ul li{
background: url(/assets/Images/bullet.png) no-repeat left center; padding: 3px 20px; }


#productDownloads li { background: url(/assets/Images/leftnav-dotline.png) repeat-x left bottom; padding: 10px 0; }
#productDownloads h3 { margin: 0; }
.ie7 #productDownloads h3 { margin-left: -15px; }
#productDownloads a { display: block; background: url(/assets/Images/icon-download.png) no-repeat 20px center; padding-left: 60px; }
#productDownloads span { color: #777777; }

#productDownloads .allDownloads h2 { background: url(/assets/Images/leftnav-dotline.png) repeat-x left top; padding: 15px 0 0 0; }
#productDownloads .allDownloads li { background: none; padding: 0 0 2px; }
#productDownloads .allDownloads h3 { margin: 0 5px 0 0; float: left; font-weight: normal; }

#productDownloads .allDownloads a { overflow: hidden; background: url(/assets/Images/icon-download-small.png) no-repeat left center;  padding: 3px 25px; }
#productDownloads .allDownloads a:hover{background-color: #f2f2f2;}
#productDownloads .allDownloads .details { float: left; margin-top: 2px; }

#DistDownloads ul.vertical{}
#DistDownloads h2.folder{ font-size: 1.2em; padding:2px 2px 2px 23px; margin: 1px; cursor: pointer;}
#DistDownloads h2.folder.closed{background: url(/assets/images/folderClosed.png) no-repeat left center;}
#DistDownloads h2.folder.open{color:#B0C927; background: url(/assets/images/folderOpen.png) no-repeat left center;}
#DistDownloads h2 span {padding-left: 0.8em;color: #999; font-weight: normal; font-size: 0.8em;}
#DistDownloads li ul{}
#DistDownloads h3 { margin: 0 5px 0 0; float: left; font-weight: normal; font-size: 1em;}
#DistDownloads a { display: block; overflow: hidden; background: url(/assets/Images/icon-download-small.png) no-repeat left center;  padding: 3px 20px; }
#DistDownloads a.last{ margin-bottom: 10px;}
#DistDownloads a:hover{background-color: #FCFCFC;}
#DistDownloads .details { float: left; margin-top: 2px; color: #999; font-size: 0.9em;}


#DistDownloads .level-2 li, #DistDownloads .level-3 li,
#DistDownloads .level-4 li, #DistDownloads .level-4 li,
#DistDownloads .level-5 li {margin-left: 24px;}

#productVideo ul.horizontal li{float: left;width: 140px; height: 160px; margin: 15px; background-image:none;}
#productVideo a { position: relative;  display: block; width: 140px; height: 160px;  text-align: center; border: solid 1px #F0F0F0;}
#productVideo a:hover{background-color: #F9F9F9;}
#productVideo .thumb{width: 120px; height:90px; margin: 10px;}
#productVideo .play { position: absolute; top: 65px; right: 55px; }
#productVideo h3 { margin: 0; font-size: 14px; font-weight: normal; }
#productVideo span { font-size: 12px; color: #777777; }

#productVideo iframe{margin: 0px auto 10px auto; display:block;}
/* Meet the Team */
#meet-the-team ul { margin: 0}
#meet-the-team h2,
#meet-the-team h3 { 
    margin-bottom: 0;
    font-weight: normal;
}
#meet-the-team h2 { font-size: 20px; margin-top: 0.1em}
#meet-the-team h3 { color: #002142; margin-bottom: 1em; font-size: 15px; font-style: italic; margin-top: 0.1em }
#meet-the-team img.left { margin-right: 20px; border: 1px solid #dedede; }
#meet-the-team .memberDetails{margin-left: 160px;}
  #meet-the-team li li { color: #002142; }
  #meet-the-team .memberDetails ul {margin-left: 0px; padding-left: 0px;}
  #meet-the-team li li span { color: #0096d7; }


/* Events */
.news .dotted h2,
.news .dotted h3,
.news .dotted p {
    margin-bottom: 0;
}
.news .dotted h2 { font-size: 16px; }
.news .dotted h3 { color: #9caf21; font-size: 13px; font-weight: normal; }

/* Sidebar */
aside { padding-bottom: 20px; }
/*body aside { border-bottom: 1px solid #dedede; }*/ /* Only show on home page */
aside h1 { font-size: 18px; margin: 0 0 20px; }
body aside h1 { border-bottom: 1px solid #dedede; padding-bottom: 10px; }
aside h2 { color: #0096d7; font-size: 16px; margin-top: 0.7em; }

#boxList, aside ul.boxList, aside ul.boxList li.boxItem
{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

#boxList li.box { background: url(/assets/Images/left-box-back.png) repeat-y; }

aside .news li { margin-bottom: 25px; }
aside .news h3,
aside .news p {
    margin: 0;
}
aside .news h3 { font-size: 13px; font-weight: normal; text-transform: uppercase; }
/* should use .news in selectors? */
aside .prev,
aside .next {
    background: url(/assets/Images/news-button.png) no-repeat center top;
    text-indent: -9999em;
    display: block;
    height: 22px;
    margin-bottom: 10px;
}
aside .prev { border-bottom: 1px solid #dedede; }
aside .next { background-image: url(/assets/Images/news-button-down.png); border-top: 1px solid #dedede; }
aside .prev:hover { background-image: url(/assets/Images/news-button-up.png); }
aside .next:hover { background-image: url(/assets/Images/news-button-down-up.png); }

.newsletter { display: block; background: url(/assets/Images/newsletter-bkg.png) no-repeat left top; color: #98d7f1; margin: 20px 0 30px; /* Image height = 44px so height + padding */ height: 28px; padding: 18px 0 0 60px; font-size: 16px; font-weight: bold; }
.boxList .newsletter { background-image: url(/assets/Images/tactical-news-bkg.png); height: 26px; padding-top: 20px; }
.newsletter:hover { color: White; }
#submenu{list-style:none;list-style-position: inside; padding:0}
#submenu .lvl2{padding:0px 0px 0px 0px;list-style:none;}
#submenu li,#submenu li ul {margin: 0px;}
aside nav, #submenu{ margin: -7px 0 20px; }
aside nav li, #submenu li{ background: url(/assets/Images/leftnav-bkg.png) white repeat-x left top; border: 1px solid #dedede; border-top-width: 0; line-height: 28px; padding: 0 10px; }

aside nav li ul, #submenu li ul{ margin-bottom: 2px; }
#submenu li ul li.lastitem {padding-bottom: 13px; background:none }
aside nav li li, #submenu li li { background: url(/assets/Images/leftnav-dotline.png) white repeat-x left bottom; margin: 0 -10px 0 20px; border: 0; padding-left: 0; }
#submenu ul.lvl2 li{margin-left: 12px;}
aside nav li a, #submenu li a{ background: url(/assets/Images/leftnav-tier1-arrow.png) no-repeat left center; padding-left: 10px; color: #777777; display:block; }
aside nav li a:hover,
aside nav li.active a,
aside nav li.inpath a,
#submenu li a:hover,
#submenu li.active a,
#submenu li.inpath a
 { background-image: url(/assets/Images/leftnav-tier1-arrow-up.png); color: #0096d7; }
aside nav li.active li a, 
#submenu li.active li a,
aside nav li.inpath li a, 
#submenu li.inpath li a 
{ background: url(/assets/Images/leftnav-tier2-arrow.png) no-repeat 5px 11px; padding: 5px 0px 5px 15px; color: #777777; line-height: 1.4em;}
aside nav li li a:hover,
aside nav li li.active a,
aside nav li li.inpath a,
#submenu li li a:hover,
#submenu li li.active a,
#submenu li li.inpath a
 { background-image: url(/assets/Images/leftnav-tier2-arrow-up.png); color: #0096d7; }
/*aside nav .current { border-width: 0 0 1px 0; }*/

ul.contact { padding-top: 15px; font-size: 14px;  }
.contact li { margin: 0 12px 2px; }
.contact h3 { margin: ; font-size: 1em; }
.contact .tel { font-weight: bold; }
.contact .email { display: block; margin-top: 4px; }
ul.contactLast { border-bottom:1px solid #DEDEDE; padding-bottom:20px; }
/*.contact a { color: #df8e00; }
.contact a:hover { color: #002142; }*/

/* Footer */
.contentinfo { background: #222; color: #6b6b6b; margin-top: 80px; overflow: hidden; font-size: 13px; }
.contentinfo a,
.contentinfo p small { 
    color: White;
}
.contentinfo a:hover { color: #6b6b6b; }
.contentinfo,
.contentinfo li a,
.innerLinks a { 
    color: #6b6b6b;
}
.contentinfo ul { list-style-position: outside; margin:0; padding:0; }
.contentinfo li { list-style-position: outside; background:none; margin:0; padding:0; }
.contentinfo .innerLinks a:hover { color: White; }
.contentinfo #back-to-top { float: right; background: url(/assets/Images/footer-top.png) no-repeat right top; width: 45px; margin-bottom:50px; padding-top: 2px; font-size: 12px; font-weight: bold; line-height: 30px; /* Height of image */ text-transform: uppercase; text-align: center; }
.contentinfo #back-to-top:hover { color:#9cd9f3 }
.contentinfo .col2 { background: url(/assets/Images/footer-divs.png) repeat-y left top; }
.contentinfo .col2 h1, .contentinfo .col2 .innerLinks, .contentinfo .col2 .level_2 { padding-left: 20px; }
.innerLinks{padding-top: 13px;}
.contentinfo .col2 .level_2 
{
    font-size: 15px;
    font-weight: normal;
    margin-top: 0;

}
.contentinfo .col2 .level_2 a
{
        color: #002142;
}
.contentinfo h1 { margin-top: 0; font-weight: normal; font-size: 15px; }
/* Might want to assign a class to the lists or their containers to avoid inheritance by all lists */
.contentinfo ul { padding-left: 0; list-style: none none inside; }

.social-list { float: right; }
.social-list a {
    display: block;
    float: right;
    background: url(/assets/Images/icon-twitter.png) no-repeat right center;
    margin-top: 75px;
    padding: 1px 25px 1px 15px;
    line-height: 20px;
}
.social-list .linkedin a { background-image: url(/assets/Images/icon-linkedin.png); }
.social-list .facebook a { background-image: url(/assets/Images/icon-facebook.png); }

.contentinfo footer { padding: 1em 0 5e }
.contentinfo .logo { float: left; }
.contentinfo footer .homeLink{font-weight: bold;text-transform: none; font-size: 1.2em;}
.contentinfo small { clear: right; float: right; text-align: right; margin-bottom: 5px; }

/* contact forms */
.newsletterSignup { position: relative; }
.form-container {

    background: none repeat scroll 0 0 #ebebeb;
    margin-bottom: 20px;
    padding: 30px 30px 15px 0;
}
.newsletterSignup .form-container { padding-bottom: 50px; border: 0 solid #dedede;
    border-width: 1px 0;}
.newsletterSignup table { width: 100%; }
.form-container fieldset {
    margin: 0 0 15px 15px;
}
.form-container .half {
    float: left;
}
.form-container label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}
.newsletterSignup .form-container label 
{
  margin: 7px 10px 0px 59px;
  text-align: right;
}
.form-container .text, .form-container select, .form-container textarea {
    border: 1px solid #dedede;
    padding: 4px;
}
.form-container .text {
    display: block;
    height: 30px;
    padding: 0 4px;
    width: 308px;
}
.form-container select {
    width: 318px;
}
.form-container textarea {
    height: 173px;
    width: 656px;
}
.password-reminder td{padding: 5px;}
/* HACK: The button is actually outside of the form container from the .net control, so unless we can change that we need to position here - check in all browsers */
.newsletterSignup .button { position: absolute; bottom: 63px; left: 251px; }

/* Feedback messages */
div.error, div.success { min-width: 690px; border: 1px solid #dda4a1; background: #f9eae9; color: #bb2820; padding: 1em; text-align: center; margin-bottom: 10px; }
div.success { border-color: #9caf21; background: #f1f6da; color: #9caf21; padding: 3em 1em; }
div.error ul, div.success ul { list-style: none; margin: 0; padding: 0; }
.password-reminder div.error {width: 366px; min-width: 0;}
#articleBody div.error ul li, #articleBody div.success ul li { padding: 0; background:none;}

/* Paging */
.paging { overflow: hidden; background: #ededed; padding: 10px 20px; line-height: 23px; font-weight: bold; }
.paging .details { float: left; margin-right: 10px; }
.pages { margin: 0; padding: 0; }
.pages, .pages li { float: left; list-style: none; }
.pages a {
    color: #3b3b3b;
    cursor: pointer;
    display: block;
    float: left;
    margin-right: 5px;
    /*height: 23px;*/
    padding: 0 8px;
    position: relative;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}
.pages .current,
.pages .page:hover { 
    background-color: #3b3b3b;
    color: white;
}
/* First/Last and Next/Previous */
.pages .first,
.pages .last,
.pages .next,
.pages .prev {
    background: transparent url(/assets/Images/button-prev-page.png) no-repeat left top;
    text-indent: -9999em;
    width: 7px; /* Include any padding on link styling above */
}
.pages .next { background-image: url(/assets/Images/button-next-page.png); }
.pages .first { background-image: url(/assets/Images/button-first-page.png); }
.pages .last { background-image: url(/assets/Images/button-last-page.png); }

#pnlCartStep2Feedback {  clear:both; float:left; margin-top:10px; width:950px; margin-bottom:-10px; }


/* ==|== media queries ======================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}



/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

.clear { clear: both; }

/* Text-alignment */
.tc {text-align: center !important; }
.tl { text-align: left !important; }
.tr { text-align: right !important; }

/* General positioning */
.left { float: left; }
.right { float: right; }
.centre,
.center { 
    float: none;
    display: block;
    margin: 0 auto;
}

/* homepage country selector map */
.countrySelector
{
}
.countrySelector p
{margin: 0px;}
.countrySelector ul
{
    display: none;
    position: absolute;
    background-color: #FFF;
    border: 1px solid #D0D0D0;
    width: 120px;
    opacity:.85;
    filter:alpha(opacity=80);
    filter: "alpha(opacity=80)";
    padding-bottom:5px;
    margin-left: 0px;
}
.countrySelector ul li { padding: 0 0 2px 10px;}
.countrySelector ul li a{ display: block; }
/* Lists for Layout */
.horizontal,
.vertical { 
    list-style: none none inside;
    margin: 0;
    padding: 0;
}
.horizontal li,
.vertical li { 
    list-style: none none inside;
 /* margin: 0;*/
    padding: 0;
}
.horizontal li { display: inline; }
.vertical li { display: block; }

.horizontal li span.umbracoExtension{text-transform:uppercase;}

/* jQuery related */
.clickable { cursor: pointer; }

.first, .alpha { margin-left: 0 !important; }
.last, .omega { margin-right: 0 !important; }

.on-top { z-index: 10000; }

/****
    Cookies
****/
#cookies {
    position: fixed;
    bottom: 0;
    width: calc(100% - 60px);
    background: #222;
    padding: 12px 30px 12px 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    z-index: 999;
}
#cookies p {
    margin: 0;
    display: inline;        
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
}
#cookies .btn {
    float: right;
    margin-top: 5px;
    font-size: 1.2rem;
    border: 1px solid;
    padding: 5px 15px;
    margin-top: 0;
}
#cookies .btn:hover {
    color: #0096d7;
    opacity: .8;
}
#cookies a:hover {
    color: #0096d7;
    opacity: .8;
}
#cookies .cookie-policy-title {
    display: block;
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
}
#cookies .cookie-main {
    width: calc(100% - 100px);
    float: left;
}

.responsive-default tr:first-of-type td {
    font-weight: bold;
    font-size: 15px;
    background: #0096d7;
    color: white;
    min-width: 85px;
}
.responsive-default tr td {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    vertical-align: middle;
}
.responsive-default tr {
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}


/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
 /* a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }*/
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}
/* distributor login */
.loginPanel table
{
    padding: 0 20px;
    width: 100%;
}


/*Customer area */


#customerDetails .informationFieldWrap {
  padding: 4px;
  margin-bottom: 2px;
  background-color: #F7F7F7;
  background-image: none;
}
#customerDetails .informationFieldWrap label{
  width: 115px;
  display: inline-block;
font-weight: bold;
}

#customerDetails .informationFieldWrap .value{
  width: 176px;
  display: inline-block;
}
#customerDetails .informationFieldWrap .value.comment{
height: 120px;
}
#customerDetails .informationFieldWrap #paymentInformationLeft{
  width: 460px;
  float: left;
}
#customerDetails .informationFieldWrap #paymentInformationRight{
  width: 460px;
  float: right;
}


table.customer-register
{
    background-color:#EBEBEB;
    width: 700px;
}
table.customer-register tr td
{
    padding-left: 15px;
}
table.customer-register input[type=submit]{margin: 0 210px 30px 0;}



































/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */