@charset "UTF-8";
/* 
Description:  Main Stylesheet for the Pimpama Junction Content Template
Author: Seb Blaszczyk
Author URI: http://www.madeagency.com;
Version: 1.0
Website by Made 2013
*/  

/* STYLESHEET TABLE OF CONTENTS
   --------------------------------------------------------------------------
   1. Base styles: opinionated defaults
   2. Chrome Frame prompt
   3. Links
   4. Typography
   5. Layout
   6. Lists
   7. Embedded content
   8. Figures
   9. Forms
   10. Tables
   11. Helper classes
   12. Print styles.
   13. Browser Compatibility
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    background-color: #e2e9f0;
    margin: 0;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   2. Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   3. Links
   ========================================================================== */

a {
  text-decoration: none;
}

a:hover img {
  opacity: 1;
}
/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   4. Typography
   ========================================================================== */

/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

 /* Content Page Typography */

 #content-container h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: #009DE0;
  padding: 0;
  font-size: 22px;
  line-height: 1.5em;
  letter-spacing: 0.05em;
  font-weight: 400;
  border-bottom: 1px solid #009DE0;
  text-transform: uppercase;
 }

 #content-container span {
  font-family: Arial, Helvetica, sans-serif;
  color: #6F6F6E;
  padding: 0;
  font-weight: 900;
  font-size: 12px;
  line-height: 1.5em;
 }

  #content-container p {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  padding: 0;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.5em;
 }

 #content-container p a {
  font-family: Arial, Helvetica, sans-serif;
  color: #E5007E;
  padding: 0;
  font-weight: 900;
  font-size: 11px;
  line-height: 1.5em;
 }

 #sexyContent {
  width: 750px;
  height: 533px;
  margin: 0;
  padding: 0;

}

#sexyContent img {
  width: 750px;
  height: 533px;
  margin: 0;
  padding: 0;
}





 #content-container ul li a {
  font-family: Arial, Helvetica, sans-serif;
  color: #E5007E;
  padding: 0;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.5em;
 }

 #content-container img {
  width: 635px;
  height: 321px;
  padding: 0;
  margin: 0;
 }

 #content-container h2 {
  font-family: Arial, Helvetica, sans-serif;
  color: #009DE0;
  padding: 0;
  font-size: 16px;
  line-height: 1.5em;
  font-weight: 400;
  border-bottom: 1px solid #009DE0;

 }

 #content-container h3 {
  font-family: Arial, Helvetica, sans-serif;
  color: #009DE0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5em;
  font-weight: 400;


 }

 #content-container hr {
  
 }




/* Module h2 titles -------------------------------------------  */

.module-title {
  padding: 5px 0 5px 0;
  margin: 0 25px 0 25px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 900;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.1em;
  color: #FFF;
  position: relative;
  top: 126px;
  left: 0;
  text-align: center;
  z-index: 200;
  
  -webkit-border-top-left-radius: 9px;
   -webkit-border-top-right-radius: 9px;
   -moz-border-radius-topleft: 9px;
   -moz-border-radius-topright: 9px;
   border-top-left-radius: 9px;
   border-top-right-radius: 9px;
  
} 

/* Latest News Module Title & Content -------------------------------------------  */

.latest-news {
  background-color: #F29100;
 
}

#latest-news p {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  padding: 5px 10px 0 10px;
  font-size: 11px;
  line-height: 1.4em;
}

/* Leasing Offers Module Title -------------------------------------------  */

.leasing-offers {
  background-color: #00AEEF;
}

/* Facebook Module Title -------------------------------------------  */

.facebook {
  background-color: #DDDB00;
}

/* Brochure Download Module Title -------------------------------------------  */

.brochure {
  background-color: #E5007E;
}

#brochure p {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  padding: 5px 0px 0 10px;
  font-size: 11px;
  line-height: 1.4em;
}

/* Plans Module Title -------------------------------------------  */

.plans {
  background-color: #2DAB66;
}

#plans p {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  padding: 5px 0px 0 10px;
  font-size: 11px;
  line-height: 1.4em;
}

/* Footer Typography -------------------------------------------  */

.footer-menu-container h3 {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 900;
  padding: 20px 0 0 0;
  margin: 0;
  font-size: 10px;
  line-height: 1.4em;
  color: #00AEEF;
}

#made-link a {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 900;
  padding: 0;
  margin: 0;
  font-size: 8px;
  line-height: 1.4em;
  letter-spacing: 0.2em;
  color: #00AEEF;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 100;
}

#made-link p {
   font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 900;
  padding: 0;
  margin: 0;
  font-weight: 100;
  font-size: 8px;
  line-height: 1.4em;
  letter-spacing: 0.2em;
  color: #00AEEF;
  text-decoration: none;
  text-transform: uppercase;
}

#copyright p {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 900;
  padding: 0;
  margin: 0;
  font-weight: 100;
  font-size: 8px;
  line-height: 1.4em;
  letter-spacing: 0.2em;
  color: #00AEEF;
  text-decoration: none;
  text-transform: uppercase;
}

h1 {

    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
}

/**
 * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 6/7/8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Address margins set differently in IE 6/7.
 */

p,
pre {
    margin: 1em 0;
}

/**
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/**
 * Address CSS quotes not supported in IE 6/7.
 */

q {
    quotes: none;
}

/**
 * Address `quotes` property not supported in Safari 4.
 */

q:before,
q:after {
    content: '';
    content: none;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 Header
   -------------------------------------------------------------------------- */

#header {
   width: 960px;
   height: 129px;
   margin: 0 auto;
   padding: 0;
   
   }

.facebook-icon img {
  position: relative;
  width: 95px;
  top: 30px;
  left: 861px;
  margin: 0;
  padding: 0;
  overflow: visible;
  z-index: 3000;

}   



/* 5.1.2 Navigation --------------------------------------------------------- */

#navigation {
  width: 960px;
  height: 32px;
  padding: 0;
  margin: 0;
 
 
 }

#navigation ul ul {
  display: none;
}

#navigation ul li:hover > ul {
    display: block;
}

#navigation ul {
  list-style: none;
  position: relative;
  display: inline-table;
  padding: 0;
  margin: 0;
}

#navigation ul li {
   background-color: #009DE0;
   display: block;
   font-size: 12px;
   line-height: 11px;
   letter-spacing: 1px;
   margin-right: 1px;
   margin-top: 2px;
   padding: 10px 0px;
   overflow: hidden;
   font-weight: 900;
   text-transform: uppercase;
   text-decoration: none;
   -webkit-border-top-left-radius: 9px;
   -webkit-border-top-right-radius: 9px;
   -moz-border-radius-topleft: 9px;
   -moz-border-radius-topright: 9px;
   border-top-left-radius: 9px;
   border-top-right-radius: 9px;
   float: left;
   width: 105px;
   cursor: pointer;
   text-align: center;
  }

#navigation ul li.current {
  background-color: #C4007A;
}  

#navigation ul li:hover {
      background-color: #C4007A;
    }
#navigation ul li:hover a {
        color: #fff;
      }
    
#navigation ul li a {
      text-decoration: none;
           color: #ffffff;
           font-weight: 900;
           font-family: Arial, Helvetica, sans-serif;
      }

#navigation ul ul {
    background-color: #009DE0;
    padding: 0;
    position: absolute; top: 100%;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    padding-bottom: 10px;
    margin-left: 0px;
  }

#navigation ul ul li {
    float: none; 
    position: relative;
    background-color: #009DE0;
    display: block;
    font-size: 10px;
    line-height: 11px;
    letter-spacing: 1px;
    margin-right: 0px;
    margin-top: 3px;
    padding: 10px 0px;
    overflow: hidden;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom: 1px solid #FFF;
    text-align: center;
   }

#navigation ul ul li:hover {
     background-color: #009DE0;
      } 

#navigation ul ul li a:hover {
  color: #C4007A;
              }
    
#navigation ul ul ul {
       position: absolute; 
       left: 100%; 
       top:0;
  }

/* CUSTOM MENU ADJUSTMENTS these individual adjustments have been done in order to centre the logo */

#navigation ul li.item-113 {
  margin-left: 257px;
}

#navigation ul li.item-101 {
  width: 70px;
}

#navigation ul li.item-106 {
  width: 86px;
}

#navigation ul li.item-111 {
  width: 87px;
}

#navigation ul li.item-114 {
  width: 138px;
}

#navigation ul ul.item-101 li {
  width: 70px;
}

#navigation ul li.item-106 ul li {
  width: 86px;
}

#navigation ul li.item-111 ul li {
  width: 87px;
}



/* 5.1.3 Logo --------------------------------------------------------- */

#pimpama-junction-logo {
width: 256px;
  height: 96px;
  background: #fff url(../images/pimpama-junction-logo.png) no-repeat center center; 
  display: block;
  margin: 0 -128px;
  position: relative;
  left: 50%;
  top: 57px;
  z-index: 1000;
  box-shadow: 0px 5px 9px rgba(0,0,0,0.4);
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

/* --------------------------------------------------------------------------
   5.2 Content Wrapper
   -------------------------------------------------------------------------- */   

#content-wrapper {
    width: 100%;
    padding: 0;
    margin: 0;
    height: auto;
    background: #fff url(../images/bg.jpg);
    /*-webkit-box-shadow:   0px 0px 2px #009DE0;
    -moz-box-shadow:    0px 0px 2px #009DE0;
    -ms-box-shadow:   0px 0px 2px #009DE0;
    -o-box-shadow:    0px 0px 2px #009DE0;
  box-shadow:   0px 0px 2px #009DE0;*/
}

#main-container {
    width: 635px;
    height: auto;
    margin: 5px 0 0 0;
    padding: 0;
    float: left;



    
    }

#sidebar {
    width: 320px;
    margin: 0;
    padding: 0;
    height: auto;
    float: left;

} 

.module {
    height: 154px;
    width: 311px;
    padding: 0;
    margin: 5px 0 0 5px;
    background-color: #FFF;
    position: relative;
    overflow: hidden;
    
}  

.module img {
  position: absolute;
  left: 0px;
top: 0px;
z-index:1;
  width: 311px;
}

.module p {
  position: absolute;
  top: 30px;
  right: 0;
  left: 5px;
  bottom: 0;
  z-index: 2;
}

#clear-buffer {
    width: 100%;
    height: 10px;
    margin: 0;
    padding: 0;
    float: left;
    
}

/* --------------------------------------------------------------------------
   5.3 Front Page Content Containers
   -------------------------------------------------------------------------- */   

#front-page-content {
    width: 960px;
    padding: 0;
    margin: 0 auto;
    height: 494px;
    background-color: #FFF;
    overflow-x: visible;
    
}   

#feature-container {
    width: 635px;
    height: 321px;
    margin: 0;
    padding: 0;
    overflow-x: visible;
}

#bottom-container {
    width: 635px;
    height: 163px;
    margin: 0;
    padding: 0;
    
}

/* Pimpama Stamp */


#pimpama-stamp {
  width: 150px;
  position: relative;
  top: -125px;
  left: -40px;
  z-index: 300;
  
}

/* 5.3.1 Bottom Container Modules -------------------------------------------  */

#latest-news {
  border: 2px solid #F29100;
}

#leasing-offers {
  border: 2px solid #00AEEF;
}



/* --------------------------------------------------------------------------
   5.4 Content Page Containers
   -------------------------------------------------------------------------- */ 

#content {
    width: 960px;
    padding: 0;
    margin: 0 auto;
    height: auto;
    background-color: #FFF;
    overflow-x: auto;
    
}   

#content-container {
  width: 630px;
    height: auto;
    margin: 5px 0 0 0;
    padding: 0 5px 0 0;
    float: left;
    overflow: auto;
    
}

/* --------------------------------------------------------------------------
   5.5 Sidebar
   -------------------------------------------------------------------------- */ 

#facebook {
  border: 2px solid #DDDB00
}

#brochure {
  border: 2px solid #E5007E;
}

#plans {
  border: 2px solid #2DAB66;
}   

/* --------------------------------------------------------------------------
   5.6 Footer
   -------------------------------------------------------------------------- */ 

#footer {
   width: 960px;
   height: 90px;
   margin: 0 auto;
   padding: 0;
   
} 

.footer-menu-container {
   width: 160px;
   height: 80px;
   float: left;
   
} 

.footer-menu-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.footer-menu-container ul li {
  margin: 0;
  padding: 0;
}

.footer-menu-container ul li a {
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 1px 0 0 0;
  margin: 0;
  font-size: 9px;
  color: #000;
  display: block;
}

/* Footer Menu Container adjustments to even up the menus */ 

.footer-menu-container-small {
  width: 93px;
}

.footer-menu-container-large {
  width: 218px;
}

/*end*/

/* Even up the space between the footer menus */

.first-menu-even h3 {
  margin-left: 32px;
}

.first-menu-even ul {
margin-left: 32px;
}

.second-menu-even h3 {
  margin-left: 64px;
}

.second-menu-even ul {
  margin-left: 64px;
}

.third-menu-even h3 {
  margin-left: 86px;
}

.third-menu-even ul {
  margin-left: 86px;
}

/* 5.6.1 Copyright & Attribution Links --------------------------------------------------- */

#made-link {
  width: 300px;
  height: auto;
  float: right;
  text-align: right;
  padding: 0;
  margin: 10px 0 30px 0;
  
}

#copyright {
  width: 400px;
  height: auto;
  float: left;
  text-align: left;
  padding: 0 0 30px 0;
  margin: 10px 0 0 0;
  

}





/* ==========================================================================
   6. Lists
   ========================================================================== */

/**
 * Address margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

/**
 * Address paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0 0 0 40px;
}

/**
 * Correct list images handled incorrectly in IE 7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   7. Embedded content
   ========================================================================== */

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   8. Figures
   ========================================================================== */

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   9. Forms
   ========================================================================== */

/**
 * Correct margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   10. Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* ==========================================================================
   11. Helper classes
   ========================================================================== */
.no-margin-left {
    margin-left: 0;
}   

.float-left {
    float: left;
}  

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

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

.hidden {
  display: none;
} 

select {
  display: none;
}

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * 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;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   12. Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        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;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


/* ==========================================================================
   13. Browser Compatibility Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   13.1 Firefox
   -------------------------------------------------------------------------- */  

@-moz-document url-prefix() { 

/* Minor adjustments to Module text */

#latest-news p {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  padding: 4px 10px 0 10px;
  font-size: 11px;
  line-height: 1.4em;
}

#brochure p {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  padding: 0px 0px 0px 7px;
  font-size: 11px;
  line-height: 1.4em;
}

.footer-menu-container ul li a {
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 1px 0 0 0;
  margin: 0;
  font-size: 8px;
  color: #000;
  display: block;
}

#navigation ul li {
   background-color: #009DE0;
   display: block;
   font-size: 12px;
   line-height: 11px;
   letter-spacing: 1px;
   margin-right: 1px;
   margin-top: 2px;
   padding: 10px 0px;
   overflow: hidden;
   font-weight: 900;
   text-transform: uppercase;
   text-decoration: none;
   -webkit-border-top-left-radius: 9px;
   -webkit-border-top-right-radius: 9px;
   -moz-border-radius-topleft: 9px;
   -moz-border-radius-topright: 9px;
   border-top-left-radius: 9px;
   border-top-right-radius: 9px;
   float: left;
   width: 105px;
   cursor: pointer;
   text-align: center;
  }


}

/* --------------------------------------------------------------------------
   13.2 Internet Explorer 8
   -------------------------------------------------------------------------- */  

.lt-ie9 .footer-menu-container ul li a {
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 1px 0 0 0;
  margin: 0;
  font-size: 8px;
  color: #000;
  display: block;
}

.lt-ie9 #pimpama-junction-logo {
width: 256px;
  height: 96px;
  background: url(../images/pimpama-junction-logo.png) no-repeat center center; 
  display: block;
  margin: 0 -128px;
  position: relative;
  left: 50%;
  top: 57px;
  z-index: 1000;
  box-shadow: 0px 5px 9px rgba(0,0,0,0.4);
  -webkit-border-top-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-topright: 20px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  
}

/* Media Queries
*********************************************/
/* Retina */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
  
}

/* --------------------------------------------------------------------------
   13.3 Mobile Device Layout
   -------------------------------------------------------------------------- */
@media (max-device-width: 480px) {

/* 13.3.1 Mobile - Body --------------------------------------------------------- */  

  body {
    background-color: #e2e9f0;
    margin: 0;
    font-size: 1em;
    line-height: 1.4;
}

/* 13.3.2 Mobile - Typography --------------------------------------------------------- */  

/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

/* Content Page Typography */

 #content-container h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: #009DE0;
  padding: 0;
  font-size: 18px;
  line-height: 1.4em;
  font-weight: 100;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid #009DE0;
 }

 #content-container span {
  font-family: Arial, Helvetica, sans-serif;
  color: #6F6F6E;
  padding: 0;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2em;
 }

  #content-container p {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  padding: 0;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.6em;
 }




/* Module h2 titles -------------------------------------------  */

.module-title {
  padding: 5px 0 5px 0;
  margin: 0 25px 0 25px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 900;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.1em;
  color: #FFF;
  position: relative;
  top: 126px;
  left: 0;
  text-align: center;
  z-index: 200;
  -webkit-border-top-left-radius: 9px;
  -webkit-border-top-right-radius: 9px;
  -moz-border-radius-topleft: 9px;
  -moz-border-radius-topright: 9px;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  
} 

/* Latest News Module Title & Content -------------------------------------------  */

.latest-news {
  background-color: #F29100;
 
}

#latest-news p {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  padding: 5px 10px 0 10px;
  font-size: 11px;
  line-height: 1.4em;
}

/* Leasing Offers Module Title -------------------------------------------  */

.leasing-offers {
  background-color: #00AEEF;
}

/* Facebook Module Title -------------------------------------------  */

.facebook {
  background-color: #DDDB00;
}

/* Brochure Download Module Title -------------------------------------------  */

.brochure {
  background-color: #E5007E;
}

#brochure p {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  padding: 5px 0px 0 10px;
  font-size: 11px;
  line-height: 1.4em;
}

/* Plans Module Title -------------------------------------------  */

.plans {
  background-color: #2DAB66;
}

#plans p {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  padding: 5px 0px 0 10px;
  font-size: 11px;
  line-height: 1.4em;
}

/* Footer Typography -------------------------------------------  */

.footer-menu-container h3 {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 900;
  padding: 20px 0 0 0;
  margin: 0;
  font-size: 10px;
  line-height: 1.4em;
  color: #00AEEF;
}

#made-link a {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 900;
  padding: 0;
  margin: 0;
  font-size: 8px;
  line-height: 1.4em;
  letter-spacing: 0.2em;
  color: #00AEEF;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 100;
}

#made-link p {
   font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 900;
  padding: 0;
  margin: 0;
  font-weight: 100;
  font-size: 8px;
  line-height: 1.4em;
  letter-spacing: 0.2em;
  color: #00AEEF;
  text-decoration: none;
  text-transform: uppercase;
}

#copyright p {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  font-weight: 900;
  padding: 0;
  margin: 0;
  font-weight: 100;
  font-size: 8px;
  line-height: 1.4em;
  letter-spacing: 0.2em;
  color: #00AEEF;
  text-decoration: none;
  text-transform: uppercase;
}
  
/* 13.3.3 Mobile - Header --------------------------------------------------------- */

#header {
   width: 100%;
   height: 180px;
   margin: 0 auto;
   padding: 0;
   }

.facebook-icon img {
  display: none;

}      

/* 13.3.4 Mobile - Navigation --------------------------------------------------------- */

#navigation {
  width: 100%;
  height: 32px;
  padding: 0;
  margin: 0;
 
 }

 select {
  position: relative;
  display: inline;
  top: 38px;
  left: 73px;
  background-color: #00AEEF;
  color: #FFF;
  font-weight: 900;
  text-align: center;
  border: none;
}

#navigation ul ul {
  display: none;
}

#navigation ul li:hover > ul {
    display: block;
}

#navigation ul {
  list-style: none;
  position: relative;
  display: none;
  padding: 0;
  margin: 0;
}

#navigation ul li {
   background-color: #009DE0;
   display: block;
   font-size: 12px;
   line-height: 11px;
   letter-spacing: 1px;
   margin-right: 1px;
   margin-top: 3px;
   padding: 10px 0px;
   overflow: hidden;
   font-weight: 900;
   text-transform: uppercase;
   text-decoration: none;
   -webkit-border-top-left-radius: 9px;
   -webkit-border-top-right-radius: 9px;
   -moz-border-radius-topleft: 9px;
   -moz-border-radius-topright: 9px;
   border-top-left-radius: 9px;
   border-top-right-radius: 9px;
   float: left;
   width: 105px;
   cursor: pointer;
   text-align: center;
  }

#navigation ul li.current {
  background-color: #C4007A;
}  

#navigation ul li:hover {
      background-color: #C4007A;
    }
#navigation ul li:hover a {
        color: #fff;
      }
    
#navigation ul li a {
      text-decoration: none;
           color: #ffffff;
           font-weight: 900;
           font-family: Arial, Helvetica, sans-serif;
      }

#navigation ul ul {
    background-color: #009DE0;
    padding: 0;
    position: absolute; top: 100%;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    padding-bottom: 10px;
    margin-left: 0px;
  }

#navigation ul ul li {
    float: none; 
    position: relative;
    background-color: #009DE0;
    display: block;
    font-size: 10px;
    line-height: 11px;
    letter-spacing: 1px;
    margin-right: 0px;
    margin-top: 3px;
    padding: 10px 0px;
    overflow: hidden;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom: 1px solid #FFF;
    text-align: center;
   }

#navigation ul ul li:hover {
     background-color: #009DE0;
      } 

#navigation ul ul li a:hover {
  color: #C4007A;
              }
    
#navigation ul ul ul {
       position: absolute; 
       left: 100%; 
       top:0;
  }

/* CUSTOM MENU ADJUSTMENTS these individual adjustments have been done in order to centre the logo */

#navigation ul li.item-113 {
  margin-left: 257px;
}

#navigation ul li.item-101 {
  width: 70px;
}

#navigation ul li.item-106 {
  width: 86px;
}

#navigation ul li.item-111 {
  width: 87px;
}

#navigation ul li.item-114 {
  width: 138px;
}

#navigation ul ul.item-101 li {
  width: 70px;
}

#navigation ul li.item-106 ul li {
  width: 86px;
}

#navigation ul li.item-111 ul li {
  width: 87px;
}



/* 13.3.5 Mobile - Logo --------------------------------------------------------- */

#pimpama-junction-logo {
width: 256px;
  height: 96px;
  background: #fff url(../images/pimpama-junction-logo.png) no-repeat center center; 
  display: block;
  margin: 0 -128px;
  position: relative;
  left: 50%;
  top: 7px;
  z-index: 1000;
  box-shadow: 0px 5px 9px rgba(0,0,0,0.4);
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

/* 13.3.6 Mobile - Content Wrapper --------------------------------------------------------- */   

#content-wrapper {
    width: 100%;
    padding: 0;
    margin: 0;
    height: auto;
    background: #fff url(../images/bg.jpg);
    /*-webkit-box-shadow:   0px 0px 2px #009DE0;
    -moz-box-shadow:    0px 0px 2px #009DE0;
    -ms-box-shadow:   0px 0px 2px #009DE0;
    -o-box-shadow:    0px 0px 2px #009DE0;
  box-shadow:   0px 0px 2px #009DE0;*/
}

#main-container {
    width: 100%;
    height: auto;
    margin: 5px 0 0 0;
    padding: 0;
    }

#sidebar {
    width: 320px;
    margin: 0;
    padding: 0;
    height: auto;
    

} 

.module {
    height: 154px;
    width: 311px;
    padding: 0;
    margin: 5px 0 0 2px;
    background-color: #FFF;
    position: relative;
    overflow: hidden;
    
}  

.module img {
  position: absolute;
  left: 0px;
top: 0px;
z-index:1;
  width: 311px;
}

.module p {
  position: absolute;
  top: 30px;
  right: 0;
  left: 2px;
  bottom: 0;
  z-index: 2;
}

#clear-buffer {
    width: 100%;
    height: 10px;
    margin: 0;
    padding: 0;
    float: left;
    
}

/* 13.3.7 Mobile - Front Page Content Containers --------------------------------------------------------- */

#front-page-content {
    width: 100%;
    padding: 0;
    margin: 0 auto;
    height: auto;
    background-color: #FFF;
    overflow: auto;
    background: #fff url(../images/bg.jpg);
    
}   

#feature-container {
    width: 100%;
    height: 157px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#feature-container p {
  padding: 0;
  margin: 0;
}

#feature-container img {
  width: 316px;
  padding: 0;
  margin: 0 0 0 2px;
}


#bottom-container {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    
}

/* Pimpama Stamp */


#feature-container #pimpama-stamp {
  width: 90px;
  position: relative;
  top: -90px;
  left: 0;
  z-index: 300;
  
}

/* 13.3.8 Mobile - Bottom Container Modules --------------------------------------------------------- */

#latest-news {
  border: 2px solid #F29100;
}

#leasing-offers {
  border: 2px solid #00AEEF;
}


/* 13.3.9 Mobile - Content Page Containers --------------------------------------------------------- */

#content {
    width: 100%;
    padding: 0;
    margin: 0 auto;
    height: auto;
    background-color: #FFF;
    overflow-x: auto;
    
}   

#content-container {
  width: 308px;
    height: auto;
    margin: 5px 0 0 0;
    padding: 0 0 0 3px;
    float: left;
    overflow: auto;
}

#content-container img {
  width: 308px;
  height: 156px;
}

#content-container #sexyContent {
  width: 311px;
  height: 200px;
  margin: 0;
  padding: 0;

}

#content-container #sexyContent img {
  width: 311px;
  height: 200px;
  margin: 0;
  padding: 0;
}

/* 13.3.10 Mobile - Sidebar --------------------------------------------------------- */

#facebook {
  border: 2px solid #DDDB00
}

#brochure {
  border: 2px solid #E5007E;
}

#plans {
  border: 2px solid #2DAB66;
}  

/* 13.3.11 Mobile - Footer --------------------------------------------------------- */ 


#footer {
   width: 100%;
   height: auto;
   margin: 0 auto;
   padding: 0;
   
} 

.footer-menu-container {
   width: 160px;
   height: 90px;
   margin-left: 0;
   text-align: center;
   
   
} 

.footer-menu-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.footer-menu-container ul li {
  margin: 0;
  padding: 0;
}

.footer-menu-container ul li a {
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 7px 0 0 0;
  margin: 0;
  font-size: 9px;
  color: #000;
  display: block;
}

.footer-menu-container ul li a:hover {
  text-decoration: underline;
}

/*end*/

.align-right {
  text-align: center;
}

/* 13.3.12 Mobile - Copyright & Attribution Links --------------------------------------------------------- */ 

#made-link {
  width: 100%;
  height: auto;
  text-align: center;
  padding: 0;
  margin: 10px 0 3px 0;
  
}

#copyright {
  width: 100%;
  height: auto;
  text-align: center;
  padding: 0 0 30px 0;
  margin: 10px 0 0 0;
  

}

}/* END */

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
  #pimpama-stamp {
  width: 150px;
  position: relative;
  top: -125px;
  left: 0px;
  z-index: 300;
  
  
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
  /* Adjust the Pimpama Stamp for Portrait Ipad View */



}
/* Large desktop */
@media (min-width: 1200px) {
  
}