﻿/* = Reset
----------------------------------------------------------------------------------------------------------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, hr, a, a img, font, img, dd, dl, dt, li, ol, ul, blockquote, fieldset, form, label, legend, table, caption, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; }

/* = HTML5 Elements
----------------------------------------------------------------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/* = Body
----------------------------------------------------------------------------------------------------------------- */
body { text-align: center; background: #fff; color: #282828; font-size: 0.9em; font-family: 'Lato', Tahoma, Verdana, Segoe, sans-serif; }

/* = Text-Level
----------------------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 10px 0; color: #149973; font-weight: 700; }
h1 { font-size: 2.57em; font-weight: 400; margin: 0 0 25px; padding-bottom: 15px; border-bottom: solid 1px #dbdbdb; }
h2 { font-size: 2.2em; font-weight: 400; margin: 0 0 20px; }
h3 { font-size: 1.14em; color: #0a0a0a; margin-bottom: 10px; }
h4, h5, h6 { font-size: 1.14em; }

p { margin: 0 0 20px 0; line-height: 1.5em; }
p.tight { margin-bottom: 10px; }
p.leader { font-size: 1.2em; margin-bottom: 20px; }

blockquote { margin: 0 0 20px; background: url(/_img/quote-open.gif) no-repeat left top; color: #555; font-weight: 300; font-style: italic; font-size: 1.6em; text-indent: 30px; }
blockquote p { margin: 0 0 5px; font-size: 1.35em; color: #149973; font-style: italic; text-indent: 25px; }
blockquote cite { font-style: normal; font-weight: bold; }

img { vertical-align: bottom; }

hr { border: 0; height: 1px; line-height: 1px; margin: 20px 0; background: #dbdbdb; }

pre { margin: 0 0 20px 0; }
code { font-family: Monospace; font-size: 1.5em; }
.sml { font-size: 0.95em; }
.justify { text-align: justify; }

/* = Links
----------------------------------------------------------------------------------------------------------------- */
a { color: #149973; text-decoration: none; }
a:hover { color: #e47615; }
a.alt { color: #a4cb58; }
a.alt:hover { color: #e47615; }

.colsInit a { color: #fff; }

.blockLink { display: block; }

.chunkyLink { background: #96c65b; color: #fff; padding: 15px; font-size: 1.3em; }
.chunkyLink:hover, .chunkyLinkAlt { background: #e47615; color: #fff; }
.chunkyLinkAlt:hover { background: #96c65b; }

/* = Lists
----------------------------------------------------------------------------------------------------------------- */
ul { margin: 10px 0 30px 15px; list-style: none; list-style-image: url(/_img/bullet.gif); }
ul li { margin: 10px 0; }

ol { margin: 10px 0 30px 19px; list-style-type: decimal; }
ol li { margin: 10px 0; }
ol li ol { list-style-type: lower-latin; }

dl { margin: 0 0 10px 0; }
dt { font-weight: bold; margin: 10px 0; color: #111; }
dd { text-indent: 15px; }

.memberList { margin-left: 0; list-style-image: none; }
.memberList li { border-bottom: solid 1px #dbdbdb; margin: 0; }
.memberList a { display: block; padding: 10px 0; position: relative; color: #282828; }
.memberList a span { position: absolute; right: 0; color: #149973; }
.memberList a:hover { color: #e47615; background: #f1f1f1; }

.alpha { margin: 0; list-style: none; }
.alpha li { display: inline; }
.alpha a { display: inline-block; border: solid 1px #dadada; margin: 0 2px 5px 0; padding: 5px 0; width: 30px; text-align: center; }
.alpha a:hover,
.alpha a.on { background: #149973; color: #fff; }

.keyChart { margin: 0; list-style: none; position: absolute; top: 213px; right: 15px; z-index: 9999; }
.keyChart li { margin: 0; padding: 8px 10px 8px 30px; color: #fff; cursor: pointer; }
.keyChart li.title { padding: 8px 10px; color: #282828; text-align: center; font-weight: bold; background: #fff; }
.keyChart li.hybrid { background: #c63535 url(/_img/map/hybrid.png) no-repeat 7px center; }
.keyChart li.battery { background: #fcbe00 url(/_img/map/ev.png) no-repeat 7px center; }
.keyChart li.biomethane { background: #1a9e77 url(/_img/map/biomethane.png) no-repeat 7px center; }
.keyChart li.demonstration { background: #0a2359 url(/_img/map/demonstration.png) no-repeat 7px center; }
.keyChart li.microhybrid { background: #800080 url(/_img/map/microhybrid.png) no-repeat 7px center; }
.keyChart li.flywheel { background: #a5cc57 url(/_img/map/flywheel.png) no-repeat 7px center; }
.keyChart li.hydrogen { background: #00b0f0 url(/_img/map/hydrogen.png) no-repeat 7px center; }
.keyChart li.pluginhybrid { background: #e9521d url(/_img/map/plug-in-hybrid.png) no-repeat 7px center; }
.keyChart li.biodiesel { background: #076298 url(/_img/map/biodiesel.png) no-repeat 7px center; }

.keyChart li.confirmed { background: #149973 url(/_img/map/confirmed.png) no-repeat 7px center; ; }
.keyChart li.potential { background: #d36c37 url(/_img/map/potential.png) no-repeat 7px center; ; }

.nojs .keyChart { display: none; }

/* = Figures
----------------------------------------------------------------------------------------------------------------- */
figure { width: 50%; margin: 0; }

.zoneTwo figure { width: 100%; }
.zoneTwo figure p { text-align: center; }

figure img { max-width: 100%; }
figcaption { font-weight: bold; padding-top: 10px; }
.figLeft { float: left; margin-right: 20px; }
.figRight { float: right; margin-left: 20px; }

/* = Tables
----------------------------------------------------------------------------------------------------------------- */
table { border-collapse: collapse; margin: 0 0 30px 0; width: 100%; }
th { background: #149973; border: 1px solid #149973; padding: 10px; color: #fff; }
td { background: #fff; border: 1px solid #ddd; padding: 10px; }
tfoot td, .subHead th { background: #f1f1f1; border: 1px solid #ddd; color: #282828; }
caption { text-align: left; caption-side: bottom; font-weight: bold; padding-top: 10px; }

/* = Forms
----------------------------------------------------------------------------------------------------------------- */
.webForm div { margin: 0 0 20px 0; }
.webForm div em { display: block; margin-left: 25%; margin-top: 10px; color: #999; }

label { float: left; width: 25%; padding: 10px 0; }
input.text, textarea, select { margin: 0; font-family: 'Lato', Tahoma, Verdana, Segoe, sans-serif; background: #f1f1f1; border: 1px solid #ddd; width: 70%; padding: 7px; -moz-box-sizing: border-box; box-sizing: border-box; }
.chk input { margin: 10px 0; }

.readonly input.text { background: #fff; border: 1px solid #fff; }
.readonly select { background: #fff; border: 1px solid #fff; }

.mod input.text { background: #fff; }

.simpleForm label { float: none; display: block; width: auto; }
.simpleForm .text, .simpleForm select { margin-bottom: 5px; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; }

.signupForm { margin: 0; padding: 0 0 30px; }
.signupForm label { float: none; display: block; width: auto; }
.signupForm .text { width: 25%; margin-right: 10px; -moz-box-sizing: border-box; box-sizing: border-box; }

.newsletterTitle { font-size: 1.6em; }

.searchForm div { margin-bottom: 0px; }
.searchForm .btn { margin-top: 10px; }

.survey .quest { margin: 0 0 20px 0; }
.survey .num { display: none; }
.survey .label { float: left; width: 30%; }
.survey .txt { margin: 0; background: #fff; border: 1px solid #ddd; width: 65%; padding: 7px; -moz-box-sizing: border-box; box-sizing: border-box; }
.survey .txtFull { width: 95%; }
.survey textarea.txt { font-family: Arial; font-size: 12px; }
.survey .extend { margin-bottom: 10px; }
.survey .txtDay { width: 10%; }
.survey .txtMonth { width: 10%; }
.survey .txtYear { width: 15%; }

.survey .radList { float: left; width: 65%; }
.survey .radList label { width: 44%; padding: 3px 0; }
.survey .radList input { float: left; }

.survey .checkList { float: left; width: 65%; }
.survey .checkList label { width: 45%; padding: 3px 0; }
.survey .checkList input { float: left; }
.survey .checkList br { display: none; }

.survey .questType1, .survey .questType2 { zoom: 1; }
.survey .questType1:after, .survey .questType2:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }

.applyForm { background: #f1f1f1; padding: 0 10px 10px; }
.applyForm .questType8 { clear: both; margin: 0 -10px 0 -10px; border-top: solid 20px #fff; }
.applyForm .questType8 h2 { background-color: #149973; color: #fff; padding: 10px; margin: 0 0 20px 0; }

.applyForm h2 { font-size: 1.6em; }

/*Membership form adjustments for newer version commented out for now */
.applyForm .lbl31, .applyForm .lbl32, .applyForm .lbl33 { width: 50%; }
.applyForm .lbl88 { width: 70%; }
.applyForm .compBtn { margin: 10px 0 10px 0; padding: 20px; }
.applyForm select { background: #fff; }
.applyForm .questType5 { font-size: 1.14em; color: #0a0a0a; margin: 10px 0; margin-bottom: 10px; font-weight: 700; }
.applyForm .lbl25 { font-size: 1.14em; color: #0a0a0a; font-weight: 700; }
.applyForm.survey .txt { width: 70%; }
.applyForm .lbl20, .applyForm .lbl88, .applyForm .lbl90, .applyForm .lbl92, .applyForm .lbl94 { /*display: none;*/ }
.applyForm.survey .radList.ipt100, .applyForm.survey .radList.ipt120,
.applyForm.survey .radList.ipt140, .applyForm.survey .radList.ipt160,
.applyForm.survey .radList.ipt180 { /* width: 70%; margin-left: 30%; */ }
.applyForm.survey .radList.ipt100 label, .applyForm.survey .radList.ipt120 label,
.applyForm.survey .radList.ipt140 label, .applyForm.survey .radList.ipt160 label,
.applyForm.survey .radList.ipt180 label, .applyForm.survey .radList.ipt250 label, .applyForm.survey .radList.ipt270 label { /*width: 80%;*/ width: 46%; }
.applyForm.survey .questType6 textarea { min-height: 120px; }
.applyForm.survey .radList label { width: 46%; }
.applyForm.survey .radList { width: 100%; }
.applyForm.survey .radList input { margin: 5px 5px 0px 2px; }
.applyForm.survey .extendipt100, .applyForm.survey .extendipt120, .applyForm.survey .extendipt140,
.applyForm.survey .extendipt160, .applyForm.survey .extendipt180 { /*margin-left: 30%;*/ }

@media screen and (max-width: 1040px) {
    .colsHalf label, .colsHalf input.text, .colsHalf textarea, select, .colsHalf .signupForm .text, .colsHalf .survey .label, .colsHalf .survey .txt { float: none; width: 100%;}
}

@media screen and (max-width: 540px) {
    label, input.text, textarea, select, .signupForm .text, .survey .label, .survey .txt { float: none; width: 100%;}
    .applyForm.survey .label { width: 100%; margin-bottom: 4px; }
    .applyForm.survey .txt { width: 100%; }
    .applyForm select { width: 100%; }
    .applyForm.survey .radList.ipt100, .applyForm.survey .radList.ipt120, .applyForm.survey .radList.ipt140, .applyForm.survey .radList.ipt160, .applyForm.survey .radList.ipt180,
    .applyForm.survey .extendipt100, .applyForm.survey .extendipt120, .applyForm.survey .extendipt140, .applyForm.survey .extendipt160, .applyForm.survey .extendipt180 { margin: 0; width: 100%; }
    .applyForm.survey .radList input { margin: 12px 0 8px; width: 6%; }
    .applyForm.survey .radList label { width: 94%; margin: 10px 0; padding: 0; }
}

/* Oomi register
----------------------------------------------------------------------------------------------------------------- */
.registerForm h2 { margin: 48px 0 20px; font-size: 2.05em; line-height: normal; }
.registerForm label { width: 30%; }
.registerForm .catControl ul li { font-size: 1em; }
.registerForm .catControl ul li div.cat { margin-bottom: 10px; }

.registerForm .catControl ul li div.cat label { padding: 0; margin: 1px 0 0 5px; float: none; display: inline-block; vertical-align: top; }
.registerForm .catControl ul li div.cat input { float: none; display: inline-block; margin: 0; vertical-align: middle; }
.registerForm .commitmentsCheckboxes input { margin: 5px 8px 0 0; float: left; }
.registerForm .furtherContact { margin: 30px 0 20px; }
.registerForm .infoNewApplicant textarea { width: 100%; min-height: 200px; }
.registerForm .howHearAbout select { width:100%; }
.registerForm .btn { font-size: 1.2em; margin-top:10px; padding: 14px 24px; }


/* Competition & Polls & Quizzes
----------------------------------------------------------------------------------------------------------------- */
.pollZone .survey .questType1 span.label, .survey .questType2 span.label { float: left; width: 100%; margin-bottom: 5px; font-size: 1.14em; color: #0a0a0a; margin: 10px 0; margin-bottom: 10px; font-weight: 700; }
.pollZone .survey .questType3 span.label { float: left; margin-right: 10px; }
.pollZone .survey input, .survey label { width: auto; }
.pollZone .survey .radList input, .survey .checkList input { clear: both; float: left; margin-right: 5px; margin-left: 0; }
.pollZone .survey span.num { display: none; }
.pollZone .survey input.txt { width: 100px; color: #666; }

.pollZone .survey { margin-bottom: 20px; }
.pollZone .survey label { width: auto; float: left; }
.pollZone .survey p { margin: 0; }
.pollZone .survey img { vertical-align: middle; border: 1px solid #84b6d0; outline: 1px solid #fff; }
.pollZone .survey .perResult { margin-bottom: 5px; }

/* Poll listing styles */
.colsThird.colsPolls .col { margin-right: 0; width: 100%; }
.colsPolls .mod { margin-bottom: 15px; }
.colsPolls h3 { margin-top: 0; padding-bottom: 10px; border-bottom: solid 1px #ddd; font-size: 1.05em; }
.colsPolls .result p { margin: 0; }
.colsPolls .result .perResult { margin: 0 0 15px; }

/* = Tabs
----------------------------------------------------------------------------------------------------------------- */
.uiTabsWrap { margin-bottom: 25px; }

.uiTabs { margin: 0; list-style: none; }
.uiTabs ul { margin: 0; list-style: none; }
.uiTabs ul li { float: left; margin: 0 5px 15px 0; }
.uiTabs ul li.lbl { padding: 8px 10px 8px 0; font-weight: bold; }
.uiTabs a { float: left; padding: 8px 10px; background: #c7e1ef; color: #475D66; }
.uiTabs .on a { background: #84b6d0; color: #fff; }
.uiTabs a:hover { background: #5188a5; color: #fff; text-decoration: none; }

.uiTabsSplit li { width: 50%; }
.uiTabsSplit a { width: 100%; padding: 10px 0; text-align: center; }

/* = Buttons
----------------------------------------------------------------------------------------------------------------- */
.btn, .compBtn { display: inline-block; font-weight: bold; font-family: 'Lato', Tahoma, Verdana, Segoe, sans-serif; background: #149973; padding: 10px; color: #fff; border: 0; margin: 0; font-size: 1em; line-height: 1em; cursor: pointer; }
.btn:hover { background: #e37715; color: #fff; }
.g-recaptcha, .compBtn { margin-left: 30%; }
#home .compBtn { margin-left: 0; }
.btnMini { padding: 5px; }
.btnBig { padding: 15px; }
.btnLargeFont { font-size: 1.2em; }

.btnImpact, .btnActive { background: #e37715; color: #fff; }
.btnImpact:hover, .btnActive:hover { background: #f4a053; color: #fff; }

.btnDownload,
.btnDownload:hover { margin-top: 10px; padding-left: 23px; background-image: url('/_img/icons/resources.png'); background-repeat: no-repeat; background-position: 5px center; }

.zoneHero .btn { background: #96c65b; font-size: 1.3em; }
.zoneHero .btn:hover { background: #e47615; }

@media screen and (max-width: 1040px) {
    .colsHalf .g-recaptcha, .colsHalf .compBtn { margin-left: 0; }
}

@media screen and (max-width: 540px) {
    .g-recaptcha, .compBtn { margin-left: 0; }
}

/* = Content Modules
----------------------------------------------------------------------------------------------------------------- */
.mod { margin: 0 0 20px; padding: 0; }
.modTitle { margin-top: 0; }

.modStandout { color: #fff; }
.modStandout .modTitle, .modStandout a { color: #555; font-weight: 300; font-style: italic; }

.modCallout { font-size: 1.8em; padding: 0; }
.modCallout p { margin: 0; line-height: 1.1em; }
.modCallout .shout { color: #149973; }
.modCallout small { display: block; padding-top: 15px; font-size: 0.7em; }
.modCallout a:hover .shout { color: #E37715; }

.modPlain { padding: 0; background: none; border: 0; margin-bottom: 30px; }

.modBox { text-align: center; margin: 0 0 30px; padding: 20px 0 0; border: 1px solid #dbdbdb; }

.modSpeaker { min-height: 138px; margin: 0 0 10px; color: #fff; background-color: #149973; }
.modSpeaker img { float: left; }
.modSpeaker h3 { color: #fff; margin: 0 5px 10px 135px; padding: 10px 0 0; }
.modSpeaker p { margin: 0 5px 0 135px; }
.modSpeakerRight img { float: right; }
.modSpeakerRight h3 { margin: 0 135px 10px 5px; }
.modSpeakerRight p { margin: 0 135px 0 5px; }

.blockTitle { background: #0a2359; color: #fff; padding: 20px; height: 75px; font-size: 1.3em; }
.blockTitle span { display: block; }
.titleBus { background: #0a2359 url(/_img/bg-bus.gif) no-repeat right bottom; }
.titleBus span { width: 110px; }
.titleFuels { background: #0a2359 url(/_img/bg-fuels.gif) no-repeat right bottom; }
.titleFuels span { width: 130px; }
.titleCar { background: #0a2359 url(/_img/bg-car.gif) no-repeat right bottom; }
.titleCar span { width: 170px; }
.titleJoint { background: #0a2359 url(/_img/bg-joint.gif?1) no-repeat right bottom; }
.titleJoint span { width: 170px; }

h2.blockTitle a { color: #fff; }

.titleInnovation { background: #0a2359 url(/_img/bg-bulb.gif) no-repeat right bottom; }
.titleInnovation span { width: 200px; }
.titleCommercial { background: #0a2359 url(/_img/bg-truck.gif) no-repeat right bottom; }
.titleCommercial span { width: 160px; }

.zoneTwo .mod { margin: 0 0 30px 0; }

.sponsorBox { margin-bottom: 20px; }
.sponsorBox img { padding: 0 20px 20px; max-width: 90%; height: auto; }

@media screen and (max-width: 1240px) {
    .modSpeaker img { float: none; }
    .modSpeaker h3 { margin: 0 5px 10px 5px; }
    .modSpeaker p { margin: 0 5px 0 5px; }
    .modSpeakerRight h3 { margin: 0 5px 10px 5px; }
    .modSpeakerRight p { margin: 0 5px 0 5px; }
}

@media screen and (max-width: 900px) {
    .modSpeaker img { float: left; height: 138px; }
    .modSpeaker h3 { margin: 0 5px 10px 135px; }
    .modSpeaker p { margin: 0 5px 0 135px; }
    .modSpeakerRight img { float: right; }
    .modSpeakerRight h3 { margin: 0 135px 10px 5px; }
    .modSpeakerRight p { margin: 0 135px 0 5px; }
}

/* = Content Splits
----------------------------------------------------------------------------------------------------------------- */
.colsHeroSub .endCol h2, .colsHeroSub .endCol img { display: none; }
.coverImg { height: auto; }
.colsResources .col .coverImg, .colsHomeMid .coverImg { display: none; }
.colsInit .coverImg { float: left; margin-right: 20px; max-width: 35%; }
.colsHomeMid .bannerZone img { margin-bottom: 0; }

.col { position: relative; }
.cols .endCol { margin-right: 0 !important; }

@media screen and (min-width: 485px) {
    .colsHeroSub .col { float: left; width: 62%; margin-right: 8%; }
    .colsHeroSub .endCol { width: 30%; }
    .colsHeroSub .endCol h2, .colsHeroSub .endCol img { display: block; }

    .colsHomeTop .col { margin-bottom: 20px; }
    .colsResources .col { float: left; width: 31%; margin-right: 3.5%; }
    .colsResources .col .coverImg, .colsHomeMid .coverImg { display: block; width: 100%; height: auto; }
    .colsHomeMidOne .col { float: left; width: 65%; margin-right: 4%; }
    .colsHomeMidOne .endCol { width: 31%; }
    .colsHomeMidTwo .col { float: left; width: 31%; margin-right: 4%; }
    .colsHomeMidTwo .endCol { width: 65%; }

    .colsHeroMem .colsHeroSub .col { float: left; width: 47%; margin-right: 5%; }
    .colsHeroMem .colsHeroSub .endCol { width: 47%; margin-right: 0; }

    .colEvents { width: 48%; float: left; margin-right: 4%; }
    .colResources { width: 48%; float: right; }
}

@media screen and (min-width: 800px) {
    .colsHero .col { width: 52%; float: left; margin-right: 3%; }
    .colsHero .midCol { width: 45%; margin-right: 0%; }
    .colsHero .endCol { width: 100%; }

    .colsHeroSub .col { width: 100%; margin: 0; }
    .colsHeroSub .endCol h2, .colsHeroSub .endCol .blurb, .colsHeroSub .endCol img { display: none; }

    .colsProjects .col { width: 23.5%; float: left; margin-right: 2%; }
    .colsProjects p { margin: 0; border: 5px solid #fff; }
    .colsProjects .coverImg { width: 100%; height: auto; max-width: 100%; float: none; margin-right: 0; display: block; }

    .colsInit .col { width: 18.4%; float: left; margin-right: 2%; }
    .colsInit p { margin: 0 0 10px; border: 5px solid #fff; }
    .colsInit .coverImg { width: 100%; height: auto; max-width: 100%; float: none; margin-right: 0; display: block; }

    .colNews ul { overflow: auto; }
    .colNews ul li { width: 31%; float: left; margin-right: 3%; }
    .colNews ul li img { width: 100%; max-width: 100%; }
    .colNews ul li span.lowcvp { display: none; }
    .colNews ul li:last-child { margin-right: 0; }

    .colsHalf .col { float: left; width: 48%; margin-right: 4%; }
    .colsThird .col { float: left; width: 32%; margin-right: 2%; }
    .colsFourth .col { float: left; width: 22%; margin-right: 4%; }
    .colsFifth .col { float: left; width: 16.8%; margin-right: 4%; }

    .colsTwoOne .col { float: left; width: 60%; margin-right: 2%; }
    .colsTwoOne .endCol { width: 38%; }

    .templateMem .colsOneTwo .col { float: left; width: 40%; margin-right: 2%; }
    .templateMem .colsOneTwo .endCol { width: 58%; }
}

@media screen and (min-width: 1010px) {
    .colsHeroSub .endCol h2, .colsHeroSub .endCol .blurb, .colsHeroSub .endCol img { display: block; }
    .colsHeroSub .col { float: left; width: 62%; }
    .colsHeroSub .endCol { float: right; width: 30%; }
    .colsHomeTop { padding-bottom: 20px; }
    .colsHomeTop .col { float: left; width: 48.5%; margin-right: 3%; }
    .colsResources .col { float: left; width: 31%; margin-right: 3.5%; }
    .colsHomeMid { padding-bottom: 20px; }
    .colsHomeMid .col { float: left; width: 48.5%; margin-right: 3%; }
    .colsHomeMidOne .col { float: left; width: 65%; margin-right: 4%; }
    .colsHomeMidOne .endCol { width: 31%; }
    .colsHomeMidTwo .col { float: left; width: 31%; margin-right: 4%; }
    .colsHomeMidTwo .endCol { width: 65%; }

    .colsHeroMem .colsHeroSub .col { float: left; width: 47%; margin-right: 5%; }
    .colsHeroMem .colsHeroSub .endCol { width: 47%; margin-right: 0; }

    .colsHero .col { width: 40.5%; float: left; margin-right: 3%; }
    .colsHero .midCol { width: 34%; margin-right: 1%; }
    .colsHero .endCol { width: 21.5%; }
}

/* = Screen Messages
----------------------------------------------------------------------------------------------------------------- */
.msg { border: solid 1px #149973; background: #00264d; color: #fff; padding: 20px 20px 0 20px; margin: 0 0 20px 0; text-align: left; }
.msgImp { background-color: #C2E1EE; border: 1px solid #8EC3D9; color: #475D66; }
.msgError { background-color: #FFDCDD; border: 1px solid #E9B9BB; color: #8D4345; }
.msgSuccess { background-color: #E1FFD9; border: 1px solid #BADEB1; color: #526D4B; }
.msgAssist { background-color: #FFF0BC; border: 1px solid #D3BC6F; color: #9E660D; }
.msgEssential { border: solid 1px #00264d; }
.msgNeutral { border: solid 1px #f1f1f1; background: #f1f1f1; color: #191919; }

.msg a { color: inherit; font-weight: bold; }
.msg h2 { color: #a5cc55; }
.msg h3 { margin-top: 0; }
.msg ul { margin-top: 0px; margin-bottom: 20px; }
.msg li { margin: 0 0 5px 0; }
.msg label { float: none; display: inline-block; width: 20%; padding: 0; clear: both; font-weight: bold; }
.msg .value { font-style: italic; }
.msg a { color: #a5cc55; }
.msgEssential p { font-size: 1.2em; }
.msgNeutral h2 { color: #1d9e75; }

/* = Toggles
----------------------------------------------------------------------------------------------------------------- */
.trigger { border: solid 1px #e1e1e1; border-width: 1px 0; padding: 15px 0; margin: 0 0 -1px 0; position: relative; }
.trigger span { position: absolute; right: 5px; font-weight: normal; color: #149973; padding-right: 17px; background: url(/_img/arrow-down.gif) no-repeat right 7px; font-size: 0.9em; }
.triggerReady { cursor: pointer; }
.triggerReady:hover { color: #e47615; }
.triggerActive { background: #f1f1f1; color: #e47615; }
.triggerContent { padding: 15px 0 30px 0; }
.triggerContent label { font-weight: bold; margin: 0; padding: 0; }
.triggerContent .itemRows { padding: 0; }
.triggerContent .itemRows .row { clear: both; padding: 5px 0; }

/* = Pagination
----------------------------------------------------------------------------------------------------------------- */
.paging ul { margin: 0 0 20px 0; list-style: none; }
.paging li { float: left; margin-right: 4px; }
.paging li.det { padding-right: 10px; }
.paging li a { display: inline-block; font-weight: bold; background: #149973; padding: 4px 11px; color: #fff; }
.paging a:hover, .paging a.on { background: #e37715; }

/* = Media Object (Extend freely but change with caution)
----------------------------------------------------------------------------------------------------------------- */
.medObjs { margin: 0; list-style-type: none; list-style-image: none; }
.medObj { margin: 0 0 20px 0; }
.medObjs li { margin: 0 0 20px 0; }
.medObj, .medObj .cont, .medObjs li, .medObjs li .cont { overflow: hidden; _overflow: visible; _zoom: 1; }
.medObj .thumb, .medObjs li .thumb { float: left; margin: 0 15px 0 0; max-width: 50%; position: relative; }
.medObj .thumb img, .medObjs li .thumb img { display: block; max-width: 100%; }
.medObj .cont h3, .medObj .cont h4, .medObjs li .cont h3, .medObjs li .cont h4 { margin: 0 0 3px 0; }
.medObjs li .cont p { margin: 0; }
.medObjs li .cont p small { display: inline-block; margin: 5px 0; font-size: 90%; }

/* Main list media obj extensions */
.listMain { padding-top: 15px; border-top: solid 1px #dbdbdb; }
.listMain .medObjs li { border-bottom: solid 1px #dbdbdb; padding-bottom: 15px; }

/* Member listing obj extensions */
.memListImg li .thumb { border: solid 1px #e0e0e0; padding: 10px; }

/*  */
.medObjs li.isMemOnly,
.medObjs li.isLowcvp { position: relative; padding-bottom: 2px; }
.medObjs li.isLowcvp small { font-size: 90%; margin: 5px 0; display: block; }

.medObjs li span.lowcvp,
.medObjs li span.memOnly,
.medObjs li span.webinar,
.medObjs li span.meeting { position: absolute; bottom: 0; right: 0; width: 53px; height: 26px; background: url('/_img/icons/lowcvp-event.svg') top right no-repeat; }
.medObjs li span.memOnly { width: 12px; height: 15px; background: url('/_img/icons/locked.png') top right no-repeat; position: relative; float: right; padding-left: 20px; top: 4px; }
.medObjs li span.webinar { bottom: 4px; width: 14px; height: 10px; background: url('/_img/icons/video.png') top right no-repeat; }
.medObjs li span.meeting { bottom: 4px; width: 12px; height: 13px; background: url('/_img/icons/meeting.png') top right no-repeat; }
.medObjs li.isMemOnly span.lowcvp { right: 0; }
.medObjsAlt li span.lowcvp,
.medObjsAlt li span.memOnly,
.medObjsAlt li span.webinar { bottom: auto; top: 0; }
.medObjsAlt li span.memOnly,
.medObjsAlt li span.webinar { bottom: auto; top: 2px; }
.listMain .medObjs li.isMemOnly,
.listMain .medObjs li.isLowcvp { padding-bottom: 15px; }
.colsHomeTop .colsResources .medObjs li.isMemOnly .cont,
.colsHomeTop .colsResources .medObjs li.isLowcvp .cont { padding-bottom: 15px; }

/* = Banners
----------------------------------------------------------------------------------------------------------------- */
.bannerZone img { /*max-width: 100%;*/ width: 100%; height: auto; padding-bottom: 20px; }
.colsHomeMid .bannerZone img { padding-bottom: 10px; }

/* = Embedded Content
----------------------------------------------------------------------------------------------------------------- */
.vidEmbed { position: relative; height: 0; padding-bottom: 56.25%; margin-bottom: 30px; }
.vidEmbed iframe,
.vidEmbed embed { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.embedded iframe,
.embedded img { width: 100%; height: auto; }

/* = Events
----------------------------------------------------------------------------------------------------------------- */
.events .noData { display: none; }
.events .mod { margin-bottom: 10px; }
.events .mod ul, .events .mod p { margin-bottom: 0; }
.scroll .prev { float: left; }
.scroll .next { float: right; }

/* = Member Directory
----------------------------------------------------------------------------------------------------------------- */
.directory { margin: 0; list-style: none; }
.directory li { float: left; background: #f4f4f4; width: 94%; margin: 0; height: auto; padding: 3%; margin-bottom: 3%; position: relative; }
.directory li:hover { background: #eee; }
.directory li h3 { font-size: 1em; margin: 0 0 5px 0; }
.directory li h3 a { color: #282828; }
.directory li h3 a:hover { color: #e47615; }
.directory li p { margin: 0; }


@media screen and (min-width: 485px) {
    .directory li { width: 26%; margin: 0 2% 2% 0; height: 250px; }
    .directory li:nth-child(3n+3) { margin-right: 0; }
}

@media screen and (min-width: 600px) {
    .directory li a.more { width: 98%; position: absolute; left: 13px; bottom: 13px; }
}


/* = Member View
----------------------------------------------------------------------------------------------------------------- */
.memberView .img { float: right; margin: 10px 0 0; }

/* = Helper Classes
----------------------------------------------------------------------------------------------------------------- */
.floatLeft { float: left; }
.floatRight { float: right; }
.textLeft { text-align: left; }
.textCenter { text-align: center; }
.textRight { text-align: right; }
.hide { display: none; }
.clr { clear: both; }
.alt { color: #e47615; }
.snugTop { margin-top: 0; }
.marginTop { margin-top: 30px; }
.marginBottom { margin-bottom: 30px; }
.center { text-align: center; }
.meta { border: solid 0px #ececec; background-color: #ececec; border-width: 1px 0; padding: 5px 10px; font-weight: bold; }
.plain { color: #282828; }
.outline { border: solid 1px #ddd; padding: 30px; }
.overflow { overflow: auto; }
.flush { margin: 0; }
.imageright { float: right; margin: 0 0 20px 20px; }
.imgResponsive { width: 100%; }

/* = Icons
----------------------------------------------------------------------------------------------------------------- */
.iconBlank { padding-left: 23px; }
.iconCalendar { font-size: 2.2em; }
.iconEvents { font-size: 2.2em; }
.iconJoin { background: url(/_img/icons/join.png) no-repeat left 5px; padding-left: 17px; }
.iconMember { background: url(/_img/icons/member.png) no-repeat 2px 6px; padding-left: 22px; }

.iconNew { background: url(/_img/icons/new.png) no-repeat left 4px; padding-left: 23px; }
.iconNews { background: url(/_img/icons/news.png) no-repeat left 6px; padding-left: 21px; }
.iconResources { font-size: 2.2em; }
.iconRSS { font-size: 2.2em; }
.iconSay { background: url(/_img/icons/say.png) no-repeat left 5px; padding-left: 19px; }
.iconVideo { background: url(/_img/icons/video.png) no-repeat left 7px; padding-left: 20px; }
.iconWorkingGroup { font-size: 2.2em; font-weight: 400; margin-bottom: 30px; }

.pdfLink { display: block; background: url(/_img/icons/pdf_icon.gif) no-repeat left center; padding: 3px 0 3px 30px; }
img.pdfLink { width: 20px; height: 20px; padding: 0; margin: 0 10px 0 0; }
.assetLink { display: block; background: url(/_img/icons/resources.png) no-repeat left center; padding: 3px 0 3px 30px; }
img.assetLink { width: 12px; height: 15px; padding: 0; margin: 0 10px 0 0; }
img.assetLinkLowCVP { width: 53px; height: 22px; padding: 0; margin: 0 10px 0 0; }
.locked { background-image: url(/_img/icons/locked.png); }

.spr20,
.spr20hover { width: 28px; height: 28px; line-height: 28px; background: url('/_img/icons/icons-20-colour.gif') top left no-repeat; }
.ico20_edit { background-position: -56px 0px; }
.ico20_date { background-position: -224px 0px; }
.ico20_date2 { background-position: -252px -56px; }
.ico20_true { background-position: -224px -84px; }
.ico20_false { background-position: -168px -140px; }
.ico20_delete { background-position: 0px -168px; }

/* = Clearing
----------------------------------------------------------------------------------------------------------------- */
.innerFrame, .mainContent, .baseNav ul, .cookie, .cols, .cols .col, .scroll, .paging ul, .directory, .tools, .featuredEvents, .listEvents, .listEvents li, .featuredAssets, .listResources li, .listResources, .filterBar, .membersblueBox, .zoneOne, .extraNewsLoggedIn .medObjs, .newForYou .medObjs, .galleryNavContain, .keywordsContain, .templateLowerCarbon .AQLogos ul { zoom: 1; }
.innerFrame:after, .mainContent:after, .baseNav ul:after, .cookie:after, .cols:after, .cols .col:after, .scroll:after, .paging ul:after, .directory:after, .quickLogin:after, .quickLogin .webForm:after, .tools:after, .cal:after, .itemTags:after, .featuredEvents:after, .listEvents:after, .listEvents li:after, .featuredAssets:after, .listResources li:after, listResources:after, .filterBar:after, .membersblueBox:after, .zoneOne:after, .extraNewsLoggedIn .medObjs:after, .newForYou .medObjs:after, .galleryNavContain:after, .keywordsContain:after, .templateLowerCarbon .AQLogos ul:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }
