/* CSS: implied media=all ========================================================================== Index: search by tag using the backtick prefix (`index) ========================================================================== `default Default styles `layout Site structure & framework `general General styles `typo typography `design Elements for designing a page `global Global Web Estate navigation `header Header elements `footer Footer elements `colours 'Branding Orange #CF4520, 'Branding grey #5B6770, (Heading bg's, design elements) 'Charcoal #222222, (Links and dark bgs) 'Defence dark grey #404040 (Fonts) 'Light grey #DDDDDD, (Borders) 'Lighter grey #F1F1F1 (Good for hovers) 'Super light grey #FAFAFA (Box bgs) `helper Useful common classes `media Media Queries `print Styles for print media `Reference links to technique references `draft properties that need revision `vendor Vendor-specific Properties should be moved to separate stylesheet body.responsive provides a quick way to remove responsive properties Style guide. ========================================================================== * Avoid using IDs where possible: http://oli.jp/2011/ids/#specifity-wars * CSS display: --- --- --- Section title --- selector, selector { property property vendor property property } --- */ /* =DWIC for changes Defence has made */ /* `reset `default ========================================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { margin: 0; padding: 0; border: 0; } html, body { width: 100%; height: 100%; font-size: 100%; } body { font-size: .9em; line-height: 1; color: #5B6770; background-color: #FAFAFA; /* -- background-image: url(../images/layout/LightDotMapGrid.jpg) -- */; background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-size: 100% auto; } /* ----- Font Families ----- */ /* =DWIC Google font included in reference include */ body { font-family: 'Roboto', Helvetica, Arial, sans-serif; } /* Turn off font for IE8 and below */ .lt-ie7 body, .lt-ie8 body, .lt-ie9 body {font-family: Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: Georgia, "Times New Roman", Times, serif; } /* ----- Basic Elements ----- */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /*ol,*/ ul { list-style: none; } img { vertical-align: middle; } textarea { resize: vertical; } /* ----- W3C AA Placeholder Text of white inputs `vendor ----- */ ::-webkit-input-placeholder { color:#222222; } :-moz-placeholder { color:#222222; } :-ms-input-placeholder { color:#222222; } /* ----- Fix for CSS3 Animations `vendor ----- */ div, .slide { -webkit-backface-visibility: hidden; } /* ----- Alternate backgrounds ----- */ /* body.bg2 { background-color: #5B6770; background-image: url(../images/layout/LightDotMapGrid.jpg); } body.bg3 { background-color: #5B6770; background-image: url(../images/layout/BGDark1.jpg); } body.bg4 { /*background-color: #5B6770; background-image: url(../images/layout/BGDarkGrid2.jpg);*/ /*background-color: #FAFAFA; background-image: url(../images/layout/LightDotMap.jpg); } body.bg5 { background-color: #FAFAFA; background-image: url(../images/layout/LightDotMap.jpg); } body.bg6 { background-color: #fff; background-image: url(../images/layout/BgDesertMapGrunge.jpg); } body.bg7 { background-color: #fff; background-image: url(../images/layout/BGLightGridInverted.jpg); } */ /* site structure & framework: `layout ==========================================================================*/ .wrapper { width: 961px; /*Default if media queries are not supported, +1px for ie7's lack of sub-pixel rendering*/ margin: 0 auto; display: block; z-index: 0; position: relative; } /* ----- Chrome Frame ----- */ .chromeframe { background: #CCC; color: #000; padding: 0.3em 0; text-align: center; } /* ----- Content Row ----- */ .contentRow { background-color: #FFFFFF; border-left: 1px solid #DDD; border-right: 1px solid #DDD; color: #404040; } .bgTrans { background-color: transparent; } .wrapper a, .contentRow a { color: #222; } .wrapper a:hover, .contentRow a:hover { color: #58595B; text-decoration:none; } /* ----- Grid Layout ----- */ .row { margin-bottom: 2%; } .row .row { margin-bottom: 0; } .col { display: block; float: left; margin-left: 2%; } .col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */ .span_1, .span_3_of_3, .span_4_of_4, .span_5_of_5 { margin-left: 0; width: 100%; } .span_1_of_5 { width: 18%; } .span_2_of_5 { width: 38%; } .span_3_of_5 { width: 58%; } .span_4_of_5 { width: 78%; } .span_1_of_4 { width: 23.5%; } .span_3_of_4 { width: 74.5%; } .span_2_of_4 { width: 49.0%; } .span_1_of_3 { width: 32.0%; } .span_2_of_3 { width: 66.0%; } /*Sub Level Layouts */ .span_2_of_4 .col { margin-left: 4.191458139947426%; } .span_2_of_4 .col:first-child { margin-left: 0; } .span_2_of_4 .span_1_of_4 { width: 21.85640639503943%; } .span_2_of_4 .span_2_of_4 { width: 47.90427093002629%; } .span_2_of_4 .span_3_of_4 { width: 73.95213546501314%; } .span_2_of_4 .span_1_of_3 { width: 30.53902790670172%; } .span_2_of_4 .span_2_of_3 { width: 65.26951395335086%; } .span_3_of_4 .col { margin-left: 2.729366670565565%; } .span_3_of_4 .col:first-child { margin-left: 0; } .span_3_of_4 .span_1_of_4 { width: 22.95297499707583%; } .span_3_of_4 .span_2_of_4 { width: 48.63531666471722%; } .span_3_of_4 .span_3_of_4 { width: 74.3176583323586%; } .span_3_of_4 .span_1_of_3 { width: 31.51375555295629%; } .span_3_of_4 .span_2_of_3 { width: 65.75687777647814%; } .span_2_of_3 .col { margin-left: 3.093681795535596%; } .span_2_of_3 .col:first-child { margin-left: 0; } .span_2_of_3 .span_1_of_4 { width: 22.6797386533483%; } .span_2_of_3 .span_2_of_4 { width: 48.4531591022322%; } .span_2_of_3 .span_3_of_4 { width: 74.2265795511161%; } .span_2_of_3 .span_1_of_3 { width: 31.27087880297627%; } .span_2_of_3 .span_2_of_3 { width: 65.63543940148813%; } .span_1_of_3 .col { margin-left: 3%; } .span_1_of_3 .col:first-child { margin-left: 0; } .span_1_of_3 .span_3_of_4 { width: 73.5%; } .span_1_of_3 .span_2_of_4 { width: 48.5%; } .span_1_of_3 .span_1_of_4 { width: 23.5%; } .span_1_of_3 .span_2_of_3 { width: 65.66666666666667%; } .span_1_of_3 .span_1_of_3 { width: 31.33333333333333%; } .col .span_1_of_5, .col .span_2_of_5, .col .span_3_of_5, .col .span_4_of_5, .col .span_5_of_5 { margin-left: 2%; } .col .span_1_of_5:first-child, .col .span_2_of_5:first-child, .col .span_3_of_5:first-child, .col .span_4_of_5:first-child, .col .span_5_of_5:first-child { margin-left: 0; } /* ----- Tabs ----- */ .tabbed { position: relative; } .tab, .content .tab { display: block; /*background-color: #5B6770; background-color: #FAFAFA; color: #5B6770;*/ height: 2em; line-height: 2em; margin-bottom: 0; text-decoration: none; position: relative; z-index: 1; border-right:1px solid #5B6770; color:#222; background-color:#FAFAFA; border-bottom: #DDDDDD 1px solid; border-left: #DDDDDD 1px solid; border-right: #DDDDDD 1px solid; border-top: #DDDDDD 1px solid; border-radius: 0.1em 0.1em 0 0; } .tab, .content .tab, h2.tab { font-size: 1em; } .tab.active { /*background-color: #5B6770; color: #FFF;*/ margin-bottom:-1px; color:#222; background-color:#FFFFFF; border-top: #DDDDDD 1px solid; border-left: #DDDDDD 1px solid; border-right: #DDDDDD 1px solid; border-bottom: none; } .tab.active a { color:#222; } .tab:hover, .tab:focus /*.tab:active*/ { /* background-color: #CF4520; color: #FFF;*/ background-color:#222; color:#FFFFFF; } .tab:hover a { color:#FFFFFF; } .tab a { /*color: #5B6770; color:#FFF;*/ color:#222; text-decoration: none; } /*.tab.active a, .tab:hover a, .tab:focus a, .tab:active a { color: #FFF; }*/ .tab-content {} /* 20140815 - fix for unclickable links in tabs for Safari */ .tab-content a { z-index:1; position:relative; } /* `header ==========================================================================*/ /*header {background-color:#FAFAFA;} Wrapper around nav include */ .crest { background-image: url(../images/layout/gov-crest-horizontal.png); background-repeat: no-repeat; width: 265px; height: 64px; cursor:pointer; margin-top: 2%; } .svg .crest{ /*=DWIC*/ /*background-image: url(../images/layout/gov-crest-horizontal.svg);*/ /*This was causing the logo to not appear in IE */ background-size: 100%; max-width: 265px; width: auto; } header .quote { float: right; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.8em;/* = DWIC */ font-weight: bold; font-style: italic; border-left: solid 1px #DDD; padding: 0 1.5em; margin-top: 15px; } /* `mainNav `nav ==========================================================================*/ /*=DWIC*/ /*Noscript fallback */ ul.noscriptNav { margin:auto 0; text-align:center; } ul.noscriptNav li { display:inline; padding: 2%; background-color:#FAFAFA; color:#222; } /* ----- Level 1 -----*/ .mainNav { padding: 2%; } .mainNav.row { margin-bottom: 0; } .mainNav li { float: left; } /* DWIC test transitions */ /*.lt-ie8 */ /*.mainNav li:hover ul { display: block; }*/ /* probably need this for mobile?*/ /*.csstransitions .mainNav > ul > li:hover ul { height:auto; } .csstransitions .mainNav ul ul { height:0; }*/ /* end DWIC test transitions */ .mainNav .level-1 .level-1 > a { font-size: 1.5em; font-weight: bold; /*border: solid 2px #FFFFFF;*/ text-decoration: none; display: block; text-align: center; color: #CF4520; font-family: Georgia, "Times New Roman", Times, serif; } li.level-1 { /*=DWIC*/ /*box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);*/ background-color: #FAFAFA; border: 1px solid #DDD; /*=DWIC*/ /* background: linear-gradient(to bottom, #ffffff 0%, #ededed 100%); W3C */ /* `vendor background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%); /* FF3.6+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ededed)); /* Chrome,Safari4+ background: -webkit-linear-gradient(top, #ffffff 0%, #ededed 100%); Chrome10+,Safari5.1+ background: -o-linear-gradient(top, #ffffff 0%, #ededed 100%); Opera 11.10+ background: -ms-linear-gradient(top, #ffffff 0%, #ededed 100%); IE10+ */ } /*.mainNav li.level-1:hover > a { background-color: #000000; color: #FFFFFF; box-shadow: none; background-position: -300px bottom; cursor:pointer; }*/ .mainNav li.level-1 > a.touched { background-color: #222; color: #FAFAFA; /*border: solid 2px #5B6770; border-top: solid 2px #525d65;*/ box-shadow: none; background-position: -300px bottom; cursor:pointer; } .mainNav .level-1 .level-1 > a span { padding: 0.8em 0.8em 2.5em 0.8em; display: block; background-image: url(../images/layout/mainnav-arrow.gif); background-repeat: no-repeat; background-position: right bottom; } .defence-nav-item-1 > a, .defence-nav-item-3 > a, .defence-nav-item-4 > a, .defence-nav-item-2 > a { background-repeat: no-repeat; background-position: left bottom; } .defence-nav-item-1 > a { background-image: url(../images/layout/mainnav-jobs.png); } .defence-nav-item-2 > a { background-image: url(../images/layout/mainnav-dep.png); } .defence-nav-item-3 > a { background-image: url(../images/layout/mainnav-media.png); } .defence-nav-item-4 > a { background-image: url(../images/layout/mainnav-directory.png); } /* DWIC 20140521 - adding CSS hovers so it works in browsers too */ /*.mainNav li.level-1:hover > ul.level-2 { display:block; opacity:1; height:auto; }*/ /* ----- Level 2 -----*/ .mainNav ul.level-2 { /*display: none;*/ position: absolute; width: 100%; left: 0; background-color: #222; z-index: 3; color: #FAFAFA; } /* DWIC 20140519 - moving transitions to no touch to see if it works on iPad */ .csstransitions .mainNav ul.level-2 { -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -ms-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; } .mainNav ul ul li { width: 17%; font-size: 1.3em; font-family: Georgia, "Times New Roman", Times, serif; padding: 1%; line-height: 1.2em; } .mainNav ul ul a { color: #FAFAFA; text-align: left; border: none; padding: 0; text-decoration: none; } /*.lt-ie9*/ .mainNav ul ul a:hover { color: #FAFAFA; text-decoration: underline; } /* ----- Level 3 -----*/ .mainNav ul ul ul { position: relative; } .mainNav li li li { float: none; padding: 0; font-size: 0.7em; font-family: 'Roboto', Helvetica, Arial, sans-serif; width: auto; border-bottom: solid 1px #5B6770; line-height: 1.1em; } /* Turn off font for IE8 and below */ .lt-ie7 .mainNav li li li, .lt-ie8 .mainNav li li li, .lt-ie9 .mainNav li li li {font-family: Helvetica, Arial, sans-serif;} .mainNav li li li a { display: block; padding: 3%; /*overflow: hidden;*/ } .mainNav li li li a:hover { background-color: #49525b; text-decoration: none; } /* DWIC - transitions test */ .csstransitions .mainNav ul ul{ -webkit-transition: opacity 0.5s ease-in; -moz-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; -ms-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in; } .mainNav ul ul { z-index:100; /*height: 0;*/ /*overflow: hidden;*/ } /* don't display tertiary box yet */ /*.csstransitions .mainNav > ul > li:hover ul ul, .csstransitions .mainNav > ul > li > a:hover ul ul{ height:0; }*/ .csstransitions .mainNav > ul > li > a { -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; } .mainNav > ul > li > a { display:block; } /*.csstransitions .mainNav ul ul { -webkit-transition: height 1s ease-in; -moz-transition: height 1s ease-in; -o-transition: height 1s ease-in; -ms-transition: height 1s ease-in; transition: height 1s ease-in; height:0; }*/ /*.lt-ie9 */.mainNav .level-2 { display:none;/*opacity:0;height:0;*/ } /*.csstransitions .mainNav ul.level-2 {height:0;} .csstransitions .mainNav ul.level-2 ul {height:0;}*/ /*.csstransitions .mainNav ul > li > a:hover ul ul, .csstransitions .mainNav ul>li:hover ul ul { height:0; } .csstransitions .mainNav > ul > li:hover ul ul, .csstransitions .mainNav > ul > li > a:hover ul ul{ height:0; }*/ /* take this off for now and we implement mouse overs in jQuery to introduce delays */ /*.csstransitions .mainNav > ul > li:hover ul, .csstransitions .mainNav > ul > li > a:hover ul, .csstransitions .mainNav ul ul li:hover > ul, .csstransitions .mainNav ul ul li a:hover > ul{ height:auto; }*/ /* drop-down item styles */ .csstransitions .mainNav ul ul li{ /* make the background-color fade in on roll-over */ -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; } /* `footer ==========================================================================*/ /* Bottom Links Section =DWIC */ .linkSection { /*width:auto;*/ background-color: #222222; color:#FAFAFA; } .linkSection p{padding:1%;} .linkSection h2 { font-size: 1em; line-height:1.2em; border-left: none; } /* = DWIC Restyling the greyBox for link section headings */ .linkSection h2.greyBox { background-image:none; padding: 4%; } .linkSection a { text-decoration:underline; color:#FAFAFA; } .linkSection a:hover, .linkSection a:focus, .linkSection a:active { color: #FAFAFA; } .linkSection ul { list-style: none; margin-bottom: 2em; } .linkSection li { margin-left: .5em; /* =DWIC Fixing to be consistent with main nav */ width: auto; border-bottom: solid 1px #49525b; line-height: 1.4em } .linkSection li a { display: block; padding: 3%; text-decoration: none; font-size:.8em; } .linkSection li a:hover { background-color: #49525b; text-decoration: none; } /* ----- Footer Brand ----*/ /* =DWIC */ /* =DWIC Corporate tagline */ footer {background-color: #FAFAFA;} footer .footerTag{font-size:1.2em; font-weight:normal;} footer .footerTag>img{padding-right:70px;} /* ----- Copy ----- */ footer .copy { line-height: 1.4em; background-color: #5B6770; color: #FFFFFF; text-align: center; } /* =DWIC Orange graphic within wrapper */ footer .copyGraph { background-image: url(../images/layout/copy-orange.gif); background-repeat: repeat-y; background-position: right top; } footer .copy ul { list-style: none; padding: 1em; } footer .copy li { display: inline; padding: 0.5em; } footer .copy a { color: #FAFAFA; text-decoration: none; padding: 1.3%; } footer .copy a:hover, footer .copy a:focus, footer .copy a:active { color: #FFFFFF; border-bottom: none; background-color:#222; } /* ----- Back to top ----- */ /* =DWIC */ .topLink { position: fixed; float:right; bottom: 0; right:2%; z-index:999; } .topLink a { width: 80px; display: block; text-align: center; font-size: 1em; text-decoration: none; color: #bbb; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } .topLink a:hover { color: #000; cursor:pointer; } /* arrow icon (span tag) */ /*=DWIC*/ .topLink span { width: 80px; height: 80px; display: block; background: #5B6770 url(../images/layout/up-arrow.png) no-repeat center center; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; opacity:0.6; filter:alpha(opacity=60); z-index: 10000; } .topLink a:hover span { background-color: #CF4520; opacity:1.0; filter:alpha(opacity=100); } /* `content ==========================================================================*/ .content { font-size: 0.9em; line-height: 1.5em; } .content img { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 100%; height: auto; } /* Blocks Margins */ .content p, .content ul, .content ol, .content dl, .content table, .content blockquote, .content pre, .content figure, .content form, .content hr { margin-bottom: 1.5em; } /* Headings */ .content h1 { font-size: 2.4em; line-height: 1; margin-top: .641em; margin-bottom: .641em; } .content h2 { font-size: 1.8em; line-height: 1.1; margin-bottom: .855em; } .content h3 { font-size: 1.4em; line-height: 1.2; margin-bottom: 1.1em; } .content h4 { font-size: 1.2em; line-height: 1.35; margin-bottom: 1.282em; } .content h5 { font-size: 1em; line-height: 1.5; margin-bottom: 1.5em; } .content h6 { font-size: 1em; line-height: 1.5; margin-bottom: 1.5em; } /* Lists */ .content ul, .content ol, .content dl { padding-left: 2em; } .content ul { list-style: disc; } .content li ul { list-style: square; } .content li li ul { list-style: circle; } /*.content ol { list-style: decimal; }*/ .content dt { font-weight: bold; } .content li ul, .content li ol, .content li dl, .content dl ul, .content dl ol, .content dl dl, .content table ul, .content table ol, .content table dl { margin: 0; } /* 20140516 DWIC - Fix double digits getting cut off in IE8 */ .lt-ie9 .content ol { padding-left: 2.5em; } /* Tables */ .content table {} .content caption { font-weight: bold; line-height: 1.5; margin-bottom: .5em; } .content td, .content th { text-align: left; padding: .25em .5em; border: 1px solid #CCC; } /* =DWIC - Chris - added .content tr.even for coloured rows in tables */ .content thead td, .content thead th, .content tfoot td, .content tfoot th, .content tr.even { background: #EEE; } /* Forms */ .content form { } .content fieldset { border: 1px solid #CCC; padding: 1em; margin-bottom: 1em; } .content fieldset.spacing > div { margin: .5em 0; } .content legend { font-weight: bold; } .content input, .content select, .content button, .content textarea { vertical-align: middle; } /* Buttons */ /* =DWIC Removed the .content class on buttons as it was not being applied to buttons outside the content class eg the footer. */ .button { border: solid 1px #FFFFFF; background-color: #5B6770; padding: 0.5em 1em; display: inline-block; color: #FFFFFF; text-decoration: none; /*box-shadow: 0 2px 3px 0 #999999;*/ } a.button:active, /* =DWIC */ a.button:link, a.button:hover, a.button:focus, a.button:visited { color: #FFFFFF } .lt-ie8 .button { display: block; float: left; } .button:hover, .button:focus, .button:active { background-color: #CF4520; } /* Code */ .content pre, .content code { border: 1px solid #DDD; border-radius: 3px; color: #333; background: #EEE; } .content pre { padding: 1em; } .content code {} .content pre code { border: none; background: none; } /* Quotes */ .content blockquote, .content q { font-style: italic; color: #666; } .content blockquote { border-left: 5px solid #EEE; padding-left: 2em; } .content .required { font-size: .75em; color: #CF4520; } /* Links */ /* Added the external link to the main nav flyout */ /*=DWIC*/ .content a[target="_blank"]:after, .mainNav a[target="_blank"]:after { /* content: '\25B4'; */ /*=DWIC*/ } .content a[href^="http://"]:after, .sup, .mainNav a[href^="http://"]:after, .sup { vertical-align: super; font-size: 0.6em; } .content a[href^="http://"]:after, .mainNav a[href^="http://"]:after { /*content: ' off-site';*/ /*=DWIC */ /* content:url(../images/layout/external-link-icon-grey.png); */ /*=DWIC*/ vertical-align:bottom; } /* =DWIC .content a[href^="http://voodoowebservices.com.au"]:after{ content: ''; } .content a[href^="#"]:after{ content: ' scroll'; vertical-align:super; font-size:0.6em; } */ /* ----- Games List ----- */ .gamesList {} .gamesList ul { margin: 0; padding: 0; list-style: none; } .gamesList img { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; max-width: 100%; } .gamesList > h3, .gamesList > p { text-align: center; margin-bottom: 10px; } .gamesList > ul {} .gamesList > ul > li { border-top: 1px solid #CCC; padding: 1em .5em; overflow: hidden; } .gamesList > ul > li:first-child { border: none; } .gamesList li img { border: 3px solid white; } .gamesList li ul {} .gamesList li li { float: left; background: white; padding: .5em; margin-right: 10px; } .gamesList li li.floatRight { float: right; } .gamesList li .button { padding: .2em .5em; } /* `carousels ==========================================================================*/ .slide { position: relative; } /* ----- Controls and Numbers -----*/ .carousel-controls { position: relative; font-size: .9em; margin: .75em 0; border-top: 1px solid #CCC; padding-top: .5em; } .carousel-controls ol, .carousel-controls ul { margin: 0; padding: 0; list-style: none; text-align: center; } .carousel-controls li { display: inline; margin-right: 0.5em; } .carousel-controls li a { display: inline-block; position: relative; /* See `ref1*/ padding: .5em; width: 10px; height: 10px; line-height: 10px; overflow: hidden; text-decoration: none; color: #000; border: solid 1px #BABABA; background: #FFF; /* Old browsers */ background-image: linear-gradient(to bottom, #FFF 51%, #f4f4f4 75%, #d8d8d8 100%); /* W3C */ /* `vendor */ background-image: -webkit-linear-gradient(top, #FFF 51%, #f4f4f4 75%, #d8d8d8 100%); /* Chrome10+,Safari5.1+ */ } .carousel-controls li a span { display: block; } /* ----- Alternate States ----- */ .carousel-controls li a:hover, .carousel-controls li a:focus, .carousel-controls li a:active { color: #000; background: #fafafa; box-shadow: inset 0 0 6px 0 rgba(0, 0, 0, 0.3); } .carousel-controls li a.disabled { opacity: .5; filter: alpha(opacity=50); cursor: default; } .carousel-controls li a.selected { color: #FFF; background: #CF4520; border: solid 1px #CF4520; } /* ----- Controls ----- */ .carousel-controls ul { position: absolute } .carousel-controls ul li a { text-indent: -9999px; } .carousel-controls ul li a span { background-repeat: no-repeat; background-position: center center; } .carousel-controls ul li a.prev span { background-image: url(../images/layout/slider-prev.gif); } .carousel-controls ul li a.next span { background-image: url(../images/layout/slider-next.gif); } .carousel-controls ul li a.play span { background-image: url(../images/layout/slider-play.gif); } .carousel-controls ul li a.pause span { background-image: url(../images/layout/slider-pause.gif); } .lt-ie8 .carousel-controls ul li, .lt-ie8 .carousel-controls ul li a { float: left; } /* ----- Numbers -----*/ .carousel-controls ol { padding: 0 7em; } .carousel-controls ol li { } /* Changes!!! */ .carousel-controls ul, .carousel-controls ol { position: static; float: left; padding: 0; } .carousel-controls ol { float: right; } .carousel-controls ol li { margin: 0 0 0 0.5em; } /* ----- AJAX Loader ----- */ .loading_feed { min-height: 400px; background: white url(../images/layout/ajax-loader.gif) no-repeat center center; } /* `modal =DWIC ==========================================================================*/ .nyroModalBg { position: fixed; overflow: hidden; top: 0; left: 0; height: 100%; width: 100%; background: #000; opacity: 0.7; } .nmReposition { position: absolute; } .nyroModalCloseButton { top: -13px; right: -13px; width: 12px; height: 12px; text-indent: -9999em; background: url(../images/layout/close.gif); } .nyroModalTitle { top: -26px; left: 0; margin: 0; font-size: 1.1em; color: #ddd; } .nyroModalCont { position: absolute; border: 4px solid #777; margin: 25px; background: #fff; } .nyroModalCont iframe { position:relative; width: 60em; height: 90em; } .nyroModalError { border: 4px solid red; color: red; width: 250px; height: 250px; } .nyroModalError div { min-width: 0; min-height: 0; padding: 10px; } .nyroModalLink, .nyroModalDom, .nyroModalForm, .nyroModalFormFile { position: relative; padding: 10px; min-height: 250px; min-width: 250px; max-width: 1000px; } .nyroModalImage, .nyroModalSwf, .nyroModalIframe, .nyroModalIframeForm { position: relative; overflow: hidden; } .nyroModalImage img { vertical-align: top; } .nyroModalHidden { left: -9999em; top: -9999em; } .nyroModalLoad { position: absolute; width: 100px; height: 100px; background: #fff url(../images/layout/ajaxLoader.gif) no-repeat center; padding: 0; } .nyroModalPrev, .nyroModalNext { outline: none; position: absolute; top: 0; height: 60%; width: 150px; min-height: 50px; max-height: 300px; cursor: pointer; text-indent: -9999em; background: transparent url('data:image/gif;base64,AAAA') left 20% no-repeat; } .nyroModalImage .nyroModalPrev, .nyroModalImage .nyroModalNext { height: 100%; width: 40%; max-height: none; } .nyroModalPrev { left: 0; } .nyroModalPrev:hover { background-image: url(../images/layout/prev.gif); } .nyroModalNext { right: 0; background-position: right 20%; } .nyroModalNext:hover { background-position: right 20%; background-image: url(../images/layout/next.gif); } /* `accordion =DWIC ==========================================================================*/ .ui-accordion .ui-state-hover{cursor:pointer;cursor:hand;} .ui-accordion-header-active {cursor:text !important;} .ui-accordion .ui-accordion-header { position:relative;} .ui-accordion .ui-accordion-icons { padding-left:2.2em !important; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon { position:absolute; top:50%;left:0.5em;margin-top:-8px;} .ui-icon {width:16px;height:16px;} .ui-icon-triangle-1-e {background: url('../images/layout/ui-icons_222222_256x240.png') -32px -16px no-repeat; } .ui-icon-triangle-1-s {background: url('../images/layout/ui-icons_222222_256x240.png') -64px -16px no-repeat; } /* Icons & UI =DWIC ==========================================================================*/ .uiIcons{width:20px; border:1px solid red; height:auto;} .pdf {background: url(../images/layout/icon-pdf-link.png) top left no-repeat;} .doc{} /* ----- Social Media Icons =DWIC ----- */ ul.socialList {display:inline;} ul.socialList li{display:block; list-style-type:none; float:left; line-height:1.8em; width:24px; background-position:top left; background-repeat:no-repeat;} ul.socialList li a, ul.socialList li a:hover{color:transparent;} ul.socialList li.fb{background-image: url(../Images/icon-fb-bw-24px.png);} ul.socialList li.fb:hover {background-image: url(../Images/icon-fb-24px.png); cursor:pointer;} ul.socialList li.tw{background-image: url(../Images/icon-tw-bw-24px.png);} ul.socialList li.tw:hover {background-image: url(../Images/icon-tw-24px.png); cursor:pointer;} ul.socialList li.yt{background-image: url(../Images/icon-yt-bw-24px.png);} ul.socialList li.yt:hover {background-image: url(../Images/icon-yt-24px.png); cursor:pointer;} ul.socialList li.fl{background-image: url(../Images/icon-flickr-bw-24px.png);} ul.socialList li.fl:hover {background-image: url(../Images/icon-flickr-24px.png); cursor:pointer;} ul.socialList li.rss{background-image: url(../Images/icon-rss-bw-24px.png);} ul.socialList li.rss:hover {background-image: url(../Images/icon-rss-24px.png); cursor:pointer;} /* =CT Icon Fonts */ @font-face { font-family: 'dwic'; src:url('/_Master/Fonts/dwic.eot?dwic'); src:url('/_Master/Fonts/dwic.eot?#iefix') format('embedded-opentype'), url('/_Master/Fonts/dwic.woff?dwic') format('woff'), url('/_Master/Fonts/dwic.ttf?dwic') format('truetype'), url('/_Master/Fonts/dwic.svg?dwic#dwic') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'dwic'; speak: none; font-style:normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: inherit; font-size:inherit; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="icon-"]:before ,[class*=" icon-"]:before { padding-right:3px; } .icon-home:before { content: "\e60b"; } .icon-home2:before { content: "\e60c"; } .icon-home3:before { content: "\e60d"; } .icon-office:before { content: "\e60e"; } .icon-newspaper:before { content: "\e60f"; } .icon-pencil:before { content: "\e610"; } .icon-pencil2:before { content: "\e611"; } .icon-quill:before { content: "\e612"; } .icon-pen:before { content: "\e613"; } .icon-blog:before { content: "\e614"; } .icon-droplet:before { content: "\e615"; } .icon-paint-format:before { content: "\e616"; } .icon-image:before { content: "\e617"; } .icon-image2:before { content: "\e618"; } .icon-images:before { content: "\e619"; } .icon-camera:before { content: "\e61a"; } .icon-music:before { content: "\e61b"; } .icon-headphones:before { content: "\e61c"; } .icon-play:before { content: "\e61d"; } .icon-film:before { content: "\e61e"; } .icon-camera2:before { content: "\e61f"; } .icon-dice:before { content: "\e620"; } .icon-pacman:before { content: "\e621"; } .icon-spades:before { content: "\e622"; } .icon-clubs:before { content: "\e623"; } .icon-diamonds:before { content: "\e624"; } .icon-pawn:before { content: "\e625"; } .icon-bullhorn:before { content: "\e626"; } .icon-connection:before { content: "\e627"; } .icon-podcast:before { content: "\e628"; } .icon-feed:before { content: "\e629"; } .icon-book:before { content: "\e62a"; } .icon-books:before { content: "\e62b"; } .icon-library:before { content: "\e62c"; } .icon-file:before { content: "\e62d"; } .icon-profile:before { content: "\e62e"; } .icon-file2:before { content: "\e62f"; } .icon-file3:before { content: "\e600"; } .icon-file4:before { content: "\e630"; } .icon-copy:before { content: "\e631"; } .icon-copy2:before { content: "\e632"; } .icon-copy3:before { content: "\e633"; } .icon-paste:before { content: "\e634"; } .icon-paste2:before { content: "\e635"; } .icon-paste3:before { content: "\e636"; } .icon-stack:before { content: "\e637"; } .icon-folder:before { content: "\e638"; } .icon-folder-open:before { content: "\e639"; } .icon-tag:before { content: "\e63a"; } .icon-tags:before { content: "\e63b"; } .icon-barcode:before { content: "\e63c"; } .icon-qrcode:before { content: "\e63d"; } .icon-ticket:before { content: "\e63e"; } .icon-cart:before { content: "\e63f"; } .icon-cart2:before { content: "\e640"; } .icon-cart3:before { content: "\e641"; } .icon-coin:before { content: "\e642"; } .icon-credit:before { content: "\e643"; } .icon-calculate:before { content: "\e644"; } .icon-support:before { content: "\e645"; } .icon-phone:before { content: "\e646"; } .icon-phone-hang-up:before { content: "\e647"; } .icon-address-book:before { content: "\e648"; } .icon-notebook:before { content: "\e649"; } .icon-envelope:before { content: "\e64a"; } .icon-pushpin:before { content: "\e64b"; } .icon-location:before { content: "\e64c"; } .icon-location2:before { content: "\e64d"; } .icon-compass:before { content: "\e64e"; } .icon-map:before { content: "\e64f"; } .icon-map2:before { content: "\e650"; } .icon-history:before { content: "\e651"; } .icon-clock:before { content: "\e652"; } .icon-clock2:before { content: "\e653"; } .icon-alarm:before { content: "\e654"; } .icon-alarm2:before { content: "\e655"; } .icon-bell:before { content: "\e656"; } .icon-stopwatch:before { content: "\e657"; } .icon-calendar:before { content: "\e658"; } .icon-calendar2:before { content: "\e659"; } .icon-print:before { content: "\e65a"; } .icon-keyboard:before { content: "\e65b"; } .icon-screen:before { content: "\e65c"; } .icon-laptop:before { content: "\e65d"; } .icon-mobile:before { content: "\e65e"; } .icon-mobile2:before { content: "\e65f"; } .icon-tablet:before { content: "\e660"; } .icon-tv:before { content: "\e661"; } .icon-cabinet:before { content: "\e662"; } .icon-drawer:before { content: "\e663"; } .icon-drawer2:before { content: "\e664"; } .icon-drawer3:before { content: "\e665"; } .icon-box-add:before { content: "\e666"; } .icon-box-remove:before { content: "\e667"; } .icon-download:before { content: "\e668"; } .icon-upload:before { content: "\e669"; } .icon-disk:before { content: "\e66a"; } .icon-storage:before { content: "\e66b"; } .icon-undo:before { content: "\e66c"; } .icon-redo:before { content: "\e66d"; } .icon-flip:before { content: "\e66e"; } .icon-flip2:before { content: "\e66f"; } .icon-undo2:before { content: "\e670"; } .icon-redo2:before { content: "\e671"; } .icon-forward:before { content: "\e672"; } .icon-reply:before { content: "\e673"; } .icon-bubble:before { content: "\e674"; } .icon-bubbles:before { content: "\e675"; } .icon-bubbles2:before { content: "\e676"; } .icon-bubble2:before { content: "\e677"; } .icon-bubbles3:before { content: "\e678"; } .icon-bubbles4:before { content: "\e679"; } .icon-user:before { content: "\e67a"; } .icon-users:before { content: "\e67b"; } .icon-user2:before { content: "\e67c"; } .icon-users2:before { content: "\e67d"; } .icon-user3:before { content: "\e67e"; } .icon-user4:before { content: "\e67f"; } .icon-quotes-left:before { content: "\e680"; } .icon-busy:before { content: "\e681"; } .icon-spinner:before { content: "\e682"; } .icon-spinner2:before { content: "\e683"; } .icon-spinner3:before { content: "\e684"; } .icon-spinner4:before { content: "\e685"; } .icon-spinner5:before { content: "\e686"; } .icon-spinner6:before { content: "\e687"; } .icon-binoculars:before { content: "\e688"; } .icon-search:before { content: "\e689"; } .icon-zoom-in:before { content: "\e68a"; } .icon-zoom-out:before { content: "\e68b"; } .icon-expand:before { content: "\e68c"; } .icon-contract:before { content: "\e68d"; } .icon-expand2:before { content: "\e68e"; } .icon-contract2:before { content: "\e68f"; } .icon-key:before { content: "\e690"; } .icon-key2:before { content: "\e691"; } .icon-lock:before { content: "\e692"; } .icon-lock2:before { content: "\e693"; } .icon-unlocked:before { content: "\e694"; } .icon-wrench:before { content: "\e695"; } .icon-settings:before { content: "\e696"; } .icon-equalizer:before { content: "\e697"; } .icon-cog:before { content: "\e698"; } .icon-cogs:before { content: "\e699"; } .icon-cog2:before { content: "\e69a"; } .icon-hammer:before { content: "\e69b"; } .icon-wand:before { content: "\e69c"; } .icon-aid:before { content: "\e69d"; } .icon-bug:before { content: "\e69e"; } .icon-pie:before { content: "\e69f"; } .icon-stats:before { content: "\e6a0"; } .icon-bars:before { content: "\e6a1"; } .icon-bars2:before { content: "\e6a2"; } .icon-gift:before { content: "\e6a3"; } .icon-trophy:before { content: "\e6a4"; } .icon-glass:before { content: "\e6a5"; } .icon-mug:before { content: "\e6a6"; } .icon-food:before { content: "\e6a7"; } .icon-leaf:before { content: "\e6a8"; } .icon-rocket:before { content: "\e6a9"; } .icon-meter:before { content: "\e6aa"; } .icon-meter2:before { content: "\e6ab"; } .icon-dashboard:before { content: "\e6ac"; } .icon-hammer2:before { content: "\e6ad"; } .icon-fire:before { content: "\e6ae"; } .icon-lab:before { content: "\e6af"; } .icon-magnet:before { content: "\e6b0"; } .icon-remove:before { content: "\e6b1"; } .icon-remove2:before { content: "\e6b2"; } .icon-briefcase:before { content: "\e6b3"; } .icon-airplane:before { content: "\e6b4"; } .icon-truck:before { content: "\e6b5"; } .icon-road:before { content: "\e6b6"; } .icon-accessibility:before { content: "\e6b7"; } .icon-target:before { content: "\e6b8"; } .icon-shield:before { content: "\e6b9"; } .icon-lightning:before { content: "\e6ba"; } .icon-switch:before { content: "\e6bb"; } .icon-power-cord:before { content: "\e6bc"; } .icon-signup:before { content: "\e6bd"; } .icon-list:before { content: "\e6be"; } .icon-list2:before { content: "\e6bf"; } .icon-numbered-list:before { content: "\e6c0"; } .icon-menu:before { content: "\e6c1"; } .icon-menu2:before { content: "\e6c2"; } .icon-tree:before { content: "\e6c3"; } .icon-cloud:before { content: "\e6c4"; } .icon-cloud-download:before { content: "\e6c5"; } .icon-cloud-upload:before { content: "\e6c6"; } .icon-download2:before { content: "\e6c7"; } .icon-upload2:before { content: "\e6c8"; } .icon-download3:before { content: "\e6c9"; } .icon-upload3:before { content: "\e6ca"; } .icon-globe:before { content: "\e6cb"; } .icon-earth:before { content: "\e6cc"; } .icon-link:before { content: "\e6cd"; } .icon-flag:before { content: "\e6ce"; } .icon-attachment:before { content: "\e6cf"; } .icon-eye:before { content: "\e6d0"; } .icon-eye-blocked:before { content: "\e6d1"; } .icon-eye2:before { content: "\e6d2"; } .icon-bookmark:before { content: "\e6d3"; } .icon-bookmarks:before { content: "\e6d4"; } .icon-brightness-medium:before { content: "\e6d5"; } .icon-brightness-contrast:before { content: "\e6d6"; } .icon-contrast:before { content: "\e6d7"; } .icon-star:before { content: "\e6d8"; } .icon-star2:before { content: "\e6d9"; } .icon-star3:before { content: "\e6da"; } .icon-heart:before { content: "\e6db"; } .icon-heart2:before { content: "\e6dc"; } .icon-heart-broken:before { content: "\e6dd"; } .icon-thumbs-up:before { content: "\e6de"; } .icon-thumbs-up2:before { content: "\e6df"; } .icon-happy:before { content: "\e6e0"; } .icon-happy2:before { content: "\e6e1"; } .icon-smiley:before { content: "\e6e2"; } .icon-smiley2:before { content: "\e6e3"; } .icon-tongue:before { content: "\e6e4"; } .icon-tongue2:before { content: "\e6e5"; } .icon-sad:before { content: "\e6e6"; } .icon-sad2:before { content: "\e6e7"; } .icon-wink:before { content: "\e6e8"; } .icon-wink2:before { content: "\e6e9"; } .icon-grin:before { content: "\e6ea"; } .icon-grin2:before { content: "\e6eb"; } .icon-cool:before { content: "\e6ec"; } .icon-cool2:before { content: "\e6ed"; } .icon-angry:before { content: "\e6ee"; } .icon-angry2:before { content: "\e6ef"; } .icon-evil:before { content: "\e6f0"; } .icon-evil2:before { content: "\e6f1"; } .icon-shocked:before { content: "\e6f2"; } .icon-shocked2:before { content: "\e6f3"; } .icon-confused:before { content: "\e6f4"; } .icon-confused2:before { content: "\e6f5"; } .icon-neutral:before { content: "\e6f6"; } .icon-neutral2:before { content: "\e6f7"; } .icon-wondering:before { content: "\e6f8"; } .icon-wondering2:before { content: "\e6f9"; } .icon-point-up:before { content: "\e6fa"; } .icon-point-right:before { content: "\e6fb"; } .icon-point-down:before { content: "\e6fc"; } .icon-point-left:before { content: "\e6fd"; } .icon-warning:before { content: "\e6fe"; } .icon-notification:before { content: "\e6ff"; } .icon-question:before { content: "\e700"; } .icon-info:before { content: "\e701"; } .icon-info2:before { content: "\e702"; } .icon-blocked:before { content: "\e703"; } .icon-cancel-circle:before { content: "\e704"; } .icon-checkmark-circle:before { content: "\e705"; } .icon-spam:before { content: "\e706"; } .icon-close:before { content: "\e707"; } .icon-checkmark:before { content: "\e708"; } .icon-checkmark2:before { content: "\e709"; } .icon-spell-check:before { content: "\e70a"; } .icon-minus:before { content: "\e70b"; } .icon-plus:before { content: "\e70c"; } .icon-enter:before { content: "\e70d"; } .icon-exit:before { content: "\e70e"; } .icon-play2:before { content: "\e70f"; } .icon-pause:before { content: "\e710"; } .icon-stop:before { content: "\e711"; } .icon-backward:before { content: "\e712"; } .icon-forward2:before { content: "\e713"; } .icon-play3:before { content: "\e714"; } .icon-pause2:before { content: "\e715"; } .icon-stop2:before { content: "\e716"; } .icon-backward2:before { content: "\e717"; } .icon-forward3:before { content: "\e718"; } .icon-first:before { content: "\e719"; } .icon-last:before { content: "\e71a"; } .icon-previous:before { content: "\e71b"; } .icon-next:before { content: "\e71c"; } .icon-eject:before { content: "\e71d"; } .icon-volume-high:before { content: "\e71e"; } .icon-volume-medium:before { content: "\e71f"; } .icon-volume-low:before { content: "\e720"; } .icon-volume-mute:before { content: "\e721"; } .icon-volume-mute2:before { content: "\e722"; } .icon-volume-increase:before { content: "\e723"; } .icon-volume-decrease:before { content: "\e724"; } .icon-loop:before { content: "\e725"; } .icon-loop2:before { content: "\e726"; } .icon-loop3:before { content: "\e727"; } .icon-shuffle:before { content: "\e728"; } .icon-arrow-up-left:before { content: "\e729"; } .icon-arrow-up:before { content: "\e72a"; } .icon-arrow-up-right:before { content: "\e72b"; } .icon-arrow-right:before { content: "\e72c"; } .icon-arrow-down-right:before { content: "\e72d"; } .icon-arrow-down:before { content: "\e72e"; } .icon-arrow-down-left:before { content: "\e72f"; } .icon-arrow-left:before { content: "\e730"; } .icon-arrow-up-left2:before { content: "\e731"; } .icon-arrow-up2:before { content: "\e732"; } .icon-arrow-up-right2:before { content: "\e733"; } .icon-arrow-right2:before { content: "\e734"; } .icon-arrow-down-right2:before { content: "\e735"; } .icon-arrow-down2:before { content: "\e736"; } .icon-arrow-down-left2:before { content: "\e737"; } .icon-arrow-left2:before { content: "\e738"; } .icon-arrow-up-left3:before { content: "\e739"; } .icon-arrow-up3:before { content: "\e73a"; } .icon-arrow-up-right3:before { content: "\e73b"; } .icon-arrow-right3:before { content: "\e73c"; } .icon-arrow-down-right3:before { content: "\e73d"; } .icon-arrow-down3:before { content: "\e73e"; } .icon-arrow-down-left3:before { content: "\e73f"; } .icon-arrow-left3:before { content: "\e740"; } .icon-tab:before { content: "\e741"; } .icon-checkbox-checked:before { content: "\e742"; } .icon-checkbox-unchecked:before { content: "\e743"; } .icon-checkbox-partial:before { content: "\e744"; } .icon-radio-checked:before { content: "\e745"; } .icon-radio-unchecked:before { content: "\e746"; } .icon-crop:before { content: "\e747"; } .icon-scissors:before { content: "\e748"; } .icon-filter:before { content: "\e749"; } .icon-filter2:before { content: "\e74a"; } .icon-font:before { content: "\e74b"; } .icon-text-height:before { content: "\e74c"; } .icon-text-width:before { content: "\e74d"; } .icon-bold:before { content: "\e74e"; } .icon-underline:before { content: "\e74f"; } .icon-italic:before { content: "\e750"; } .icon-strikethrough:before { content: "\e751"; } .icon-omega:before { content: "\e752"; } .icon-sigma:before { content: "\e753"; } .icon-table:before { content: "\e754"; } .icon-table2:before { content: "\e755"; } .icon-insert-template:before { content: "\e756"; } .icon-pilcrow:before { content: "\e757"; } .icon-left-toright:before { content: "\e758"; } .icon-right-toleft:before { content: "\e759"; } .icon-paragraph-left:before { content: "\e75a"; } .icon-paragraph-center:before { content: "\e75b"; } .icon-paragraph-right:before { content: "\e75c"; } .icon-paragraph-justify:before { content: "\e75d"; } .icon-paragraph-left2:before { content: "\e75e"; } .icon-paragraph-center2:before { content: "\e75f"; } .icon-paragraph-right2:before { content: "\e760"; } .icon-paragraph-justify2:before { content: "\e761"; } .icon-indent-increase:before { content: "\e762"; } .icon-indent-decrease:before { content: "\e763"; } .icon-new-tab:before { content: "\e764"; } .icon-embed:before { content: "\e765"; } .icon-code:before { content: "\e766"; } .icon-console:before { content: "\e767"; } .icon-share:before { content: "\e768"; } .icon-mail:before { content: "\e769"; } .icon-mail2:before { content: "\e76a"; } .icon-mail3:before { content: "\e76b"; } .icon-mail4:before { content: "\e76c"; } .icon-google:before { content: "\e76d"; } .icon-google-plus:before { content: "\e76e"; } .icon-google-plus2:before { content: "\e76f"; } .icon-google-plus3:before { content: "\e602"; } .icon-google-plus4:before { content: "\e770"; } .icon-google-drive:before { content: "\e771"; } .icon-facebook:before { content: "\e772"; } .icon-facebook2:before { content: "\e601"; } .icon-facebook3:before { content: "\e773"; } .icon-instagram:before { content: "\e774"; } .icon-twitter:before { content: "\e775"; } .icon-twitter2:before { content: "\e608"; } .icon-twitter3:before { content: "\e776"; } .icon-feed2:before { content: "\e777"; } .icon-feed3:before { content: "\e778"; } .icon-feed4:before { content: "\e779"; } .icon-youtube:before { content: "\e60a"; } .icon-youtube2:before { content: "\e77a"; } .icon-vimeo:before { content: "\e77b"; } .icon-vimeo2:before { content: "\e77c"; } .icon-vimeo3:before { content: "\e77d"; } .icon-lanyrd:before { content: "\e77e"; } .icon-flickr:before { content: "\e77f"; } .icon-flickr2:before { content: "\e780"; } .icon-flickr3:before { content: "\e609"; } .icon-flickr4:before { content: "\e781"; } .icon-picassa:before { content: "\e782"; } .icon-picassa2:before { content: "\e783"; } .icon-dribbble:before { content: "\e784"; } .icon-dribbble2:before { content: "\e785"; } .icon-dribbble3:before { content: "\e786"; } .icon-forrst:before { content: "\e787"; } .icon-forrst2:before { content: "\e788"; } .icon-deviantart:before { content: "\e789"; } .icon-deviantart2:before { content: "\e78a"; } .icon-steam:before { content: "\e78b"; } .icon-steam2:before { content: "\e78c"; } .icon-github:before { content: "\e78d"; } .icon-github2:before { content: "\e78e"; } .icon-github3:before { content: "\e78f"; } .icon-github4:before { content: "\e790"; } .icon-github5:before { content: "\e791"; } .icon-wordpress:before { content: "\e792"; } .icon-wordpress2:before { content: "\e793"; } .icon-joomla:before { content: "\e794"; } .icon-blogger:before { content: "\e795"; } .icon-blogger2:before { content: "\e796"; } .icon-tumblr:before { content: "\e797"; } .icon-tumblr2:before { content: "\e603"; } .icon-yahoo:before { content: "\e798"; } .icon-tux:before { content: "\e799"; } .icon-apple:before { content: "\e79a"; } .icon-finder:before { content: "\e79b"; } .icon-android:before { content: "\e79c"; } .icon-windows:before { content: "\e79d"; } .icon-windows8:before { content: "\e79e"; } .icon-soundcloud:before { content: "\e79f"; } .icon-soundcloud2:before { content: "\e7a0"; } .icon-skype:before { content: "\e7a1"; } .icon-reddit:before { content: "\e7a2"; } .icon-linkedin:before { content: "\e7a3"; } .icon-lastfm:before { content: "\e7a4"; } .icon-lastfm2:before { content: "\e7a5"; } .icon-delicious:before { content: "\e7a6"; } .icon-stumbleupon:before { content: "\e7a7"; } .icon-stumbleupon2:before { content: "\e7a8"; } .icon-stackoverflow:before { content: "\e7a9"; } .icon-pinterest:before { content: "\e7aa"; } .icon-pinterest2:before { content: "\e7ab"; } .icon-xing:before { content: "\e7ac"; } .icon-xing2:before { content: "\e7ad"; } .icon-flattr:before { content: "\e7ae"; } .icon-foursquare:before { content: "\e7af"; } .icon-foursquare2:before { content: "\e7b0"; } .icon-paypal:before { content: "\e7b1"; } .icon-paypal2:before { content: "\e7b2"; } .icon-paypal3:before { content: "\e7b3"; } .icon-yelp:before { content: "\e7b4"; } .icon-libreoffice:before { content: "\e7b5"; } .icon-file-pdf:before { content: "\e604"; } .icon-file-openoffice:before { content: "\e7b6"; } .icon-file-word:before { content: "\e605"; } .icon-file-excel:before { content: "\e606"; } .icon-file-zip:before { content: "\e7b7"; } .icon-file-powerpoint:before { content: "\e607"; } .icon-file-xml:before { content: "\e7b8"; } .icon-file-css:before { content: "\e7b9"; } .icon-html5:before { content: "\e7ba"; } .icon-html52:before { content: "\e7bb"; } .icon-css3:before { content: "\e7bc"; } .icon-chrome:before { content: "\e7bd"; } .icon-firefox:before { content: "\e7be"; } .icon-IE:before { content: "\e7bf"; } .icon-opera:before { content: "\e7c0"; } .icon-safari:before { content: "\e7c1"; } .icon-IcoMoon:before { content: "\e7c2"; } /* ----- IMG Icons List ----- */ .icons-list, .content .icons-list { list-style: none; padding: 0; border-top: 1px solid #CCC; } .icons-list li { overflow: hidden; border-bottom: 1px solid #CCC; } .icons-list li a { display: block; padding: 8px 5px; text-decoration: none; font-weight: bold; overflow: hidden; } .icons-list li a img { margin: 0 8px 0 0; float: left; } .icons-list li a span { display: block; overflow: hidden; } .icons-list li a:after { display: none; } .icons-list li a[href^="http://"] span:after, .icons-list li a[href^="https://"] span:after { content: url("http://uat.defence.gov.auhttp://www.defence.gov.au/_master/images/layout/external-link-icon-grey.png"); vertical-align: bottom; } /* Change colors */ .silverBox .icons-list { border-top-color: white; } .silverBox .icons-list li { border-bottom-color: white; } /* `helper classes ==========================================================================*/ /* Add .demo to body for layout colour helpers */ .demo .row { margin-bottom: 2%; } .demo .row .row { margin-bottom: 0; padding: .5em 0; } .demo .span_2_of_4 .span_1_of_4, .demo .span_2_of_4 .span_3_of_4, .demo .span_2_of_4 .span_1_of_3, .demo .span_2_of_4 .span_2_of_3, .demo .span_3_of_4 .span_1_of_4, .demo .span_3_of_4 .span_3_of_4, .demo .span_2_of_3 .span_1_of_4, .demo .span_2_of_3 .span_3_of_4, .demo .span_1_of_3 .col{background-color:#797979;} .demo .col{background-color:#DDD;} .demo .col .col{background-color:#aeaeae;} .demo .span_2_of_4 .span_1_of_4, .demo .span_2_of_4 .span_3_of_4, .demo .span_2_of_4 .span_1_of_3, .demo .span_2_of_4 .span_2_of_3, .demo .span_3_of_4 .span_1_of_4, .demo .span_3_of_4 .span_3_of_4, .demo .span_2_of_3 .span_1_of_4, .demo .span_2_of_3 .span_3_of_4{background-color:#828282;} /* Add the .ir class to any element you are applying image-replacement to.*/ .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent:-9999px; } .ir:before { content: ""; display: block; width: 0; height: 100%; } /*Add the .hidden class to any elements that you want to hide from all presentations, including screen readers.*/ .hidden { display: none !important; visibility: hidden; } /*Add the .visuallyhidden class to hide text from browsers but make it available for screen readers.*/ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /*Add the .invisible class to any element you want to hide without affecting layout.*/ .invisible { visibility: hidden; } /*Adding .clearfix to an element will ensure that it always fully contains its floated children.*/ .clearfix,.row,.wrapper{zoom:1;} .clearfix:before, .clearfix:after, .row:before, .row:after, .wrapper:before, .wrapper:after { content: " "; display: table; } .clearfix:after, .row:after, .wrapper:after { clear: both; } .clear { clear: both; } /* Floated elements */ .floatLeft { float: left; } .floatRight { float: right; } img.floatLeft, figure.floatLeft { margin: 0 1em 1em 0; } img.floatRight, figure.floatRight { margin: 0 0 1em 1em; } /* Add Paddings and Margins */ .padding1 { padding: 0.7em !important; } .paddingtop1 { padding-top: 0.7em !important; } .padding2 { padding: 1.5em !important; } .margin1 { margin-bottom: 1em !important; } .margin2 { margin-bottom: 3em !important; } .nomargin { margin: 0 !important } /* Text Alignment */ .alignLeft { text-align: left; } .alignRight { text-align: right; } .alignCenter { text-align: center; } /* Hidden by default, shows as a block in mobiles */ .mobileShow { display: none; } /* Image Cropping */ .imgCrop { width: 100%; overflow: hidden; position: relative; height: 270px; } .imgCrop img { position: absolute; width: auto; max-width: none; } .imgCrop img.focusLeft { position: absolute; left: 0; margin-left: 0px } .imgCrop img.focusRight { position: absolute; left: auto; right: 0; margin-left: 0px; } .scale { max-width: 100%; } /* Horizontal List */ .horizontalList { list-style: none; margin-left: 1em } .horizontalList li { display: inline; margin-right: 1em } .horizontalList img { text-decoration: none; vertical-align: middle; margin-right: 0.5em } /* Sizing */ .full_width { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; } /* `design elements ==========================================================================*/ /* ----- Color `Boxes ----- */ .whiteBox, .orangeBox, .greyBox, .silverBox, .lgreyBox { padding: 0.4em; } /* White Box */ .whiteBox { border: solid 1px #d2d2d2; background-color: #FFFFFF; } /* Orange Box */ .orangeBox { border: solid 1px #CF4520; background-color: #CF4520; color: #FFFFFF; } .orangeBox a, .contentRow .orangeBox a { color: #FFFFFF; } .orangeBox a:hover, .orangeBox a:focus, .orangeBox a:active, .contentRow .orangeBox a:hover, .contentRow .orangeBox a:focus, .contentRow .orangeBox a:active, .orangeBox a:visited { /* color: #e7af90; */ /*color: #5b6770; 20140402 DWIC - contrast */ color:#fff; } /* Grey Box */ .greyBox { border: solid 1px #5B6770; background-color: #5B6770; color: #FFFFFF; } .greyBox a, .contentRow .greyBox a { color: #E3E3E3; } .greyBox a:hover, .greyBox a:focus, .greyBox a:active, .contentRow .greyBox a:hover, .contentRow .greyBox a:focus, .contentRow .greyBox a:active { color: #FFFFFF; } /* Silver Box */ .silverBox { border: solid 2px #FFFFFF; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5); background: #FAFAFA; /* Old browsers */ /*=DWIC*/ /*background: linear-gradient(to bottom, #ffffff 0%, #ededed 100%); W3C */ /* `vendor */ /*background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%); FF3.6+ */ /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ededed)); Chrome,Safari4+ */ /*background: -webkit-linear-gradient(top, #ffffff 0%, #ededed 100%); Chrome10+,Safari5.1+ */ /*background: -o-linear-gradient(top, #ffffff 0%, #ededed 100%); Opera 11.10+ */ /* background: -ms-linear-gradient(top, #ffffff 0%, #ededed 100%); IE10+ */ } /* Light Grey Box */ /* =DWIC */ .lgreyBox { border: solid 1px #d2d2d2; background-color: #fafafa; color: #5B6770; } /* ----- Curved `Shadows ----- */ .shadowCurl, .shadowLeft, .shadowRight { position: relative; } .shadowCurl:before, .shadowCurl:after, .shadowLeft:before, .shadowRight:after { position: absolute; bottom: 0.5em; width: 40%; height: 1px; background-color: #333333; z-index: -1; content: " "; box-shadow: 0px 0px 8px 8px #333333; opacity: 0.5; } .shadowCurl:before, .shadowLeft:before { left: 1em; transform: rotate(-3.5deg); /* `vendor */ -ms-transform: rotate(-3.5deg); /* IE 9 */ -moz-transform: rotate(-3.5deg); /* Firefox */ -webkit-transform: rotate(-3.5deg); /* Safari and Chrome */ -o-transform: rotate(-3.5deg); /* Opera */ } .shadowCurl:after, .shadowRight:after { right: 1em; transform: rotate(3.5deg); /* `vendor */ -ms-transform: rotate(3.5deg); /* IE 9 */ -moz-transform: rotate(3.5deg); /* Firefox */ -webkit-transform: rotate(3.5deg); /* Safari and Chrome */ -o-transform: rotate(3.5deg); /* Opera */ } .span_1.shadowCurl:before, .span_3_of_3.shadowCurl:before, .span_4_of_4.shadowCurl:before { transform: rotate(-1deg); /* `vendor */ -ms-transform: rotate(-1deg); /* IE 9 */ -moz-transform: rotate(-1deg); /* Firefox */ -webkit-transform: rotate(-1deg); /* Safari and Chrome */ -o-transform: rotate(-1deg); /* Opera */ } .span_1.shadowCurl:after, .span_3_of_3.shadowCurl:after, .span_4_of_4.shadowCurl:after { transform: rotate(1deg); /* `vendor */ -ms-transform: rotate(1deg); /* IE 9 */ -moz-transform: rotate(1deg); /* Firefox */ -webkit-transform: rotate(1deg); /* Safari and Chrome */ -o-transform: rotate(1deg); /* Opera */ } .span_2_of_4.shadowCurl:before { transform: rotate(-2deg); /* `vendor */ -ms-transform: rotate(-2deg); /* IE 9 */ -moz-transform: rotate(-2deg); /* Firefox */ -webkit-transform: rotate(-2deg); /* Safari and Chrome */ -o-transform: rotate(-2deg); /* Opera */ } .span_2_of_4.shadowCurl:after { transform: rotate(2deg); /* `vendor */ -ms-transform: rotate(2deg); /* IE 9 */ -moz-transform: rotate(2deg); /* Firefox */ -webkit-transform: rotate(2deg); /* Safari and Chrome */ -o-transform: rotate(2deg); /* Opera */ } /* ----- `Borders and `Shadows ----- */ .whiteBorder { border: solid 3px #FFFFFF; } .greyBorder { border: 1px solid #999; } .thickBorder { border: 5px solid #333; border-radius: 5px; } .noTopBorder { border-top: none; } /* ----- `Shadows ----- */ .shadow { /*box-shadow: 0 10px 6px -6px #999999; -moz-box-shadow: 0 10px 6px -6px #999999; -webkit-box-shadow: 0 10px 6px -6px #999999;*/ box-shadow: 0 2px 4px 0 rgba(50, 50, 50, 0.75); -moz-box-shadow: 0 2px 4px 0 rgba(50, 50, 50, 0.75); -webkit-box-shadow: 0 2px 4px 0 rgba(50, 50, 50, 0.75); } .fadeShadow { background: url(../images/layout/shadow.jpg) no-repeat center bottom; background-size: 100% 52px; padding-bottom: 80px; } /* ----- `Callouts ----- */ .callout { line-height: 1.5; border: 1px solid #999; background: #EDEDED; border-left: 2px solid #CF4520; } .callout p { margin: 0; } .callout-link { text-align: center; color: #FFF; background: #5B6770; min-height: 4.5em; margin: 0; } .callout-link a { font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.5em; margin-top: 10px; padding: 5px 10px; display: inline-block; text-decoration: none; color: #FFF; background: #CF4520; } .callout-link a:hover { background-color: #FFF; color: #CF4520 } /* ----- Grey `Form ----- */ .greyForm { font-size: 1.2em; line-height: 1.5; padding: 1.5em 2em; background: #ECECEC; border: 5px solid #F8F8F8; border-radius: 5px; } .greyForm legend { display: none; } .greyForm div { margin-bottom: 10px; } .greyForm label, .greyForm input[type=text], .greyForm input[type=password], .greyForm input[type=email], .greyForm select, .greyForm textarea { display: block; } .greyForm input[type=text], .greyForm input[type=password], .greyForm input[type=email], .greyForm select, .greyForm textarea { width: 96%; padding: .5em 1%; color: #666; } .lt-ie9 .greyForm select, .lt-ie9 .greyForm input[type=checkbox] { margin-left: 2%; } .lt-ie9 .greyForm label.error { margin-left:2%;} .greyForm textarea { min-height: 6em; } .greyForm button { font-weight: bold; height: 40px; line-height: 1; padding: 0 2em; border: none; border-radius: 5px; color: #FFF; background: #45494d; background: linear-gradient(to bottom, #45494d 0%, #0d0d0d 100%); /* `vendor */ background: -moz-linear-gradient(top, #45494d 0%, #0d0d0d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45494d), color-stop(100%, #0d0d0d)); background: -webkit-linear-gradient(top, #45494d 0%, #0d0d0d 100%); background: -o-linear-gradient(top, #45494d 0%, #0d0d0d 100%); background: -ms-linear-gradient(top, #45494d 0%, #0d0d0d 100%); } /* GreyForm inside a modal */ .nyroModalCont .greyForm label, .nyroModalCont .greyForm input[type=text], .nyroModalCont .greyForm input[type=password], .nyroModalCont .greyForm input[type=email], .nyroModalCont .greyForm textarea { display: block; margin: 1%; } .nyroModalCont .greyForm input[type=text], .nyroModalCont .greyForm input[type=password], .nyroModalCont .greyForm input[type=email], .nyroModalCont .greyForm textarea { width: 96%; color: #666; } .nyroModalCont .greyForm input[type=radio], .nyroModalCont .greyForm input[type=checkbox], .nyroModalCont .greyForm select { margin: 1%; } /* ----- Dark Form ----- */ .darkForm { color: white; background-color: #5B6770; padding: 10px 15px; border-radius: 2px; } .darkForm fieldset { margin: 0; padding: 0; border: none; } .darkForm input, .darkForm select, .darkForm textarea { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 5px 8px; border: none; border-radius: 2px; } /* 20140415 DWIC */ .darkForm input[type="text"],.darkForm textarea, .darkForm select, .darkForm input[type="tel"], .darkForm input[type="email"], .darkForm input[type="submit"] { width:98%; } .lt-ie9 .darkForm input[type="text"],.lt-ie9 .darkForm textarea, .lt-ie9 .darkForm select, .lt-ie9 .darkForm input[type="tel"], .lt-ie9 .darkForm input[type="email"] { width:98%; } .darkForm .row { margin: 0 0 10px; } .darkForm input[type="submit"] { font-weight: bold; color: white; background: #CF4520; -webkit-transition: all .5s; transition: all .5s; } .darkForm input[type="submit"]:hover, .darkForm input[type="submit"]:focus, .darkForm input[type="submit"]:active { color: #CF4520; background: white; } /* ----- `Other ----- */ .bigBox { font-size: 1.5em; padding: 1em; min-height: 5.5em; } .heading { font-size: 2.2em; font-style: normal; color: #CF4520; } #lean_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none; } /* = DWIC */ /* Opaque backgrounds for homepage */ .alpha60 { background-color: rgb(1000, 1000, 1000); background-color: rgba(1000, 1000, 1000, 0.6); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; } /* No IE Support */ .lt-ie10 .alpha60{background-color:#fff; filter:progid:none; -ms-filter:none;} /* `Home page elements ==========================================================================*/ /* ----- Heading ----- */ h2.greyBox { padding: 0.8em 0.8em 0.8em 30px; background-image: url(../images/layout/orange-left.gif); background-repeat: repeat-y; background-position: left top; border: none; } a.rss { font-size: 0.8em; color: #E3E3E3; font-family: Arial, Helvetica, sans-serif; font-weight: normal; vertical-align: bottom; text-decoration: none; } a.rss img { margin-left: 0.3em; } a.rss:hover { color: #FFFFFF; } /* ----- Social Media ----- */ .social { font-size: 0.8em; line-height: 1.3; } .social select { width: 85%; } .social button { width: 10%; min-width: 30px; } .social-links { list-style: none; overflow: hidden; } .social-links li { float: left; margin-right: 5px; } /* ----- News Channel ----- */ .news-channel input { width: 70%; } .news-channel button { width: 20%; } /* ----- Stay Informed ----- */ ul.informed { margin: 0; padding: 0; list-style: none; } .informed li { border-bottom: solid 1px #DDD; } .informed li a { display: block; padding: 0.6em; padding-left: 0.5em; border-left: solid 20px #CF4520; text-decoration: none; transition: all 150ms ease; /* `vendor */ -webkit-transition: all 350ms ease; -moz-transition: all 350ms ease; -ms-transition: all 350ms ease; -o-transition: all 350ms ease; } /* DWIC 20140325 - remove arrow icons next to links as they render beneath the link if a span sub is present */ .informed li a[href^="http://"]:after { content:none; } .informed li a:hover { background-color: #FAFAFA; border-left: solid 20px #5B6770; color: #5B6770; } .informed li .sub { display: block; font-size: 0.8em; } /* DWIC 20140519 - adding various colour styles */ .informed.greyOrange li a { border-left: solid 20px #5B6770; } .informed.greyOrange li a:hover { background-color: #FAFAFA; border-left: solid 20px #CF4520; color: #404040; } .informed.greyDark li a { border-left: solid 20px #222; background-color:#F1F1F1; } .informed.greyDark li a:hover { background-color: #5B6770; border-left: solid 20px #CF4520; color: #FAFAFA; } .informed.whiteDark li a { border-left: solid 20px #F1F1F1; background-color:#FFFFFF; } .informed.whiteDark li a:hover { background-color: #222; border-left: solid 20px #5B6770; color: #FAFAFA; } /* ----- Our People ----- */ .ourPeople { padding: 1em; } .ourPeople figure { margin-bottom: 1em; } /* ----- Global Operations Map ----- */ .globalOppsMap { overflow: hidden; position: relative; border: solid 1px #DDD; border-top: none; background-image: /* url(../images/layout/mapLarge.jpg) -- */; background-color: #FFF; background-repeat: no-repeat; background-position: right top; line-height: 1em; z-index: 1; } .globalOppsMap ul { list-style: none; font-size: 0.9em; width: 150px; float: left; border-right: solid 1px #DDD; background-color: #FFFFFF; background-color: rgba(255,255,255,0.75); } .globalOppsMap li { border-bottom: solid 1px #DDD; } .globalOppsMap li:last-child { border-bottom: none; } .globalOppsMap a { color: #333333; display: block; text-decoration: none; padding: 0.1em; } .globalOppsMap .sub { font-size: 0.75em; display: block; color: #666666; } .globalOppsMap .marker { width: 8px; height: 8px; position: absolute; z-index: -1; display: block; background-color: #999999; border-radius: 100px; top: 0; right: 0; border: solid 2px #ffffff; } .globalOppsMap a:hover, .globalOppsMap a:focus, .globalOppsMap a:active { color: #ffffff; background-color: #CF4520; } .globalOppsMap a:hover .sub, .globalOppsMap a:focus .sub, .globalOppsMap a:active .sub { color: #FFFFFF; } .globalOppsMap a:hover .marker, .globalOppsMap a:focus .marker, .globalOppsMap a:active .marker { background-color: #CF4520; } /* ----- Defence News Carousel ----- */ #newsCarousel h3 { margin-bottom: 0.5em; } /* ----- Video Carousel ----- */ .video-carousel {} .video-carousel .slide {} .video-carousel .slide h3, .slide-title { position: absolute; background-color: white; padding: 0.5em; left: 0; bottom: 1em; color: #5B6770; font-family: Arial, Helvetica, sans-serif; font-weight: normal; border-bottom: solid 1px #DDD; z-index: 10; } .video-carousel a { position: relative; } .video-carousel a .icon { position: absolute; border:1px solid red; display: block; left: 50%; top: 50%; width: 76px; height: 76px; margin-left: -38px; margin-top: -38px; opacity: .5; background: url(../images/layout/play-video.png) no-repeat center center; } .video-carousel a:hover .icon, .video-carousel a:focus .icon, .video-carousel a:active .icon { opacity: .75; } /* Vio player sizing for Flash videos */ .playlist-right-player .vio-playlist-container { height:450px!important; z-index:500!important; } .playlist-right-player .vio-playlist-container .vio-playlist-inner { overflow-y:scroll!important; } .vio-playlist-container .vio-playlist-inner { position:inherit!important; height:100%!important; } /* ----- HTML5 Video tags ------*/ video { width: 100%; height:auto; } /* ----- Images Carousel ----- */ .image-carousel {} .image-carousel .slide { line-height: 1.5; } .image-carousel .slide h3, .image-carousel .slide div { margin: 1em 0; padding: 0 1em; } /* ----- News List ----- */ .newsScroller .article a:active, .newsScroller .article a:link, .newsScroller .article a:visited {text-decoration:underline; color:#222;} .newsScroller .article {width:auto; border-top:2px #fff solid; } .newsScroller .article:hover, .newsScroller .article:hover a {background-color:#5B6770; color:#FAFAFA; /* `vendor */ -webkit-transition: all 350ms ease; -moz-transition: all 350ms ease; -ms-transition: all 350ms ease; -o-transition: all 350ms ease; } .newsScroller .article h1 {font-size:1.4em; font-family: Georgia, "Times New Roman", Times, serif; color:#222;} .newsScroller .article cite { display:block;font-size: 0.8em;font-style: italic;font-weight: normal;padding-bottom:1em; } .newsScroller .article img { display:block; -webkit-transition:0.5s linear all; transition:0.5s linear all;} .newsScroller .on .article img {display:block; -webkit-transition:0.5s linear all; transition:0.5s linear all; } .newsScroller .on .article {background-color:#fff;-webkit-transition:0.5s linear all; transition:0.5s linear all;} .newsScroller .article a:hover { text-decoration:none; color:#FaFaFa; } /* `Subsite page elements ==========================================================================*/ /* ----- `header ----- */ /* = DWIC */ #subsite header h1.sitename { float: right; font-size: 1.8em; font-weight: bold; font-style: italic; padding: 0 2%; margin-top: 15px; } #subsite header h2.subsitename { float: right; clear:both; font-size: 1.2em; font-weight: bold; font-style: italic; padding: 0 2%; margin-top: 5px; } /* =DWIC */ /* ----- `no subsite Main Nav seperator ----- */ .subsiteNoNavSeperator { height: 10px; background-color: #5B6770; background-image: url(../images/layout/copy-orange.gif); background-repeat: repeat-y; background-position:0 0; } /* =DWIC */ /* ----- `breadCrumbss ----- */ .breadCrumbs { list-style: none; overflow: hidden; font-size: 1em; } .breadCrumbs li:first-child { font-weight:bold; padding-right: 5px; } .breadCrumbs li:last-child { padding:.2em 0 0 40px; } .breadCrumbs li { float: left; line-height:2em; } .breadCrumbs li a { color: #fff; text-decoration: none; padding: 5px 0 5px 55px; background: #fff; /* For old IE */ background: hsla(0,0%,13%,1); position: relative; display: block; float: left; } /* Set breadcrumb styles for old ie browsers */ .lt-ie8 .breadCrumbs li { padding: 0px 15px 0 0; } .lt-ie8 .breadCrumbs li a { color:#222; text-decoration:underline; padding: 0; } .lt-ie8 .breadCrumbs li a:hover { color:#CF4520; } .lt-ie8 .breadCrumbs li a:before { content: ">"; border:1px solid red; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid hsla(0,0%,13%,1); position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadCrumbs li a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid hsla(0,0%,13%,1); position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadCrumbs li a:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .breadCrumbs li:first-child a { padding-left: 10px; } .breadCrumbs li:nth-child(2) a { background: hsla(0,0%,13%,1);} .breadCrumbs li:nth-child(2) a:after { border-left-color: hsla(0,0%,13%,1); } .breadCrumbs li:nth-child(3) a { background: hsla(0,0%,23%,1); } .breadCrumbs li:nth-child(3) a:after { border-left-color: hsla(0,0%,23%,1);} .breadCrumbs li:nth-child(4) a { background: hsla(0,0%,33%,1); } .breadCrumbs li:nth-child(4) a:after { border-left-color: hsla(0,0%,33%,1); } .breadCrumbs li:nth-child(5) a { background: hsla(0,0%,43%,1); } .breadCrumbs li:nth-child(5) a:after { border-left-color: hsla(0,0%, 43%,1);} .breadCrumbs li:last-child a { background: transparent !important; color: black; pointer-events: none; cursor: default; } .breadCrumbs li a:hover { background: hsla(13,73%,47%,1); color:#fff; } .breadCrumbs li a:hover:after { border-left-color: hsla(13,73%,47%,1); !important; } .lt-ie8 .breadCrumbs { } .subsiteNav, .secondaryNav { font-size: 1.2em; color: #fff; background: #666D70; background-color: #666D70; } .subsiteNav ul, .secondaryNav ul { border-top: 1px solid #464646; border-bottom: 1px solid #464646; } .subsiteNav li, .secondaryNav li { border: 1px solid #464646; } .subsiteNav a, .secondaryNav a { display: block; padding: 10px 0; text-decoration: none; color: white; height: auto !important; /* For the non accordion item height. */ } .subsiteNav a:hover, .subsiteNav a:focus, .subsiteNav a:active, .subsiteNav .selected > a, .secondaryNav a:hover, .secondaryNav a:focus, .secondaryNav a:active, .secondaryNav .selected > a { color: #FFF; background-color: #CF4520; } /* `subsiteNav only */ .subsiteNav { font-size: 0; } .subsiteNav ul { overflow: hidden; text-align: left; /*Align navigation to the left */ } .subsiteNav li { font-size: 17px; font-size: 1.0625rem; display: inline-block; margin: 0 -1px -1px 0; border-style: none solid solid; overflow: hidden; } .subsiteNav li:first-child { border-left-style: solid; } .subsiteNav a { display: block; padding: 10px 20px; } .subsiteNav li a:hover { } .lt-ie8 .subsiteNav li { display: inline; } .lt-ie8 .subsiteNav li a { display: inline-block; } /* `secondaryNav only */ .secondaryNav { padding: 20px; } .secondaryNav h2 { font-size: 1.2em; } .secondaryNav h3 { font-family: 'Roboto', helvetica, Arial, sans-serif; font-weight: normal; font-size: 1em; } .lt-ie8 .secondaryNav h3 { border: 1px solid #5B6770; /*bug fix for IE7 */ } .secondaryNav ul { border-style: solid none none; margin: 20px -20px -20px; } .secondaryNav li { border-style: none none solid; } .secondaryNav li a { padding-left: 30px !important; padding-right: 20px; } .secondaryNav li a strong { font-weight: normal; color: #FFF; } .secondaryNav ul.subNavAccordionMenu { padding-top:0px; } .secondaryNav .ui-accordion-icons { padding-left: 0px !important; } .secondaryNav ul.subNavAccordionMenu li a span { padding-left: 5px; /* For font icon if used for home page */ } .secondaryNav .ui-accordion .ui-accordion-header-active { cursor:pointer !important; /* Fix for non drop down menu items in acordion menu */ } .secondaryNav .ui-accordion .ui-accordion-header .ui-accordion-header-icon { left:0.2em; } .secondaryNav ul.subNavAccordionMenu li .ui-icon-triangle-1-e, .secondaryNav ul.subNavAccordionMenu li .ui-icon-triangle-1-s {background-image:none;} .secondaryNav ul.subNavAccordionMenu h3 .ui-icon-triangle-1-e {background: url('_master/images/layout/ui-icons_ffffff_256x240.png') -32px -16px no-repeat; } .secondaryNav ul.subNavAccordionMenu h3 .ui-icon-triangle-1-s {background: url('_master/images/layout/ui-icons_ffffff_256x240.png') -64px -16px no-repeat; } .secondaryNav ul.subNavAccordionMenu li div{ padding: 0 0 0 30px; background-color: #222222; font-size:.8em; } .secondaryNav ul.subNavAccordionMenu li div ul { margin:0 0 0 -30px; } .secondaryNav ul.subNavAccordionMenu li div ul li a { padding-left:40px; } /* ----- `Colour Overides =DWIC ----- */ /*'Branding Orange #CF4520, 'Branding grey #5B6770, (Heading bg's, design elements) 'Charcoal #222222, (Links and dark bgs) 'Defence dark grey #404040 (Fonts) 'Light grey #DDDDDD, (Borders) 'Lighter grey #F1F1F1 (Good for hovers) 'Super light grey #FAFAFA (Box bgs)*/ /* Backgrounds */ .orangeBG {background-color:#CF4520;} .blackBG {background-color:#222;} .whiteBG {background-color:#fff; } .darkGreyBG {background-color:#5B6770;} .lightGreyBG1{background-color:#DDD;} .lightGreyBG2{background-color:#F1F1F1;} .lightGreyBG3{background-color:#FAFAFA;} /* Fonts */ .orangeFont, a.orangeFont {color:#CF4520;} .blackFont, a.blackFont{color:#222;} .whiteFont, a.whiteFont {color:#fff;} .darkGreyFont, a.darkGreyFont {color:#5B6770;} .lightGreyFont, a.lightGreyFont{color:#F1F1F1;} /* `media queries ==========================================================================*/ /* These media queries are written to only be read by fully supporting browsers. See `reference. */ @media screen and (min-width: 0px) { .responsive .wrapper { width: 100%; max-width: 1200px; } li.viewDesktop {display:none;} /*=DWIC*/ } @media screen and (max-width: 940px) { .responsive .medHide{display:none;} .responsive .globalOpps ul{width:100%;} .responsive .ips .span_2_of_4{ float:none; width:100%; margin:0;} } @media screen and (max-width: 700px) { .responsive body {background-image:none;} .responsive .mobileShow { display:block } .responsive .mobileHide {display:none;} .responsive .fadeShadow { background: none; } /* ----- `layout ----- */ .responsive .padding1{padding:1em;} .responsive .row{margin-bottom:1em;} .responsive .row .row{margin-bottom:0em;} .responsive .row .padding1{padding-bottom:0em;} .responsive .row .padding1:last-child{padding-bottom:1em;} .responsive .col{margin-bottom:1em;} .responsive .col:last-child{margin-bottom:0em;} .responsive footer > .padding2, .responsive .copy{background-image:none;} /* Larger columns adopt full width*/ .responsive .span_4_of_4, .responsive .span_3_of_4, .responsive .span_2_of_4, .responsive .span_1_of_4, .responsive .span_3_of_3, .responsive .span_2_of_3, .responsive .span_1_of_3, .responsive .span_2_of_4 .span_2_of_4, .responsive .span_3_of_4 .span_2_of_4, .responsive .span_3_of_4 .span_1_of_3, .responsive .span_3_of_4 .span_2_of_3, .responsive .span_2_of_3 .span_2_of_4, .responsive .span_2_of_3 .span_1_of_3, .responsive .span_2_of_3 .span_2_of_3 {width: 100%; margin-left:0} /* Small columns are intentionally small */ .responsive .span_2_of_4 .span_1_of_4, .responsive .span_2_of_4 .span_3_of_4, .responsive .span_2_of_4 .span_1_of_3, .responsive .span_2_of_4 .span_2_of_3{margin-bottom:0; margin-left:4.191458139947426%;} .responsive .span_2_of_4 .span_1_of_4{width:21.85640639503943%;} .responsive .span_2_of_4 .span_3_of_4{width:73.95213546501314%;} .responsive .span_2_of_4 .span_1_of_3{width:30.53902790670172%;} .responsive .span_2_of_4 .span_2_of_3{width:65.26951395335086%;} .responsive .span_3_of_4 .span_1_of_4, .responsive .span_3_of_4 .span_3_of_4{margin-bottom:0; margin-left:2.729366670565565%;} .responsive .span_3_of_4 .span_1_of_4{width:22.95297499707583%;} .responsive .span_3_of_4 .span_3_of_4{width:74.3176583323586%;} .responsive .span_2_of_3 .span_1_of_4, .responsive .span_2_of_3 .span_3_of_4{margin-bottom:0; margin-left:3.093681795535596%;} .responsive .span_2_of_3 .span_1_of_4{width:22.6797386533483%;} .responsive .span_2_of_3 .span_3_of_4{width:74.2265795511161%;} .responsive .col .col:first-child{margin-left:0;} /*.responsive .slide .span_2_of_5 { width:33% !important; }*/ /* may need to comment these out if carousel is updated */ /*.responsive .slide .span_3_of_5 { width:58%; }*/ /* ----- `header ----- */ .responsive header .quote { float: none; border: none; padding: 0; } .responsive header .quote br { display: none; } .responsive header .quote { font-size:1em; /* =DWIC */ } /* ----- `navs ----- */ .responsive .mainNav { display: none; } .responsive .subsiteNav li { width: 50%; border-bottom-style: solid; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .responsive .closeNav { display:none; } /* ----- `touch `swipe----- */ .touch.responsive .wrapper { overflow-x: hidden; } .touch.responsive .swipe { overflow: visible !important; } .touch.responsive .swipe .swipe-slide { padding: 1em; } /* default bg color: white */ .touch.responsive .swipe .carousel-slider { background: #FFF; box-shadow: 0 0 5px rgba(0,0,0,0.25); } /* color exceptions */ .touch.responsive footer .swipe .carousel-slider { background: #2A2A2A; box-shadow: 0 0 5px rgba(0,0,0,1); } /* remove visual controls */ .touch.responsive .carousel-controls { display: none; } /* =DWIC back to top hide */ .topLink span { display:none; } /* =DWIC responsive tables */ .responsive table,.responsive thead,.responsive tbody,.responsive th,.responsive td,.responsive tr {display:block;} .responsive thead tr { position:absolute;top:-9999px;left:-9999px;} .responsive tr {border:1px solid #DDD;} .responsive td {border:none;border-bottom:1px solid #eeeeee;position:relative;padding-left:50%;} .responsive td:before {position:absolute;top:0.5em;left:0.5em;width:45%;padding-right:0.8em;white-space:nowrap;} .responsive table tr td:before {content: attr(data-label);} /* =DWIC responsive news list */ .newsScroller .article a:active, .newsScroller .article a:link, .newsScroller .article a:visited {text-decoration:none; } .newsScroller .article { width:auto;border-top:2px #fff solid; } .newsScroller .article h1 {font-size:1em;font-family:Helvetica, Arial, sans-serif;} .newsScroller .article cite { display:none; } .newsScroller .article p { display:none; } .newsScroller .article a:hover { text-decoration:underline; } /* float footer image */ .responsive .footerTag > img { padding-right:0px; } } @media screen and (max-width: 400px) { /* `layout: Small columns adopt full width */ .responsive .col .col{width:100%; margin-left:0; margin-bottom:1em;} .responsive .col .col:last-child{margin-bottom:0;} .responsive .subsiteNav li { float: none; display: block; width: auto; } .responsive .closeNav { display:none; } .responsive .slide-title { position:relative; bottom:0;border-bottom:none; } .responsive .slide-title h3 { font-size:1em; } /*.responsive .slide .span_2_of_5 { width:38%; }*/ /* may need to comment these out if carousel is updated */ /*.responsive .slide .span_3_of_5 { width:58%; }*/ /* = DWIC */ /* Opaque backgrounds for homepage */ .alpha60 { bckground-color: #fff; background-color: rgba(1000, 1000, 1000, 1.0); filter:none; -ms-filter:none; } /* float footer image */ .responsive .footerTag > img { padding-right:0px; } } /* Vio player flash video support */ @media all and (max-width: 800px) and (min-width: 641px) { .vio-container { width:100%!important; height:500px!important; z-index:9999!important; } .playlist-right-player .vio-playlist-container { width:98%!important; height:200px!important; z-index:9999!important; } } @media all and (max-width: 360px) { .vio-container { width:100%!important; height:400px!important; border:none!important; z-index:9999!important; position:relative!important; } .playlist-right-player .vio-playlist-container { width:98%!important; height:200px!important; z-index:9999!important; border:none!important; clear:none!important; } } @media all and (max-width: 640px) and (min-width: 361px) { .vio-container { width:100%!important; height:350px!important; border:none!important; z-index:9999!important; position:relative!important; } .playlist-right-player .vio-playlist-container { width:98%!important; height:200px!important; z-index:9999!important; border:none!important; clear:none!important; } } /* @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { } */ /* `print styles, `media ==========================================================================*/ @media print { @page {margin:0.5cm;} * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow:none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 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; } */ #global_nav_main_wrapper, .subsiteNav, .secondaryNav, nav, footer.wrapper,.footerTag,.copy.wrapper { display:none; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* 20140516 DWIC - Hack for IE10 Mobile */ @-ms-viewport{ width: device-width; } /* `reference Creating Different CSS3 Box Shadows Effects http://www.paulund.co.uk/creating-different-css3-box-shadows-effects New image replacement http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ Techniques For Gracefully Degrading Media Queries: http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/ `ref1: image moves on hover - chrome opacity issue http://stackoverflow.com/questions/12980153/image-moves-on-hover-chrome-opacity-issue */