html {box-sizing: border-box;} *, *:before, *:after {box-sizing: inherit;} html,body{height: 100%;}html{overflow-x:hidden} body { display: flex; flex-direction: column;} div#wholepage { flex: 1 0 auto;} div#footer {flex-shrink: 1;} .clear, .clearb {clear:both} .clearl {clear:left} .clearr {clear:right} .content{max-width:920px;margin:auto} .content-sliderwide{max-width:926px;margin:auto} #page, .page {padding:0 12px; } @media (min-width:601px){#page, .page {padding:12px;}} ul, ol {margin:12px 0 12px 50px;text-align:left;line-height: 1.4em} ul, ol h2, ul, ol h3, ul, ol h1 {line-height:normal} @media (max-width:601px){ul, ol {margin:12px 0 12px 14px;text-align:left;}} ul li {list-style:square;padding:3px 3px 9px 3px;} ol li {padding:3px 3px 9px 3px;} .bar-block .dropdown-hover,.bar-block .dropdown-click{width:100%} .bar-block .dropdown-hover .dropdown-content,.bar-block .dropdown-click .dropdown-content{min-width:100%} .bar-block .dropdown-hover .button,.bar-block .dropdown-click .button{width:100%;text-align:left;padding:8px 16px} .main,#main{transition:margin-left .4s} .tablew {display:table} .table {width: 100%; display: flex; flex-wrap: wrap;} .column {flex-direction: column} .table-cell {width:100%} @media (min-width: 601px) {.table-cell {flex:1} } .tablewide { display: flex; justify-content: space-around; flex-flow: wrap; align-items: stretch;} .cellthird {flex-grow:1;flex:1;margin:5px} .celltwothirds {flex-grow:2;flex:2;margin:5px} @media (max-width: 801px) {.tablewide {display:inline-block}} .filetypeslg {padding:6px 0; margin:0 0 12px 0;} .filetypeslg div {float:left;margin:2px 2px 2px 0; white-space: nowrap;width:30px;} @media (min-width:751px){.filetypeslg div{width:7em; ;margin:2px 30px 2px 0;}} @media (max-width:750px){.filetypeslg div span{display:none; width:0;height:0;opacity:0;visibility: collapse}} .tablecol {display: flex; flex-direction: column;} .tablecol p { flex: 1 0 auto;} /*.tablecolumns { display: flex; align-items: center; justify-content: center; flex-flow: column wrap; align-content: start; }*/ .tablecell {width:100%} @media (min-width: 601px) {.tablecell {display: flex; }} .display-container:hover .display-hover{display:block}.display-container:hover span.display-hover{display:inline-block}.display-hover{display:none} .tooltip,.display-container{position:relative}.tooltip .text{display:none}.tooltip:hover .text{display:inline-block} .container:after,.container:before,.panel:after,.panel:before,.row:after,.row:before,.row-padding:after,.row-padding:before, .cell-row:before,.cell-row:after,.clear:after,.clear:before,.bar:before,.bar:after{content:"";display:table;clear:both} .row-padding,.row-padding>.half,.row-padding>.third,.row-padding>.twothird,.row-padding>.threequarter,.row-padding>.quarter,.row-padding>.col{padding:0 8px} /*.container,*/.panel{padding:0.01em 16px}.panel{margin-top:16px;margin-bottom:16px} .image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit} .col,.half, .half700,.third, .third700, .twothird,.threequarter,.quarter, .twofifth, .threefifth, .fifth, .fourfifth, .bigvideo {float:left;width:100%} .fifthcntr {width:100%; margin:auto;} .halfright,.thirdright,.quarterright {float:right;width:100%} @media (min-width:601px){.col.m1{width:8.33333%}.col.m2 {width:16.66666%} .fifth, .fifthcntr{width:20%} .col.m3,.quarter{width:24.99999%}.col.m4,.third,.thirdright{width:33.33333%} .col.m5{width:41.66666%}.col.m6,.half,.halfright {width:49.99999%}.col.m7{width:58.33333%}.col.m8,.twothird {width:66.66666%}.twothirdwide{width:70%} .twofifth {width:39.99999%}.threefifth {width:59.99999%} .fourfifth{width:79.99999%} .col.m9,.threequarter,.quarterright{width:74.99999%}.col.m10{width:83.33333%}.col.m11{width:91.66666%}.col.m12{width:99.99999%} .bigvideo {max-width:670px; float:none; margin:auto}} #footermain .footquart {width:24.99999%;float:left;} @media (max-width: 920px) and (min-width: 501px){ #footermain .footquart {width:49.99999%;float:left; border-bottom:1px solid #aaa;}} @media (max-width: 500px) { #footermain .footquart {width:100%;border-bottom:1px solid #aaa;}} @media (min-width:701px){ .half700 {width:49.99999%} .third700 {width:33.33333%}} @media (min-width:993px){.col.l1{width:8.33333%}.col.l2{width:16.66666%}.col.l3{width:24.99999%}.col.l4{width:33.33333%} .col.l5{width:41.66666%}.col.l6{width:49.99999%}.col.l7{width:58.33333%}.col.l8{width:66.66666%} .col.l9{width:74.99999%}.col.l10{width:83.33333%}.col.l11{width:91.66666%}.col.l12{width:99.99999%}} .top100 {margin-top:100px!important;} .top75 {margin-top:75px!important;} .top50, .top50w {margin-top:50px!important;} .top25, .top25w {margin-top:25px/*!important;*/} @media (max-width:601px){.top25w,.top50w {margin-top:0!important;}} .topbot25 {margin-top:25px!important;margin-bottom:25px!important;} .topbot50 {margin-top:50px!important;margin-bottom:50px!important;} .top20 {margin-top:20px!important;} .top15 {margin-top:15px!important;} .top10 {margin-top:10px!important;} .bottom100 {margin-bottom:100px!important;} .bottom75 {margin-bottom:75px!important;} .bottom50 {margin-bottom:50px!important;} .bottom25 {margin-bottom:25px/*!important;*/} .bottom20 {margin-bottom:20px!important;} .bottom10 {margin-bottom:10px!important;} .right75 {margin-right:75px;} @media (max-width:601px){.right75 {margin-right:0;}} .right50 {margin-right:50px;} .right30 {margin-right:30px;} .right20 {margin-right:20px;} .right10 {margin-right:10px;} .left100 {margin-left:100px;} .left30 {margin-left:30px;} .left25 {margin-left:25px;} .left20 {margin-left:20px;} .left10 {margin-left:10px;} @media (max-width:601px){.left10, .left100 {margin-left:0;}} .rightp50 {padding-right:50px;} @media (max-width:601px){.rightp50 {padding-right:0;}} .rightp30 {padding-right:30px;} .rightp20 {padding-right:20px;} .rightp10 {padding-right:10px;} @media (max-width:601px){.rightp10 {padding-right:0;}} .leftp50 {padding-left:50px;} @media (max-width:601px){.leftp50 {padding-left:0;}} .leftp30 {padding-left:30px;} .leftp20 {padding-left:20px;} .leftp10 {padding-left:10px;} .sides20w {margin-left:20px;margin-right: 20px} .sides30w {margin-left:30px;margin-right: 30px} .sides40w {margin-left:40px;margin-right: 40px} @media (max-width: 920px) and (min-width: 601px){.sides20w {margin-left:10px;margin-right:10px}} @media (max-width:600px){.sides20w {margin-left:0;margin-right: 0}} .padding20 {padding:20px;} .acentre, .acenter {text-align:center} .aleft{text-align:left!important} .aright{text-align:right!important} .arightwide{text-align:left!important;} .arightwidec {text-align:center!important;} @media (min-width:601px){.arightwide, .arightwidec {text-align:right!important}} .aleftwidec {text-align:center!important;} @media (min-width:921px){.aleftwidec {text-align:left!important}} .avmiddle {vertical-align:middle} .left {float:left; margin-right:10px;} .leftw {float:none;margin-left:0; clear:both; } @media (min-width:601px){.leftw {float:left;margin-right:10px;}} .right {float:right;margin-left:10px;} .rightw {float:none;margin-left:0; clear:both} @media (min-width:601px){.rightw {float:right;margin-left:10px;}} #tabs, #tabsodr { display: flex; flex-wrap: wrap;} #tabs label, #tabsodr label { display: block; padding: 0.8rem 1rem; margin-right: 0.2rem; cursor: pointer; } #tabs .tab, #tabsodr .tab { flex-grow: 1; width: 100%;display: none; padding: 1.5rem; background: #fff;} #tabs input[type="radio"] { position: absolute;opacity: 0;} #tabsodr input[type="radio"] { position: absolute;opacity: 0;} #tabs input[type="radio"]:checked + label { background: #fff;border-bottom: 1px solid #fff; } #tabsodr input[type="radio"]:checked + label { background: #fff;border-bottom: 1px solid #fff; } @media (max-width: 45em) { #tabs input[type="radio"]:checked + label, #tabsodr input[type="radio"]:checked + label { background: #E8E8E8 url(../images/icons/minus.png) no-repeat right; border-bottom: 1px solid #fff; color:#002b6d; } } #tabs input[type="radio"]:checked + label + .tab, #tabsodr input[type="radio"]:checked + label + .tab { display: block; } @media (max-width: 45em) { #tabs label, #tabsodr label { width: 100%; margin-right: 0; margin-top: 0.2rem;} #tabsodr .twothird, #tabsodr .third {width:100%;} } @media (min-width: 45em) { #tabs .tab, #tabsodr .tab { order: 99; } } .brwrap br {display:none;} @media (min-width:601px){.brwrap br {display:inline}} @media (max-width:600px){.hiddensmall {display:none; width:0;height:0;opacity:0;visibility: collapse;}} .hiddenlarge, .hiddenlarge700 {display:inline;opacity:1;visibility: visible} @media (min-width:601px){.hiddenlarge {display:none;width:0;height:0;opacity:0;visibility: collapse;}} @media (min-width:701px){.hiddenlarge700 {display:none;width:0;height:0;opacity:0;visibility: collapse;}} .hiddensmall {display:inline;opacity:1;visibility: visible} @media (max-width:601px){.hiddensmall {display:none;width:0;height:0;opacity:0;visibility: collapse;}} .hiddenlargetb {display:inline;opacity:1;visibility: visible} @media (min-width:45em){.hiddenlargetb {display:none;width:0;height:0;opacity:0;visibility: collapse;}} .nowrap {white-space: nowrap} .gapleft {margin-left:0} @media (min-width:601px){.gapleft {margin-left:15px}} .gapright {margin-right:0} @media (min-width:601px){.gapright{margin-right:15px}} .gapleftlrg {margin-left:0; } @media (min-width:601px){.gapleftlrg {margin-left:25px;}} .gaprightlrg {padding-right:0; border:0;} @media (min-width:601px){.gaprightlrg{padding-right:25px; border-right:1px solid #e6e6e6;}} .margin0 {margin:0 !important; padding:0 !important;} .blockq {margin-left: 40px;} .lightbox {position: fixed; display:flex;flex-direction: column;align-items: center;justify-content: center;z-index: 999;width: 100%;height: 100%;text-align: center;top: 0;left: 0;background: rgba(0,0,0,0.8);} .lightbox img { max-width: 90%;max-height: 80%; border-radius:8px} .lightbox p {color: #fff;} .lb {cursor: zoom-in;} @media only screen and (min-width: 600px) { .lb {background-color:inherit;} } @media only screen and (min-width: 920px) { .imgsml {max-width:225px;} } .videolrg {width:100%; margin:auto; height:300px;} @media only screen and (min-width: 600px) {.videolrg{max-width:670px; height:377px}} .storyquote {padding:1em; font-weight: bold; margin:2em 0; background: #0f71b8; color:#fff} .read-more-state {display: none; } .read-more-target img.storysymbol {width:0;} .read-more-target {opacity: 0;max-height: 0; font-size: 0; transition: .25s ease; overflow:hidden; } .read-more-state:checked ~ .read-more-wrap .read-more-target {opacity: 1;font-size: inherit;max-height: 999em;} .read-more-state:checked ~ .read-more-wrap .read-more-target img.storysymbol {width:100%; margin-bottom:25px;} .read-more-state ~ .read-more-trigger:before {content: 'Show more';} .read-more-state:checked ~ .read-more-trigger:before { content: 'Show less';} .read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .5em; color: #fff; font-size: 18px; line-height: 2; border: 1px solid #ddd; border-radius: 8px; background: #e56220;text-shadow: -1px 1px 0 #c3531b, 1px 1px 0 #c3531b, 1px -1px 0 #c3531b, -1px -1px 0 #c3531b;} @media print {.read-more-target {opacity: 1;font-size: inherit;max-height: 999em;}.read-more-trigger{display: none; }} .boxstory { margin:auto;width:100%;} @media (min-width:701px){.boxstory {width:80%;}} div.hmlinks { display: flex;flex-wrap: wrap;} div.hmitem2, div.hmitem3, div.hmitem4 {display: flex; padding: 0;width: 100%;} @media (min-width:701px){div.hmitem3 {width: 33.333%; flex-basis: 33.333%;}} @media (min-width:601px){div.hmitem2 {width: 50%; flex-basis: 50%;}} @media (max-width: 920px) and (min-width: 600px){div.hmitem4 {width: 45%; flex-basis: 45%;}} @media (min-width:921px){div.hmitem4 {width: 23%; flex-basis: 23%;}} @media print {div.hmitem3 {width: 50%; flex-basis: 50%;}} .hmcontent {display: flex;flex-direction: column;padding: 0 1em; width: 100%;} .hmcontent p {flex: 1 0 auto;} .heightx2 {line-height: 2.55em} .width150 {min-width:150px !important} .width200 {width:200px !important} .width300 {width:300px !important} .marginauto {margin-left:auto !important;margin-right:auto !important} #aboutSymbolsVideo { width: 100%; max-width: 833px; } .homepage-symboliser { width:100%; } #login-ed a { min-width:8em; text-align:right } #view_cart-ed svg { cursor:pointer; } #view_cart-ed { position:relative; }