/*
Index:
1a - Fonts
2a - General CSS
3a - Header CSS
    3b - Navbar CSS
4a - Content CSS
        4a1 - Front Page Content
        
    4b - Left Sidebar CSS
    4c - Slideshow css
    4d - Search Box CSS
    4e - Right Sidebar CSS - Not Used -
    
5a - Footer CSS

666 - 404 Page CSS

********************************************************************************
*******************************************************************************/

/* 1a - Fonts
------------------------------------------------------------------------------*/

@font-face {
    font-family: "trocchi";
    src:url("http://www.rathkealesewerage.co.nz/fonts/trocchi/trocchi.eot?") format("eot"),
        url("http://www.rathkealesewerage.co.nz/fonts/trocchi/trocchi.woff") format("woff"),
        url("http://www.rathkealesewerage.co.nz/fonts/trocchi/trocchi.ttf") format("truetype"),
        url("http://www.rathkealesewerage.co.nz/fonts/trocchi/trocchi.svg#trocchi") format("svg");
}

/* End 1a - Fonts
------------------------------------------------------------------------------*/

/* 2a - General CSS
------------------------------------------------------------------------------*/

section, header, footer, aside, nav, article, div { 
    display: block;
    border: none;
    margin: 0px;
    padding: 0px;
}

html, body {
    height: 100%;    
}

body {
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
    font-family: arial, verdana, sans-serif;
    font-size: 13px;
    background: url('../pics/tweed.png');
}

.overflowX {
    overflow-x: visible !important;
}

.overflowY {
    overflow-y: visible !important;
}

a:link img, a:visited img { /* IE stupidity */
    border: 0px;
}

body:before
{
   content: "";
   position: fixed;
   top: -10px;
   left: 0;
   width: 100%;
   height: 10px;
   z-index: 100;
   -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
   box-shadow: 0px 0px 10px rgba(0,0,0,.8);
}




h1, h2, h3, h4, h5 {

}



/* End 2a - General CSS
------------------------------------------------------------------------------*/

/* 3a - Header CSS
------------------------------------------------------------------------------*/


/* End 3a - Header CSS
------------------------------------------------------------------------------*/

/* 3b - Navbar CSS
------------------------------------------------------------------------------*/


/* End 3b - Navbar CSS
------------------------------------------------------------------------------*/

/* 4a - Content CSS
------------------------------------------------------------------------------*/

#bodyWrapper {
    
}

#pageWrapper {
    
}

#topOfMonitor {
    width: 100%;
    height: 90px;
    margin: 0px auto;
}

#topOfMonitor #titleWrapper {
    width: 1000px;
    margin: 0px auto;
    position: relative;
}

#topOfMonitor #titleWrapper #logo {
    width: 70px;
    position: absolute;
    margin-top: 15px;
    margin-left: 35px;
}

#topOfMonitor #titleWrapper #title {
    width: 500px;
    position: absolute;
    margin-top: 35px;
    margin-left: 120px;
}

#sidesAndMiddle {
    position: relative;
    margin: 0px auto;
    
}

#leftSide, #middlePanel, #rightSide {
    float: left;
    display: inline-block;
}

#sidesAndMiddle, #leftSide, #middlePanel, #rightSide {
    height: 780px;
    
}

#leftSide {
    width: 700px;   
}

#middlePanel {
    width: 1000px;
    background-size: 100% 100%;
    position: relative;
}

#middlePanel #navBar {
    position: relative;
    top: 0px;
    left: 0px;
}

#middlePanel #navBar span {
    float: right;
    padding: 8px 20px;
    background: lightgray;
    margin: 0px 5px;
    cursor: pointer; 
    cursor: hand;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    -webkit-box-shadow: 7px 4px 2px 0 rgba(0,0,0,0.2);
    box-shadow: 7px 4px 2px 0 rgba(0,0,0,0.2);
    font-family: 'trocchi';
    font-size: 1.2em;
    text-shadow: 1px 1px 0 #FFFFFF;
}

#middlePanel #navBar span:hover {
    background: darkgray;
}

#middlePanel #navBar .active {
    background: white;
    text-shadow: 1px 1px 0 #E0E0E0;
}

#middlePanel #middlePanelPic1, #middlePanel #middlePanelPic2, #middlePanel #middlePanelPic3, #middlePanel #javaWarning {
    position: absolute;
    top: 35px;
    right: -5px;
    width: 100%;
    height: 740px;
    border: 5px solid white;
    -webkit-border-radius: 20px 0 20px 0;
    border-radius: 20px 0 20px 0;
    
    -webkit-box-shadow: 7px 4px 2px 0 rgba(0,0,0,0.2);
    box-shadow: 7px 4px 2px 0 rgba(0,0,0,0.2);
}

#middlePanel #middlePanelPic1 {
    height: 740px;
    width: 100%
}

#middlePanel #middlePanelPic2 {
    height: 538px;
    width: 871px;
}

#middlePanel #middlePanelPreLoader1, #middlePanel #middlePanelPreLoader2, #middlePanel #middlePanelPreLoader3 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

#middlePanel #javaWarning {
    background: white;
}

#middlePanel #javaWarning h1,  #middlePanel #javaWarning h2 {
    padding: 0px;
    
    text-align: center;
}

#middlePanel #javaWarning h1 {
    font-size: 66px;
    color: red;
    margin: 280px auto 0px;
}

#middlePanel #javaWarning h2 {
    font-size: 44px;
    color: orange;
    margin: 30px auto;
}

.hidden {
    visibility: hidden !important;
}

#rightSide {
    width: 700px;
}


.zeroWidth {
    width: 0px !important;
}

#bottomOfMonitor {
    width: 100%;
    height: 50px;
    
}

/* End 4a - Content CSS
------------------------------------------------------------------------------*/

/*  4a1 - Front Page Content
------------------------------------------------------------------------------*/

/* End 4a1 - Front Page Content
------------------------------------------------------------------------------*/

/* 5a - Footer CSS
------------------------------------------------------------------------------*/



/* End 5a - Footer CSS
------------------------------------------------------------------------------*/

/* 666 - 404 page CSS
------------------------------------------------------------------------------*/


/* End 666 - 404 page CSS
------------------------------------------------------------------------------*/