body {
  font-size: 1em;
  font-weight: normal;
  padding: 0
  margin: 0
  width: 37.2em;
  background: white url(/static/images/texture.jpg) repeat;
}

/* colours 
 green: #b6d447
 dark-grey : #1c1f21
 light-grey : #6d6f6f
 red        : #cf2200 
 */

*  { font-weight     : normal    ;
     margin          : 0         ;
     border          : none      ;
     padding         : 0         ; } 

a  { text-decoration : none      ;
     color           : #b6d447   ; }

a:hover {
     text-decoration : underline ; }

h1 { font-size       : 3.0em     ; }
h2 { font-size       : 2.0em     ; }

h3 { font-size       : 1em       ; 
     margin-top      : 1.5em     ;
     margin-bottom   : 0.2em     ; }
p  { text-align      : left      ; 
     line-height     : 1.5em     ; }

textarea, input[type="text"] {
     width           : 100%        ;
     font-family     : inherit     ;
     font-size       : inherit     ;
     font-weight     : normal      ;
     color           : white       ;
     outline         : none        ;
     border-width    : 0px         ;
     line-height     : 40px        ;
     background-color: transparent ;
     border-bottom   : 1px dashed #444; }

textarea:focus, input[type="text"]:focus {
     background-color: #222        ;
  border-bottom-color: #888        ; }

.textfocus {
     background-color: #222        ;
  border-bottom-color: #888        ; }

.fancy {line-height: 1.2em;}


/* structural */
.page    { width       : 93.5%     ;
           margin      : 2em auto  ;
           max-width   : 1200px    ;
           min-width   : 480px     ;
	        margin-bottom: 20em      ;
           overflow    : auto      ;
           min-height  : 30em      ; }

.sidebar { width       : 11.36364% ;
           padding     : 1em 2.273%;
           position    : relative  ;
           margin-right: -2.273%   ;
           margin-top  : 2em       ;
           border      : 2px solid white;
           z-index     : 1         ;
           float       : left      ;
           color       : #000      ; }

.sidebar img { 
         padding-bottom: 1em       ; }

.sidebar p {
   text-align: left;
	 margin-bottom : 3em       ; }

.content { width       : 81.8182%  ;
           background-color: #fff  ;
           padding     : 1em 1.136%;
           padding-top : 0em       ;
           z-index     : 2         ;
           position    : relative  ;
           float       : right     ;
           color       : #fff      ; }

.splash  { overflow    : auto      ;
           margin      : 0 -1.3884%;
	         position    : relative  ; }

.splashimg  { 
	   float       : right     ;
     width       : 100%      ; }

.thumbnail {
	   position    : absolute  ;
	   z-index     : 1         ; }

.thumbnail a:hover {
     text-decoration: none   ; }


.splashheader h1 {
         display : block;
        padding  : 0em 0.3em ;
        margin   : 0.1em 0   ; }

.splashheader p {
        padding  : 0.3em 0.3em ;
        display  : inline-block ; }

.splashheader  { 
        position : absolute  ; 
	      top      : 50%       ;
	      left     : 2.0826662%;
	      width    : 60%       ;
	      padding  : 0em 0.3em ;
	      z-index  : 2         ; }

.midsect { background-color: #1c1f21;
           border-top   : 1px solid #6d6f6f;
           border-bottom: 1px solid #6d6f6f;
           padding     : 1em 1.39% ;
           padding-bottom: 2.5em   ;
           overflow    : auto      ;
           position    : relative  ;
           margin      : 0em -1.39%;
          margin-bottom: 2em       ; }

.column  { float       : left      ;
           width       : 30.5556%  ;
           margin      : 0 1.38889%; }

.twocolumn  { 
           float       : left      ;
           width       : 63.88889% ;
           margin      : 0 1.38889%; }

.blank-right {
           margin-right: 30.5556%; }
}

.minicol   {
           float       : left      ;
           width       : 47.619%   ; }

.gutter    {            
           margin-right: 4.545%    ; }

.small   { font-size   : 0.725em   ; 
           line-height : 166%      ; }
.large   { font-size   : 0.875em   ; 
           line-height : 166%      ; }
.normal  { font-size   : 0.750em   ; 
           line-height : 166%      ; }
.right{
  float: right;
}


/* package page */

a.enquire-button {
       background-color: transparent;
       color           : #B6D447   ;
       padding         : 1.0em 0   ;
       display         : block     ;
       text-align      : center    ;
       font-weight     : bold      ;
       margin-top      : 0.7em     ;
       border          : 3px solid #1c1f21   ; } /* dark grey */

a.enquire-button:hover {
       text-decoration : none      ;
       border          : 3px solid #2c2f31   ;	
       background-color: #111      ; }

.package-preview {
       padding-top     : 0.7em     ;
       float           : left      ; }
.package-preview p {
       margin-top      : 0.4em     ; } 

.package-thumb {
       float           : right     ; }

.package-list li {
       padding         : 0.3em 0   ; }

.package-list a {
       color           : #6d6f6f     ; }

.package-list-div span {
       padding-left    : 2em       ; 
       color           : #6d6f6f   ; }/* light grey */
  
.package-list a:hover {
       text-decoration : none      ;
       color           : white     ; }/* light grey */

.package-div {
       z-index         : 2         ;
       position        : relative  ; }

.package-link-bg {
       background-color: #272927   ;
       position        : absolute  ;
       top             : 0px       ;
       bottom          : 0px       ;
       width           : 32.638893%;
       z-index         : 1         ;
       left            : 0px       ; }
        
/* folio page */
.folio img {
       padding         : 0.8em 0   ; }

.folio-link {
       padding-bottom  : 1em       ;
       padding-top     : 0.3em     ; }

/* news page */
ul.sections {
       list-style-type : none      ; }
.sections li {
       padding-right   : 0.3em     ;
       float           : left      ; }

/* button */
.button-div {
           color       : #1c1f21   ;
	         text-align  : center    ;
           width       : 100%      ; }

       
.button {  padding     : 0.1em     ;
           width       : 130%      ;
           position    : relative  ; }

.button span {
           font-size   : 1.375em   ; }

.button a {
           text-align  : left      ;
           line-height : 1.5em     ; }

.button a:hover {
	text-decoration: none      ;
           color       : #6d6f6f   ; }

a.selected {
	   font-weight : bold   ;
     color       : #cf2200; } /* red */

a.unselected {
           color       : #1c1f21   ; }

/* contact */
p.contact {
           margin      : 0.5em 0em ; } 

p.recessive {
           color       : #6d6f6f   ; } /* light grey */

.contact-send-link     {
           color       : #b6d447   ;
           background  : none      ;
           float       : right     ;
           border      : none      ; }

/* hacks */
.clearing {overflow    : hidden    ; }

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

.emphasis {
   font-style: italic; }

.highlight {
           color       : #cf2200; } /* red */
a.mail {text-decoration: underline; color: #1c1f21;}
a.mail:hover {color: #b6d447;}

.alpha {
  background: transparent url(/static/images/transparent.png) repeat; }
 
.darkalpha {
  display: inline;
  background: transparent url(/static/images/dark-transparent.png) repeat; }

.ui-pointer {cursor    : pointer   ; }

.fullwidth { width     : 100%      ; }
.short {     width     : 70%       ; }

.outline { border      : 1px solid #aaa; }
/* light-grey : #6d6f6f 
 dark-grey : #1c1f21 */
.whiteoutline { border : 1px solid white;  }

.curvy   { 
           border-radius: 0.625em  ;
      -moz-border-radius: 0.625em  ;
   -webkit-border-radius: 0.625em  ; }

.linklist {
	 list-style-type: none     ; }

/* remainder h2 heading */
.fancy h2 {
   margin-bottom  : 0.5em    ; }

.hspace {
	padding-top     : 0.5em    ; }

.usertext p {
  padding : 0.3em 0;
}

.usertext ul, .usertext ol {
  padding-left: 1.3em;
}

.usertext ul {
  list-style: disc outside;
}

.usertext ol {
  list-style: decimal outside;
}

.usertext h3 {
  padding-top: 0.5em;
}

.focus-bg {
  background-color : #222 ; }


.dropdown-intro { 
	float      : left          ; }

li.dropdown {
     padding       : 0 0.8em       ;
	float      : left          ;
	position   : relative      ; }

ul.dropdown {
	display    : none          ;
	border     : 1px solid white;
     border-bottom : none          ;
	position   : absolute      ;
	bottom     : 1.4em         ;
	z-index    : 2             ;
	left       : 0             ; }

ul.dropdown a {
   background-color: black         ; 
	display    : block         ;
        padding    : 0 0.8em       ;  }

li > ul {
	top        : auto          ;
	left       : auto          ; }

li:hover ul {
	display    : block         ; }

a.ct-button {
  padding: 0.3em 1em;
  margin-top: 10px;
  font-size: 16px;
  background-color: white;
  line-height: 2em;
  border: 1px solid black;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  -moz-border-radius: 4px;
  display: inline-block;
  -webkit-border-radius: 4px;
  text-decoration: none;

  color: #222;
  font-weight: bold;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);

  background: rgb(182, 212, 71);
  background: rgba(182, 212, 71, 0.98);
}

a.ct-button:hover {
  color: black;
  background: rgb(182, 212, 71);
}

a.cta-button {
  background: none repeat scroll 0 0 #CF2200;
  border-bottom: 1px solid #851600;
  border-radius: 5px 5px 5px 5px;
  border-top: 1px solid #eb2700;
  color: white;
  display: block;
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  text-shadow: -1px -1px #851600;
}

a.cta-button:hover, a.cta-button.grey:hover, a.cta-button.red:hover {
 background-color: #b6d447;
  border-bottom: 1px solid #7f9432;
  border-top: 1px solid #cce17e;
  text-shadow: -1px -1px #cce17e;
  color: #444;
}

a.cta-button.red {
  background-color: #CF2200;
  border-bottom: 1px solid #851600;
  border-top: 1px solid #eb2700;
  text-shadow: -1px -1px #851600;
  color: white;
}

a.cta-button.green {
  background-color: #b6d447;
  border-bottom: 1px solid #7f9432;
  border-top: 1px solid #cce17e;
  text-shadow: -1px -1px #cce17e;
  color: #444;
}

a.cta-button.grey {
  background-color: #6d6f6f;
  border-bottom: 1px solid #575959;
  border-top: 1px solid #999a9a;
  text-shadow: -1px -1px #575959;
}

.cta-button-holder, .contact-form {
  width: 30%;
  position: absolute;
  top: 60%;
  right: 2.083%;
  z-index: 2;
}

.cta-button-holder form {
  padding: 10px;
}


.btn {

  border: 1px solid #5E5E5E;
background-color: #E95C41;
background-image: -webkit-gradient(linear, left top, left bottom, from(#E95C41), to(#D93E2A));
background-image: -webkit-linear-gradient(top, #E95C41, #D93E2A);
background-image: -moz-linear-gradient(top, #E95C41, #D93E2A);
background-image: -ms-linear-gradient(top, #E95C41, #D93E2A);
background-image: -o-linear-gradient(top, #E95C41, #D93E2A);
background-image: linear-gradient(to bottom, #E95C41, #D93E2A);

  float: right;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
border-radius: 7px 7px 7px 7px;
color: white;
display: block;
font-size: 18px;
line-height: 22px;
text-align: center;

padding: 15px 10px;
}

.btn:hover {
  cursor:pointer;
  background-color: #bbd94c;
}
.product-header {
  padding-top: 1em;
}

.product-header p {
  padding-top: 0.3em;
}

.attribution {
  float: right;
  padding: 0.5em 0;
}
.learnmore {
  position: absolute;
  right: 2.083%;
  width       : 30.5556%  ;
  bottom: 2.5em;
}

.contact-form {
  top: 50%;
}
.enquire-online {
  display: none;
}

.phonenumber {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(100, 100, 100, 0.2);
  border-left: 1px solid rgba(100, 100, 100, 0.2);
}
/* media queries */

@media (min-width: 4px) and (max-width: 768px) {

  .column {
    width       : 63.88889% ;
  }
  .twocolumn {
    width: 97.5%;
  }

  h1 { font-size : 2.0em;
       line-height: 1em;
      }
  .splashheader {
    width: 95%;
    top: 5%;
  }
  .cta-button-holder {
    width: 63.889%;
    bottom: 2%;
    left: 2.083%;
    top: auto;
    right: auto;
  }
  a.cta-button {
    height: 40px;
    line-height: 40px;
  }

  .button {
    padding: 0.7em 0;
  }

  .learnmore {
    position: relative;
    right: auto;
    bottom: auto;
    width: 63.88889%;
  }

  /* hide the intro text about us at small sizes.*/
  .sidebar p.small {display: none;}
  .sidebar span {display: none;}
  .button-div {display: none;}

  .enquire-online {
    display: block;
  }
  .contact-form {
    display: none;
  }

}

@media (min-width: 768px) and (max-width: 980px) {
  a.cta-button { font-size: 1.2em;}

  .contact-form {
    top: 30%;
  width: 37%;
  right: 0;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  h1 { font-size: 2em;}
}