﻿html,body {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
font-size: 13pt;
}

h1 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 40pt;
font-weight: 300;
margin: 0px;
}

h2 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 35pt;
font-weight: 300;
}

h3 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 30pt;
font-weight: 300;
}

h4 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 25pt;
font-weight: 300;
}

#menu {
position: fixed;
width: 100%;
top: 0px;
background-color: #D9391F;
z-index: 9999;
}

#nav-trigger {
  display: none;
  text-align: right; }
  #nav-trigger span {
    display: inline-block;
    padding: 10px 30px;
    background-color: #D9391F;
    color: white;
    cursor: pointer;
    text-transform: uppercase; }
    #nav-trigger span:after {
      display: inline-block;
      margin-left: 10px;
      width: 20px;
      height: 10px;}
    #nav-trigger span:hover {
      background-color: #e6002d; }
    #nav-trigger span.open:after {
      border-left: solid 10px transparent;
      border-top: none;
      border-bottom: solid 10px #fff;
      border-right: solid 10px transparent; }

nav {
  
}

nav#nav-main {
  background-color: #D9391F;
  padding: 10px 0; }
  nav#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; }
  nav#nav-main li {
    display: inline-block;
    border-right: solid 1px #cc0028;
    padding: 0 5px; }
    nav#nav-main li:last-child {
      border-right: none; }
  nav#nav-main a {
    display: block;
    color: white;
    padding: 0px 30px;
    text-decoration: none;
    font-weight: 300; }
    nav#nav-main a:hover {
      background-color: #e6002d;
      color: #fff; }

nav#nav-mobile {
  position: relative;
  display: none; }
  nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #D9391F;
    margin-top: 0px; }
  nav#nav-mobile li {
    display: block;
    padding: 5px 0;
    margin: 0 5px;
    border-bottom: solid 1px #cc0028; }
    nav#nav-mobile li:last-child {
      border-bottom: none; }
  nav#nav-mobile a {
    display: block;
    color: white;
    padding: 10px 30px; 
    text-decoration: none; }
    nav#nav-mobile a:hover {
    background-color: #e6002d;
    color: #fff; }


#pagewrap {
max-width: 1400px;
}

#banner-bg {
margin-top: 39px;
width: 100%;
height: 600px;
background: url(/webdata/graphics/MLS_BG-2.jpg) no-repeat center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#banner-app-bg {
width: 100%;
background-color: rgba(0,0,0,0.30);
height: 130px;
position: absolute;
top: 509px;
}

#banner-content-wrap {
top: 39px;
width: 100%;
height: 600px;
position: absolute;
}

#banner-position-wrap {
width: 100%;
max-width: 1400px;
height: 600px;
margin: auto;
}

#banner-phone {
float: left;
width: 30%;
text-align: center;
height: 600px;
}

#banner-phone img {
padding-top: 50px;
}

#banner-top-wrap {
float: right;
height: 470px;
width: 69%;
}

#banner-top-content {
padding: 10%;
padding-top: 150px;
}

#banner-top-content img {
float: left;
}

#banner-top-content h1 {
color: #FFFFFF;
margin-bottom: 50px;
margin-top: 10px;
margin-left: 105px;
}

#banner-top-content p {
    color: #FFFFFF;
}


#banner-bottom-wrap {
float: right;
height: 130px;
width: 69%;
}

#banner-bottom-content {
padding-left: 10%;
color: #FFFFFF;
}

#banner-bottom-content p{
padding-top: 10px;
padding-bottom: 10px;
font-weight: 300;
margin-bottom: 0;
}

#section-heading {
text-align: center;
background-color: #DDDDDD;
width: 100%;
display: block;
padding-top: 100px;
padding-bottom: 100px;
}

#spotlight-wrap {
width: 100%;
background: #eeeeee;
background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%);
background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );

height: 600px;
padding-top: 100px;
}

#spotlight {
max-width: 1400px;
margin: auto;
}

#spotlight-image {
width: 364px;
float: left;
position: relative;
margin-left: 10%;
}

#spotlight-content {
padding-top: 10%;
margin-left: 364px;
padding-left: 20%;
padding-right: 10%;
}

#slideshow {
position: absolute;
top: 113px;
left: 25px;
}

#slideshow #slideshowWindow {
width:314px;
height:361px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}

#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:314px; 
height:361px;
float:left;
position:relative;
}

#nearme-wrap {
height: 700px;
width: 100%;
}

#nearme-image {
left: 50%;
position: absolute;
overflow: hidden;
height: 700px;
}

#nearme-image img {
width: 150%;
max-width: 1044px;
top: 50%;
margin-top: 6%;
}

#nearme-content-wrap {
    margin: auto;
    width: 100%;
    height: 700px;
    max-width: 1400px;
}

#nearme-content {
width: 60%;
padding-top: 300px;
padding-left: 10%;
overflow: visible;
position: absolute;
max-width: 600px;
}

#events-wrap {
height: 700px;
background-color: #eeeeee;
}

#events-content-wrap {
max-width: 1400px;
margin: auto;
}

#events-image {
position: absolute;
height: 700px;
overflow: hidden;
margin-left: 5%;
}

#events-image img {
    margin-top: -100px;
}

#events-content {
margin-left: 417px;
padding-top: 250px;
padding-right: 10%;
padding-left: 10%;
}

#waste-wrap {
height: 700px;
background-color: #ffffff;
}

#waste-content-wrap {
max-width: 1400px;
margin: auto;
}

#waste-image {
height: 700px;
overflow: hidden;
margin-top: 50px;
float: right;
padding-right: 10%;
}

#waste-content {
padding-left: 10%;
padding-top: 250px;
position: absolute;
padding-right: 12%;
margin-right: 363px;
max-width: 700px;
}

#notifications-wrap {
height: 700px;
text-align: center;
background-color: #eeeeee;
}

#notifications-image {
text-align: center;
overflow: hidden;
width: 100%
}

#notifications-image img {
    left: 100%;
    margin-left: -200%;
    position: relative;
margin-top: 50px;
}

#notifications-content {
padding-top: 80px;
}

#notifications-alert {
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 2;
margin-top: -167px;
}

#news-wrap {
min-height: 600px;
background-color: #000000;
background: url(/webdata/graphics/appbanner-1.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #ffffff;
}

#news-column1 {
    float: left;
    width: 29%;
    padding: 2%;
}

#news-column2 {
    float: left;
    width: 29%;
    padding: 2%;
}

#news-column3 {
    float: left;
    width: 29%;
    padding: 2%;
}

#news-title{
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}

#where-wrap {
min-height: 400px;
    background-color: #eeeeee;
    text-align: center;
    padding-bottom: 100px;
}

#where-title {
padding-top: 100px;
padding-bottom: 100px;
}

.expander{
cursor: pointer;
    background-color: #ffffff;
    width: 300px;
    text-align: center;
margin: auto;
    margin-top: 10px;
margin-bottom: 10px;
    border-radius: 5px;
    border-width: 1px;
    border-color: #C1C1C1;
    border-style: double;
}

.open {
    background-color: #DADADA;
}

#get-wrap {
text-align: center;
padding-top: 100px;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 100px;
background-color: #D9391F;
color: #ffffff;
}

.expander:hover {
    background-color: #DADADA;
}

#councils-wrap {
padding-top: 150px;
background-color: #ffffff;
padding-bottom: 100px;
text-align: center;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #eeeeee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#eeeeee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#eeeeee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}

#council-wrap {
    text-align: center;
    padding-top: 150px;
    padding-bottom: 150px;
}

#council-image {
    padding-bottom: 20px;
}

#lga {
text-align: center;
margin-top: 20px;
margin-bottom: 50px;
padding:5%;
}

#privacy {
    max-width: 1800px;
    margin: auto;
    padding: 20px;
    font-size: 9pt;
    line-height: 1.1;
}

#privacy h1 {
    font-size: 20pt;
    padding-bottom: 20px;
}

#privacy p {
    margin-bottom: 4px;
}

#privacy-wrap {
    width: 100%;
    display: block;
    border-top: #eeeeee;
    border-top-style: solid;
    border-top-width: 50px;
}


/* =Media Queries
------------------------------------------------------------------------------------------------------------------- */
@media all and (max-width: 900px) {
  #nav-trigger {
    display: block; }

  nav#nav-main {
    display: none; }

  nav#nav-mobile {
    display: block; }

#banner-phone {
height: 470px;
}

#banner-phone img {
    height: 80%;
}

#banner-bottom-wrap {
    width: 100%;
    text-align: center;
}
#banner-bottom-content {
    padding-left: 0px;
}

#banner-top-content {
    padding-left: 20px;
    padding-right: 20px;
}

#spotlight-image>img {
width: 290px;
}

#spotlight-wrap {
height: 478px;
}

#slideshow {
top: 89px;
left: 19px;
}

#slideshow #slideshowWindow {
    width: 252px;
    height: 289px;
}

.slide img {
    width: 252px;
    height: 289px;
}

#spotlight-image {
    width: 290px;
margin-left: 2%;
}


#spotlight-content {
    margin-left: 308px;
    padding-left: 2%;
    padding-right: 2%;
}

#nearme-image img {
width: 90%;
margin-left: 5%;
min-width: 400px;
max-width: 500px;
}

#nearme-image {
width: 100%;
position: absolute;
margin-top: 250px;
overflow: hidden;
left: 0;
text-align: center;
}

#nearme-content {
    width: 94%;
    position: absolute;
    padding: 3%;
    padding-top: 100px;
    text-align: center;
    max-width: 100%;
}

#nearme-content-wrap {
    max-width: 1400px;
    margin: auto;
    width: 100%;
    height: 700px;
}

#events-image {
    position: absolute;
    height: 700px;
    overflow: hidden;
    margin: auto;
    text-align: center;
    width: 100%;
}

#events-image img {
    height: 700px;
    margin-top: 290px;
}

#events-content {
    margin-left: 10%;
    padding-top: 15%;
    padding-right: 10%;
    padding-left: 0px;
    text-align: center;
}

#waste-content {
    padding-left: 10%;
    padding-top: 10%;
    position: absolute;
    padding-right: 10%;
    margin-right: 0;
    max-width: 100%;
    text-align: center;
}

#waste-image {
    height: 700px;
    overflow: hidden;
    float: none;
    padding-right: 0px;
    text-align: center;
    padding-top: 250px;
}

#waste-image img {
    height: 450px;
}

#news-column1 {
    float: none;
    width: 95%;
}

#news-column2 {
    float: none;
    width: 95%;
}

#news-column3 {
    float: none;
    width: 95%;
}


}





@media all and (max-width: 600px) {

#banner-phone {
display: none;
}

#banner-top-wrap {
width: 100%;
}

#banner-top-content {
padding-top: 60px;
text-align: center;
}

#banner-top-content img {
float: none;
}

#banner-top-content h1{
margin-left: 0px;
}

#banner-bottom-content img {
height: 40px;
}

#spotlight-image {
position: absolute;
left: 0;
right: 0;
margin: auto;
margin-top: 210px;
width: 250px;
}

#spotlight-image>img {
width: 250px;
}

#spotlight-content {
padding-top: 0px;
margin-left: 0px;
padding-left: 3%;
padding-right: 3%;
text-align: center;
}

#slideshow {
top: 77px;
left: 16px;
}

#slideshow #slideshowWindow {
    width: 217px;
    height: 249px;
}

.slide img {
    width: 217px;
    height: 249px;
}

#spotlight-wrap {
    height: 622px;
}

#nearme-image {
margin-top: 350px;
}

#notifications-image img {
    width: 700px;
}

#notifications-alert {
    margin-top: -91px;
}

#notifications-alert img {
    width: 230px;
}

#council-image img {
    width: 250px;
}

#notifications-image {
    padding-top: 100px;
}

#lga img {
width: 95%
}

}