/*** Smart Phone ***/
@media all and (min-width: 480px) {
  #responsiveindex{z-index:2;}

  .colourbox.tweets ol li .tweettext {
     width: 85%;
  }
}

/*** Tablet ***/
@media all and (min-width: 720px) {
  #responsiveindex{z-index:3;}

  /* Header Container */
  #headercontainer {
    position:relative;
    width:690px;
    padding-right:10px;
    margin:0 auto 25px auto;
    overflow:hidden;
  }

  /* Header Elements */
  #toputility-navigation {margin:10px 0;}
  #toputility-navigation ul{float:right}
  #topsearchcontainer{float:right; clear:right; margin:0; z-index:50;}
  #logo-container {clear:none; width:auto; margin:0;}
  #logo-container img {position:absolute; bottom:10px; left:10px;}
  #socialmediabuttons-top {float:right;clear:right;margin:7px 0 10px 0; width:auto;}


  /* Navigation Menu */
  #expand-main-menu {display:none;} /* Hide Mobile */

  #navigation-main-container {
    clear:both;
    width:700px;
    margin:0 auto;
    background-color:#005aa0;
  }
  #navigation-menu {
    display:block;
    border-bottom:0;
    overflow:auto;
  }
  #navigation-menu li {
    height:40px;
    float:left;
    border-bottom:0;
    max-width:12.5%;
  }
  #navigation-menu li a,  #navigation-menu li span {
    padding:0px 7px 0px 7px;
    background-color:#005aa0;
    color:#fff;
    font-size:0.625em;
    text-transform: uppercase;
    text-align: center;
    height:40px;
    display: table-cell;
    vertical-align: middle;
    border-left:1px solid #0071af;
    border-right:1px solid #1b4c85;
    width:71px;
    overflow:hidden;
  }
  #navigation-menu li.active-tab span {
    background-color: #830000 !important;
  }
  #navigation-menu li a:hover {
    background-color:#004377;
  }
  #navigation-menu li.first a {border-left:0;}
  #navigation-menu li.last a {border-right:0;}


  /* Breadcrumbs */
  #breadcrumb {
    width:680px;
    margin:20px auto 10px auto;
  }

  /* Main Column Container */
  #maincolumn {
    margin:0 auto;
    width:700px;
  }

  #headingtext h1 {font-size:2.5em;}

  #latesttweets {
    float:right;
    width:220px;
  }

  .footercontainer {
    margin:0 auto;
    width:700px;
  }

  .colourbox.tweets ol li .tweettext {
     width: 90%;
  }
}

/*** Desktop ***/
@media all and (min-width: 1024px){
  #responsiveindex{z-index:4;}

  /* Header Container */
  #headercontainer {width:950px;}
  #navigation-main-container {width:960px;}
  #navigation-menu li {
    height:60px;
    max-width:12.5%;
  }
  #navigation-menu li a,  #navigation-menu li span {
    padding:0px 10px 0px 10px;
    font-size:0.875em;
    height:60px;
    width:98px;
  }

  /* Breadcrumbs */
  #breadcrumb {width:940px;}

  /* Main Column Container */
  #maincolumn {width:960px;}

  #centrecolumn {float:left; width:710px;}

  #centrecolumn.wide {width:auto; float:none;}

  #related {float:right; width:230px; padding-left:0; padding-right:0; line-height: 1; clear:none;}

  .colourbox a {
    background-position:200% 20%;
  }

  .colourbox.map a {
    background-position:65% 20%;
  }

  .relatedbox {
    background-position: 200% 20%;
  }

  .relatedpolls .pollbuttons {
    text-align: center;
  }

  .photofeature {
    background-position: center center;
  }

  #latesttweets {
    width:230px;
  }

  .footercontainer {
    width:960px;
  }

  .footerfirstbox {
    display:block;
    float:left;
    width:240px;
    padding-left:10px;
  }
  .footersecondbox {
    display:block;
    float:left;
    width:240px;
    padding:0 10px;
  }
  .footerthirdbox {
    display:block;
    float:left;
    width:450px;
  }
  #teammembers .person {
	  width: 345px;
  }
  #teammembers .person a span.details {
	  max-width: 170px;
  }

  #related .colourbox.tweets ol li .tweettext {
     width: 160px;
  }
}