/* Author *******Author Name*********** TOC 1. Colours - Set your colours 2. Globals - body, container/wrappers and main page structure 3. Headings - H1-H6 and all variants 4. Typography - All base typo here, rem with px fallback 5. Links - If it's clickable, it lives here 6. Navigation - Main > Sub > Footer 7. Forms - Including search 8. Header - In menu order e.g. Home > Services > About etc...(if it belongs to a page it needs a comment head) 9. Content - In menu order e.g. Home > Services > About etc... 10. Footer - In menu order e.g. Home > Services > About etc... 11. Transitions - Including animations 12. Reusables - Clearfix buttomns etc */ /* 1. Colours ===================*/ /*2. Globals ===================*/ body {background-color:#f3f6fa;} #wrapper {width:100%; margin:0 auto; /* margin:0 auto 0 auto; */} #top_wrap {margin:0 auto; width:992px; height: 123px; background:url(../img/bg/b_header.png) repeat-x top left;} #logo {float:left; padding:0px; margin:0px; width:591px; height:123px;} #head_login_wrap {float:left; width:353px; height:123px; background:url(../img/bg/b_head_form.png) no-repeat top left;} #head_login {float:left; width:298px; height:83px; margin-top:38px; padding-left:12px;} .head_login_form {height: 18px; font-size: 13px; color: #fff; border:0px; font-family: Tahoma, Arial, sans-serif; background-color: #2687d4;} #head_login_button {float:left; margin-top:49px; width:37px; height:37px;} #head_login_user {color:#ffffff; text-align:right; padding-right:10px;} #head_login_password {color:#ffffff; padding-top:17px; padding-right:10px; text-align:right;} #mid_wrap {margin:0 auto; height:auto; overflow: hidden; width:992px; background-color:#fff; padding-bottom:25px;} #left-column {width:682px; float:left; padding:20px 0px 0px 0px;} #right-column {width:300px; float:right; padding:20px 0px 0px 0px;} #news-panel {width:300px; float:right; padding-bottom:13px; height:288px; background:url(../img/bg/b_home_news.gif) no-repeat top left;} #s7 { width: 257px; height: 185px; margin-top:50px; margin-left:15px;} #s7 div { width: 257px; height: 175px; padding:0px; color: #333; text-align: left; font-size: 12px; overflow: hidden; color:#686868;} #s7 p {font-size:12px; line-height:22px; color:#686868; text-align:left;} #s7 a {color:#028efe;} #s7 a:hover {color:#028efe;} #news_nav a, #s7 strong { margin: 0px; padding: 0; text-decoration: none; font-weight:bold; color:#686868; font-size:16px;} #news_nav a.activeSlide { background: #ea0 } #news_nav a:focus { outline: none; } #output { text-align: left; } #news_nav {width:272px; height:40px; padding-top:5px;} #news_nav_left {float:left; width:55px; height:32px; padding-left:15px;} #news_nav_right {float:right;} #wa-map {width:300px; float:right;} .foot-wrap {position: relative; width: 100%; background-color:#181818; font-size: 11px; color: #848484; line-height: 20px; height: 320px; border-top:1px solid #9b9da0; clear:both;} #footer-main {margin:0 auto; width:992px;} #footer-left {width:270px; float:left; padding-left:20px; padding-right:51px;} #footer-mid {width:270px; float:left; padding-left:20px;} #footer-right {width:270px; float:right; padding-right:20px;} #footer-bottom-left {width:470px; font-size:11px; color:#455560; float:left; padding-left:20px; padding-top:4px; padding-bottom:4px;} #footer-bottom-right {width:470px; float:right; text-align:right; padding-right:20px; padding-top:4px; padding-bottom:4px;} #home_slideshow {float:left; display: block; padding-bottom:13px; width: 681px; height: 288px;} #home_ad_left {float:left; width:336px; padding-right:9px; padding-bottom:13px;} #home_ad_right {float:left; width:336px; padding-bottom:13px;} #home_logos_bg {float:left; height:81px; width:681px; background:url(../img/bg/b_home_logos.png) no-repeat top left;} #home_logos {float:left; padding-left:70px; padding-top:10px;} #content-main {width:625px; float:left; padding:3px 0px 25px 0px; font-size:13px; color:#555555; line-height:20px;} #content-main p {font-size:13px; color:#686868; line-height:18px; text-align:left;} #content-main li {font-size:13px; color:#686868; line-height:18px; text-align:left;} .content-img {width:615px; float:left; padding:0px 0px 25px 0px;} .content-img-pic {width:150px; float:left; padding: 4px; border: 1px solid #cbcbcb; margin-top:15px; text-align:center;} .content-img-pic img {padding:5px;} .content-img-txt {width:415px; float:right; font-size:12px; color:#686868; line-height:20px;} .content-img-txt p {font-size:14px; text-align:left;} .img_right {float:right; padding: 4px; border: 1px solid #cbcbcb; margin:0 0 20px 20px; text-align:center;} #content-gallery {width:655px; float:left; padding:3px 0px 25px 0px; font-size:13px; color:#686868; line-height:20px;} .content-gallery-img {width:195px; float:left; padding:0px 20px 20px 0px;} #clear {clear: both;} /*3. Headings ===================*/ h1, h2, h3, h4, h5, h6 { font-family: Tahoma; font-weight: bold; } h1 { margin-bottom: 0.25em; font-size: 24px; line-height: 1.2; color:#0162af; font-weight:normal;} h2 { margin-bottom: 0.75em; font-size: 17px; line-height: 1.2; color:#028efe; font-weight:normal;} h3 { margin-bottom: 0.75em; font-size: 21px; line-height: 1.2; color:#028efe; font-weight:normal;} h4 { margin-bottom: 1em; font-size: 14px; font-size: 1.8rem; line-height: 1.25; font-weight:normal;} h5 { margin-bottom: 1.5em; font-size: 16px; font-size: 1.6rem; } h6 { font-size: 16px; font-size: 1.6rem; } /*4. Typography ===================*/ p, ol, ul, dl, address { margin-bottom: 1.5em; font-size: 16px; font-size: 1.6rem; } p { hyphens: auto; text-align: justify; } ul, ol { margin: 0 0 1.5em 0; padding: 0 0 0 24px; } li ul, li ol { margin: 0; font-size: 16px; font-size: 1.6rem; } dl, dd { margin-bottom: 1.5em; } dt { font-weight: normal; } blockquote { margin: 0 0 1.5em -24px; padding-left: 24px; border-left: 1px solid #bfbfbf; font-style: italic; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } abbr[title] { border-bottom: 1px dotted; cursor: help; } b, strong { font-weight: bold; } dfn { font-style: italic; } hr { display: block; margin: 1em 0; padding: 0; height: 1px; border: 0; border-top: 1px solid #bfbfbf; } ins { background-color: #c3d9e6; color: #000000; text-decoration: none; } mark { background-color: #c3d9e6; color: #000000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: "Monaco", Courier New, monospace; font-size: 14px; font-size: 1.4rem; line-height: 1.5em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 14px; font-size: 1.4rem; } sub, sup { font-size: 12px; font-size: 1.2rem; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /*5. Links ===================*/ a { color: #013568; } a:visited { color: #011b35; } a:hover { color: #011b35; padding: 0 0 0 0; } a:focus { outline: thin dotted; color: #011b35; } a:hover, a:active { outline: 0; } /*6. Navigation ===================*/ /* Main */ #nav {margin:0 auto; width:992px; height:46px; background:url(../img/bg/b_nav.png) repeat-x top left;} /* #nav_embed {width:693px; height:46px; float:left; margin-left:5px;} */ #nav ul {margin: 0; padding: 0; float:left; list-style:none; width:643px; z-index:1000;} #nav ul li {float:left; padding-top: 0px; padding-right:20px; position: relative;} #nav ul li a {font-size:16px; color: #d7d7d7; text-decoration:none; display: block; padding: 14px 0 12px 5px;} #nav ul li a:visited { color: #d7d7d7; text-decoration:none;} #nav ul li a:hover {color: #73c1ff; text-decoration:none;} #nav ul li a:focus {outline: thin dotted; color: #fff; } #nav ul li a:hover, a:active {outline: 0;} #nav ul li ul {display: none; position: absolute; top: 45px; left: 0px; background: #0666b4; width:180px; padding:0px;} #nav ul li:hover ul {display: block;} #nav ul li ul li {float: none; border-bottom:1px solid #4faffd; padding: 0px; color:#fff;} #nav ul li ul li:hover {float: none; background: #064b84; color:#fff;} #nav ul li ul li a { font-size:12px; color:#fff; padding: 10px 10px;} #nav ul li ul li a {display: block; color:#fff;} #nav ul li ul li a:visited { color: #fff; text-decoration:none;} #nav ul li ul li a:hover {color: #fff; text-decoration:none;} #nav ul li ul li a:focus {outline: thin dotted; color: #fff; } #nav ul li ul li ul li {float: none; border-left:1px solid #4faffd; padding: 0px; color:#fff;} #nav ul li ul li ul li:hover {float: none; background: #064b84; color:#fff;} #nav ul li ul li ul li a { font-size:12px; color:#fff; padding: 10px 10px;} #nav ul li ul li ul li a {display: block; color:#fff;} #nav ul li ul li ul li a:hover {color:#fff;} #nav ul li ul li ul li a:visited { color: #fff; text-decoration:none;} #nav ul li ul li ul li a:focus {outline: thin dotted; color: #fff; } #nav ul li ul li ul li ul li {float: none; border-left:1px solid #4faffd; padding: 0px; color:#fff;} #nav ul li ul li ul li ul li:hover {float: none; background: #064b84; color:#fff;} #nav ul li ul li ul li ul li a { font-size:12px; color:#fff; padding: 10px 10px;} #nav ul li ul li ul li ul li a {display: block; color:#fff;} #nav ul li ul li ul li ul li a:hover {color:#fff;} #nav ul li ul li ul li ul li a:visited { color: #fff; text-decoration:none;} #nav ul li ul li ul li ul li a:focus {outline: thin dotted; color: #fff; } /* Author: Craig Erskine Description: Dynamic Menu System - Horizontal/Vertical */ ul#menu_2 { margin: 0 0 0 15px; padding: 0; list-style: none; position: relative; width:643px; z-index:1000;} ul#menu_2 ul { width: 160px; /* Sub Menu Width */ margin: 0; list-style: none; display: none; position: absolute; top: 100%; left: 0; padding:0px; } ul#menu_2 ul ul,ul#menu_2 ul ul ul { top: 0; left: 100%; } ul#menu_2 li { float: left; display: inline; position: relative; } ul#menu_2 ul li { width: 100%; display: block; } /* Root Menu */ ul#menu_2 a { padding-right:20px; float: left; display: block; color: #d7d7d7; font-size: 16px; text-decoration: none; height: 1%; } /* Root Menu Hover Persistence */ ul#menu_2 a:hover,ul#menu_2 li:hover a,ul#menu_2 li.iehover a { color: #FFF; } /* 2nd Menu */ ul#menu_2 li:hover li a,ul#menu_2 li.iehover li a { float: none;} /* 2nd Menu Hover Persistence */ ul#menu_2 li:hover li a:hover,ul#menu_2 li:hover li:hover a,ul#menu_2 li.iehover li a:hover,ul#menu_2 li.iehover li.iehover a { background: #064b84; } /* 3rd Menu */ ul#menu_2 li:hover li:hover li a,ul#menu_2 li.iehover li.iehover li a { background: #0666b4; } /* 3rd Menu Hover Persistence */ ul#menu_2 li:hover li:hover li a:hover,ul#menu_2 li:hover li:hover li:hover a,ul#menu_2 li.iehover li.iehover li a:hover,ul#menu_2 li.iehover li.iehover li.iehover a { background: #064b84; } /* 4th Menu */ ul#menu_2 li:hover li:hover li:hover li a,ul#menu_2 li.iehover li.iehover li.iehover li a {background: #0666b4;} /* 4th Menu Hover */ ul#menu_2 li:hover li:hover li:hover li a:hover,ul#menu_2 li.iehover li.iehover li.iehover li a:hover { background: #064b84; } /* Hover Function - Do Not Move */ ul#menu_2 li:hover ul ul,ul#menu_2 li:hover ul ul ul,ul#menu_2 li.iehover ul ul,ul#menu_2 li.iehover ul ul ul { display: none; } ul#menu_2 li:hover ul,ul#menu_2 ul li:hover ul,ul#menu_2 ul ul li:hover ul,ul#menu_2 li.iehover ul,ul#menu_2 ul li.iehover ul,ul#menu_2 ul ul li.iehover ul { display: block; } #nav_search_wrap {float:left; width:333px; height:46px; background:url(../img/bg/b_nav_search.png) no-repeat top left;} #nav_search {float:left; width:172px; height:46px; margin-top:13px; padding-left:30px;} .nav_search_form {height: 18px; font-size: 13px; color: #181818; border:0px; font-family: Tahoma, Arial, sans-serif; background-color: #f3f6fa;} #nav_search_button {float:left; margin-top:3px; width:37px; height:37px; padding-right:8px;} #nav_icons {float:left; margin-top:11px; width:84px; height:21px;} .nav_social {float:left; width:28px; height:21px;} #footer-main ul {margin:0; padding-top:10px; padding-left:0px; padding-right:20px; list-style:none; width:268px; float:left;} #footer-main li {margin:0; padding:4px 0 4px 0; border-bottom: 1px solid #455560; width:268px; font-size:11px; color:#fff;} #footer-main a {color:#455560; text-decoration:none; display:inline-block; line-height:15px; width:263px; _width: 268px;} #footer-main a:hover {color:#718a9c; text-decoration:underline; display:inline-block;} #foot-head a {color:#ffffff; font-weight:bold; text-decoration:none; display:inline-block; line-height:15px; width:263px; _width: 268px;} #foot-head a:hover {color:#ffffff; font-weight:bold; text-decoration:underline; display:inline-block;} #content-sidenav {width:315px; float:left; padding:20px 0px 95px 0px; min-height:450px;} #content-sidenav ul {margin:0; padding:0px; list-style:none; width:253px; float:left; z-index:998;} #content-sidenav ul li {margin:0; width:253px; font-size:11px; color:#fff;} #content-sidenav a {color:#090909; text-decoration:none; display:inline-block; line-height:20px; width:235px; _width: 268px; padding:4px 0 4px 18px; background-color:#fff; border-bottom: 1px solid #cbcbcb;} #content-sidenav a:hover {color:#fff; text-decoration:none; display:inline-block; background-color:#028efe;} #content-sidenav ul li ul li {float: none; padding: 0px; color:#fff;} #content-sidenav ul li ul li a {color:#686868; text-decoration:none; display:inline-block; line-height:20px; width:225px; _width: 268px; padding:4px 0 4px 28px; background-color:#fff;} #content-sidenav ul li ul li a:hover {color: #fff; text-decoration:none; background-color:#028efe;} #content-sidenav ul li ul li ul li {float: none; padding: 0px; color:#fff;} #content-sidenav ul li ul li ul li a {color:#838383; text-decoration:none; display:inline-block; line-height:20px; width:215px; _width: 268px; padding:4px 0 4px 38px; background-color:#fff;} #content-sidenav ul li ul li ul li a:hover {color: #fff; text-decoration:none; background-color:#028efe;} #content-sidenav ul li ul li ul li ul li a {color:#838383; text-decoration:none; display:inline-block; line-height:20px; width:215px; _width: 268px; padding:4px 0 4px 48px; background-color:#fff;} #content-sidenav ul li ul li ul li ul li a:hover {color: #fff; text-decoration:none; background-color:#028efe;} #content-sidenav li.selected>a {color: #0162af;} /* Author: Craig Erskine Description: Dynamic Menu System - Vertical */ #about-main #menu_3_submenu_1, #members-main #menu_6_submenu_1, #members-main #menu_6_submenu_2, #members-main #menu_6_submenu_3, #members-main #menu_6_submenu_4, #members-main #menu_6_submenu_5, #members-main #menu_6_submenu_6, #members-main #menu_6_submenu_7, #members-main #menu_6_submenu_8, #members-main #menu_6_submenu_9, #members-main #menu_6_submenu_10, #members-main #menu_6_submenu_11, #members-main #menu_6_submenu_12, #members-main #menu_6_submenu_13, #tools-club #menu_6_submenu_2, #tools-club #menu_6_submenu_3, #tools-club #menu_6_submenu_4, #tools-club #menu_6_submenu_5, #tools-club #menu_6_submenu_6, #tools-club #menu_6_submenu_7, #tools-club #menu_6_submenu_8, #tools-club #menu_6_submenu_9, #tools-club #menu_6_submenu_10, #tools-club #menu_6_submenu_11, #tools-club #menu_6_submenu_12, #tools-club #menu_6_submenu_13, #tools-admin #menu_6_submenu_3, #tools-admin #menu_6_submenu_4, #tools-admin #menu_6_submenu_5, #tools-admin #menu_6_submenu_6, #tools-admin #menu_6_submenu_7, #tools-admin #menu_6_submenu_8, #tools-admin #menu_6_submenu_9, #tools-admin #menu_6_submenu_10, #tools-admin #menu_6_submenu_11, #tools-admin #menu_6_submenu_12, #tools-admin #menu_6_submenu_13, #tools-food #menu_6_submenu_2, #tools-food #menu_6_submenu_4, #tools-food #menu_6_submenu_5, #tools-food #menu_6_submenu_6, #tools-food #menu_6_submenu_7, #tools-food #menu_6_submenu_8, #tools-food #menu_6_submenu_9, #tools-food #menu_6_submenu_10, #tools-food #menu_6_submenu_11, #tools-food #menu_6_submenu_12, #tools-food #menu_6_submenu_13, #tools-industrial #menu_6_submenu_2, #tools-industrial #menu_6_submenu_3, #tools-industrial #menu_6_submenu_5, #tools-industrial #menu_6_submenu_6, #tools-industrial #menu_6_submenu_7, #tools-industrial #menu_6_submenu_8, #tools-industrial #menu_6_submenu_9, #tools-industrial #menu_6_submenu_10, #tools-industrial #menu_6_submenu_11, #tools-industrial #menu_6_submenu_12, #tools-industrial #menu_6_submenu_13, #clubs-benefits #menu_6_submenu_1, #clubs-benefits #menu_6_submenu_2, #clubs-benefits #menu_6_submenu_3, #clubs-benefits #menu_6_submenu_4, #clubs-benefits #menu_6_submenu_6, #clubs-benefits #menu_6_submenu_7, #clubs-benefits #menu_6_submenu_8, #clubs-benefits #menu_6_submenu_9, #clubs-benefits #menu_6_submenu_10, #clubs-benefits #menu_6_submenu_11, #clubs-benefits #menu_6_submenu_12, #clubs-benefits #menu_6_submenu_13, #benefits-ace #menu_6_submenu_1, #benefits-ace #menu_6_submenu_2, #benefits-ace #menu_6_submenu_3, #benefits-ace #menu_6_submenu_4, #benefits-ace #menu_6_submenu_7, #benefits-ace #menu_6_submenu_8, #benefits-ace #menu_6_submenu_9, #benefits-ace #menu_6_submenu_10, #benefits-ace #menu_6_submenu_11, #benefits-ace #menu_6_submenu_12, #benefits-ace #menu_6_submenu_13, #benefits-grants #menu_6_submenu_1, #benefits-grants #menu_6_submenu_2, #benefits-grants #menu_6_submenu_3, #benefits-grants #menu_6_submenu_4, #benefits-grants #menu_6_submenu_6, #benefits-grants #menu_6_submenu_8, #benefits-grants #menu_6_submenu_9, #benefits-grants #menu_6_submenu_10, #benefits-grants #menu_6_submenu_11, #benefits-grants #menu_6_submenu_12, #benefits-grants #menu_6_submenu_13, #publications #menu_6_submenu_1, #publications #menu_6_submenu_2, #publications #menu_6_submenu_3, #publications #menu_6_submenu_4, #publications #menu_6_submenu_5, #publications #menu_6_submenu_6, #publications #menu_6_submenu_7, #publications #menu_6_submenu_9, #publications #menu_6_submenu_10, #publications #menu_6_submenu_11, #publications #menu_6_submenu_12, #publications #menu_6_submenu_13, #publications-eclub #menu_6_submenu_1, #publications-eclub #menu_6_submenu_2, #publications-eclub #menu_6_submenu_3, #publications-eclub #menu_6_submenu_4, #publications-eclub #menu_6_submenu_5, #publications-eclub #menu_6_submenu_6, #publications-eclub #menu_6_submenu_7, #publications-eclub #menu_6_submenu_10, #publications-eclub #menu_6_submenu_11, #publications-eclub #menu_6_submenu_12, #publications-eclub #menu_6_submenu_13, #member-events #menu_6_submenu_1, #member-events #menu_6_submenu_2, #member-events #menu_6_submenu_3, #member-events #menu_6_submenu_4, #member-events #menu_6_submenu_5, #member-events #menu_6_submenu_6, #member-events #menu_6_submenu_7, #member-events #menu_6_submenu_8, #member-events #menu_6_submenu_9, #member-events #menu_6_submenu_11, #member-events #menu_6_submenu_12, #member-events #menu_6_submenu_13, #events-agm #menu_6_submenu_1, #events-agm #menu_6_submenu_2, #events-agm #menu_6_submenu_3, #events-agm #menu_6_submenu_4, #events-agm #menu_6_submenu_5, #events-agm #menu_6_submenu_6, #events-agm #menu_6_submenu_7, #events-agm #menu_6_submenu_8, #events-agm #menu_6_submenu_9, #events-agm #menu_6_submenu_12, #events-agm #menu_6_submenu_13, #events-awards #menu_6_submenu_1, #events-awards #menu_6_submenu_2, #events-awards #menu_6_submenu_3, #events-awards #menu_6_submenu_4, #events-awards #menu_6_submenu_5, #events-awards #menu_6_submenu_6, #events-awards #menu_6_submenu_7, #events-awards #menu_6_submenu_8, #events-awards #menu_6_submenu_9, #events-awards #menu_6_submenu_11, #events-awards #menu_6_submenu_13, #events-industry #menu_6_submenu_1, #events-industry #menu_6_submenu_2, #events-industry #menu_6_submenu_3, #events-industry #menu_6_submenu_4, #events-industry #menu_6_submenu_5, #events-industry #menu_6_submenu_6, #events-industry #menu_6_submenu_7, #events-industry #menu_6_submenu_8, #events-industry #menu_6_submenu_9, #events-industry #menu_6_submenu_11, #events-industry #menu_6_submenu_12, #community-main #menu_5_submenu_1, #community-main #menu_5_submenu_2, #community-kokoda #menu_5_submenu_2, #community-free #menu_5_submenu_1 {display:none;} .links_border {border-bottom:1px solid #fff;} .g_page {font-family: helvetica, verdana, sans-serif; height:24px; width:168px;} .g_page a {color:#021936; text-decoration:none; display:inline-block; font-size:12px; line-height:24px; height:24px; width:163px; _width: 168px; padding-left:5px; background-color:#f6f8fa;} .g_page a:hover {color:#021936; text-decoration:underline; display:inline-block; background-color:#f6f8fa;} #bread {display: none; font-size: 12px; width:970px; float:left; color: #b3b3b3; line-height: 16px; padding-left:18px; padding-top:12px; padding-bottom:12px;} #bread a {color:#b3b3b3; text-decoration:none;} #bread a:hover {color:#757575; text-decoration:underline;} .contact-form {font-size: 13px; padding-top:3px; padding-right:10px;} /* Sub */ /* Foot */ /*7. Forms ===================*/ .form1 {height: 22px; font-size: 13px; color: #333333; border:0px; font-family: Tahoma, sans-serif; background-color: #f3f3f3;} .form2 {height: 100px; width: 265px; font-size: 13px; color: #333333; border:0px; font-family: Tahoma, sans-serif; background-color: #f3f3f3;} /*8. Header =======================*/ /* Global (Home)*/ /* Services */ /* About */ /*9. Content ======================*/ /* Global (Home)*/ /* Services */ /* About */ /*10. Footer =======================*/ /* Global (Home)*/ /* Services */ /* About */ /*12. Reusables =======================*/ /* For modern browsers */ /* clearfix */ .cf:before, .cf:after {content:"";display:table;} .cf:after {clear:both;} .cf {zoom:1;} /*13. Slideshow =======================*/ #promoslideshow { position:relative; height:124px; } #promoslideshow DIV { position:absolute; top:0; left:0; z-index:8; opacity:0.0; } #promoslideshow DIV.promo-active { z-index:10; opacity:1.0; } #promoslideshow DIV.promo-last-active { z-index:9; } #promoslideshow2 { position:relative; height:124px; } #promoslideshow2 DIV { position:absolute; top:0; left:0; z-index:8; opacity:0.0; } #promoslideshow2 DIV.promo-active { z-index:10; opacity:1.0; } #promoslideshow2 DIV.promo-last-active { z-index:9; } /* ==|== non-semantic helper classes ======================================== Please define your styles before this section. ========================================================================== */ /* For image replacement */ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } /* Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* Contain floats: h5bp.com/q */ /* ==|== media queries ====================================================== PLACEHOLDER Media Queries for Responsive Design. These override the primary ('mobile first') styles Modify as content requires. ========================================================================== */ @media only screen and (min-width: 480px) { /* Style adjustments for viewports 480px and over go here */ } @media only screen and (min-width: 768px) { /* Style adjustments for viewports 768px and over go here */ } /* ==|== print styles ======================================================= Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ /* a, a:visited { text-decoration: underline; } */ a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* default tooltip */ .css-map li a{ background: #111; background: rgba(0,0,0,.8); color: #eee; font: normal 14px 'Lucida Grande',Arial,sans-serif; padding: .5em 1.2em; text-align: center; text-shadow: 0 1px 0 #000; white-space: nowrap; -moz-border-radius: .6em; -ms-border-radius: .6em; -webkit-border-radius: .6em; border-radius: .6em; } .m500 .css-map li a,.m340 .css-map li a{ font-size: 12px } /* tooltip arrow; when you change its size don't forget to set tooltipArrowHeight variable in the cssMap(); function */ .css-map li a .tooltip-arrow{ bottom: -5px; /* must be the same as a border-width */ border: solid; border-color: #111 transparent; border-color: rgba(0,0,0,.8) transparent; border-width: 5px 5px 0 5px; /* this's a height of the arrow */ margin-left: -5px; /* must be the same as a border-width */ } .css-map li a.tooltip-right .tooltip-arrow{ margin-right: -5px; /* must be the same as a tooltip-arrow border-width */ } .css-map li a.tooltip-top .tooltip-arrow{ /* set tooltip under the arrow */ border-width:0 5px 5px 5px; top: -5px; } /* tooltip style when the region is activated */ .css-map .active-region a{background-color: #111} .css-map .active-region a .tooltip-arrow{border-color: #111 transparent} /* links in the visible list of regions */ .map-visible-list a{ /* color: #eee; */ } .map-visible-list a:hover,.map-visible-list a:focus,.map-visible-list li.focus a{ /* color: #fc0; */ } .map-visible-list a:active,.map-visible-list li.active-region a{ /* color: #cc3; */ } /* default pre-loader */ .map-loader{ background: #111; background: rgba(0,0,0,.8); color: #eee; font: normal 14px 'Lucida Grande',Arial,sans-serif; padding: .6em 1.2em; text-shadow: 0 1px 0 #000; -moz-border-radius: .6em; -ms-border-radius: .6em; -webkit-border-radius: .6em; border-radius: .6em; } .m340 .map-loader{ font-size: 12px } /* link to the search engine - shown in the multipleClick mode */ .map-search-link{ /* your properties goes here */ } .map-search-link:hover,a.map-search-link:focus{ /* selected link style */ } .m340 .map-search-link{ /* style for a specific map size, ex.: font-size: 1em; */ } /* -------------------------------------------------------- * the maps starts here * DO NOT EDIT! * Australia, CSS & jQuery clickable map * http://winstonwolf.pl/clickable-maps/australia.html * version: 4.3 * Copyright (C) 2009 - 2012 Winston_Wolf | All rights reserved */ .css-map-container{margin:0 auto;overflow:hidden;position:relative} .css-map{display:block;left:0;margin:0;list-style:none;padding:0;position:relative} .css-map li{height:0;width:0} .css-map li a{height:auto;margin:-9999em 0 0 0;position:absolute;text-decoration:none;width:auto;z-index:89} .css-map li a:focus{outline:0 none} .css-map-container span{display:block;height:0;left:0;position:absolute;top:-9999px;width:0} .css-map li a.tooltip-right{left:auto;right:0;width:auto} .css-map li a .tooltip-arrow{left:50%;top:auto} .css-map li a.tooltip-middle .tooltip-arrow{display:none} .css-map li a.tooltip-top .tooltip-arrow{bottom:auto} .css-map li a.tooltip-right .tooltip-arrow{left:auto} .css-map-container .cities{top:0;z-index:88} .css-map .bg{padding:0px} .css-map .active-region .bg{z-index:87} .css-map .m{cursor:pointer;z-index:99} .css-map .m span{z-index:89} .map-visible-list{clear:both;overflow:hidden} span.map-loader{height:auto;position:absolute;text-align:center;width:auto;z-index:90} .map-error{background:#111;color:#fd0;padding:1em 0;text-align:center} .map-error b{font-size:1.3em} .map-error a{color:#fd0} /*state position for default map*/ /*kimberly*/#australia_sml .au1 .s1{width: 78px; height: 60px; left: 219px; top: 18px;} #australia_sml .au1 .s2 {height: 31px; left: 255px; top: 79.5px; width: 44px;} /*Pilbara*/#australia_sml .au2 .s1{width: 90px; height: 61px; left: 155px; top: 78px;} #australia_sml .au2 .s2{width: 40px; height: 23px; left: 255px; top: 105px;} /*goldfields*/ #australia_sml .au3 .s1{width: 78px; height: 133px;left: 221px; top: 133px;} #australia_sml .au3 .s2{width: 22px; height: 21px;left: 196px; top: 172px;} #australia_sml .au3 .s3{width: 32px; height: 75px;left: 186px; top: 193px;} /*gascoyne*/#australia_sml .au4 .s1{width: 34px; height: 83px; left: 121px; top: 109px;} #australia_sml .au4 .s2{width: 23px; height: 23px; left: 155px; top: 140px;} /*mid west*/#australia_sml .au5 .s1{width: 43px; height: 37px; left: 175px; top: 133px;} #australia_sml .au5 .s2{width: 46px; height: 27px; left: 151px; top: 163px;} #australia_sml .au5 .s3{width: 45px; height: 21px; left: 135px; top: 191px;} /*perth*/#australia_sml .au6 .s1{width: 11px; height: 14px; left: 138px; top: 224.5px;} /*peel*/#australia_sml .au7 .s1{width: 9px; height: 8px;left: 145px; top: 240px;} /*south west*/#australia_sml .au8 .s1{width: 20px; height: 20px;left: 143.5px; top: 253.5px;} /*wheatbelt*/#australia_sml .au9 .s1{width: 30px; height: 48px; left: 162px; top: 208px;} #australia_sml .au9 .s2{width: 19px; height: 9px; left: 144px; top: 214px;} /*great southern*/#australia_sml .au10 .s1{width: 29px; height: 27px;left: 160px; top: 250px;} /* size: 300 - state hover image position - width and height of what to display here*/ .m340{width:300px} .m340 .australia,.m340 .australia .bg,.m340 .australia-cities{background:transparent url('../img/wa.png') no-repeat 0 0} .m340 .australia,.m340 .australia-cities{height:302px;width:300px} .m340 .australia{background-position:0 0} .m340 .australia-cities{background-position:-308.80px -271.75px} .m340 .australia .m{margin:10005px 0 0 7px} .m340 .australia .m span{font-size:20px} /*kimberly*/.m340 .au1:hover .bg,.m340 .au1.focus .bg,.m340 .au1.active-region .bg{width: 78px; height: 88px; left: 219px; top: 18px}.m340 .au1:hover .bg,.m340 .au1.focus .bg{background-position:-150px -302px}.m340 .au1.active-region .bg{background-position:-150px -302px} /*pilbara*/.m340 .au2:hover .bg,.m340 .au2.focus .bg,.m340 .au2.active-region .bg{width: 142px; height: 61px; left: 155px; top: 78px}.m340 .au2:hover .bg,.m340 .au2.focus .bg{background-position:-150px -398px}.m340 .au2.active-region .bg{background-position:-150px -398px} /*goldfields*/.m340 .au3:hover .bg,.m340 .au3.focus .bg,.m340 .au3.active-region .bg{width: 118px; height: 138px;left: 182px; top: 133px;}.m340 .au3:hover .bg,.m340 .au3.focus .bg{background-position:-151.50px -464.50px}.m340 .au3.active-region .bg{background-position:-151.50px -464.50px} /*gascoyne*/.m340 .au4:hover .bg,.m340 .au4.focus .bg,.m340 .au4.active-region .bg{width: 55px; height: 83px; left: 121px; top: 109px;}.m340 .au4:hover .bg,.m340 .au4.focus .bg{background-position:-51px -303px}.m340 .au4.active-region .bg{background-position:-51px -303px} /*midwest*/.m340 .au5:hover .bg,.m340 .au5.focus .bg,.m340 .au5.active-region .bg{width: 86px; height: 85px; left: 135px; top: 133px;}.m340 .au5:hover .bg,.m340 .au5.focus .bg{background-position:-50px -390px}.m340 .au5.active-region .bg{background-position:-50px -390px} /*perth*/.m340 .au6:hover .bg,.m340 .au6.focus .bg,.m340 .au6.active-region .bg{width: 11px; height:15px; left: 148px; top: 229.5px;}.m340 .au6:hover .bg,.m340 .au6.focus .bg{background-position:-0px -525.5px}.m340 .au6.active-region .bg{background-position:-0px -525.5px} /*peel*/.m340 .au7:hover .bg,.m340 .au7.focus .bg,.m340 .au7.active-region .bg{width: 9px; height: 8px;left: 150px; top: 245px;}.m340 .au7:hover .bg,.m340 .au7.focus .bg{background-position:-0px -544px}.m340 .au7.active-region .bg{background-position:-0px -544px} /*south west*/.m340 .au8:hover .bg,.m340 .au8.focus .bg,.m340 .au8.active-region .bg{width: 20px; height: 25px;left: 143.5px; top: 253.5px;}.m340 .au8:hover .bg,.m340 .au8.focus .bg{background-position:0px -557px}.m340 .au8.active-region .bg{background-position:0px -557px} /*wheatbelt*/.m340 .au9:hover .bg,.m340 .au9.focus .bg,.m340 .au9.active-region .bg{width: 46px; height: 48px;left: 143px; top: 203.50px;}.m340 .au9:hover .bg,.m340 .au9.focus .bg{background-position:-50px -474.5px}.m340 .au9.active-region .bg{background-position:-50px -474.5px} /*great southern*/.m340 .au10:hover .bg,.m340 .au10.focus .bg,.m340 .au10.active-region .bg{width: 28px; height: 32px; left: 160px; top: 248.5px;}.m340 .au10:hover .bg,.m340 .au10.focus .bg{background-position:-50px -525px}.m340 .au10.active-region .bg{background-position:-50px -525px} /*tooltip*/ .m340 .au1 a{left:250.57px;top:48.52px} .m340 .au1 a.tooltip-right .tooltip-arrow{right:49.41px} .m340 .au2 a{left:219px;top:109px} .m340 .au2 a.tooltip-right .tooltip-arrow{right:61.76px} .m340 .au3 a{left:251px;top:202px} .m340 .au3 a.tooltip-right .tooltip-arrow{right:72.41px} .m340 .au4 a{left:147px;top:149px} .m340 .au4 a.tooltip-right .tooltip-arrow{right:68.82px} .m340 .au5 a{left:179px;top:175px} .m340 .au6 a.tooltip-right .tooltip-arrow{right:139.40px} .m340 .au6 a{left:155px;top:237px} .m340 .au6 a.tooltip-right .tooltip-arrow{right:64.41px} .m340 .au7 a{left:155px;top:250px} .m340 .au7 a.tooltip-right .tooltip-arrow{right:72.35px} .m340 .au8 a{left:153px;top:265px} .m340 .au8 a.tooltip-left .tooltip-arrow{left:72.35px} .m340 .au9 a{left:171px;top:228px} .m340 .au9 a.tooltip-left .tooltip-arrow{left:72.35px} .m340 .au10 a{left:174px;top:265px} .m340 .au10 a.tooltip-left .tooltip-arrow{left:72.35px} #australia_sml { padding-top: 0px; margin-top: 0px; background: url(../img/gen/temp_map.gif) no-repeat; clear: both; } /*contains border of wa map*/ /* --------------------------------------------------------end of the maps */ input#user,input#password { overflow: visible; margin-bottom: 0.5em; padding: 3px; border: 1px solid lightgrey; width: 200px; } button#submit_button { width: 208px; padding: 3px; border: 1px solid gray; background-color: lightgray; border-radius: 5px; font-weight: bold; } button#submit_button:hover { background-color: #2687D4; color: white; } div.login_error { border: 1px solid red; padding: 1em 1em 1em 55px; background-image: url(../img/icon-warning.png); background-repeat: no-repeat; background-position-x: 4px; background-position-y: 4px; background-color: #ffdddd; border-radius: 5px; }