/*

COLOURS:
light grey: #BFC1C1
dark grey: #808383
red: #C31C0C
green: green
yellow: #FFCC33
*/

body {
 padding: 0; margin: 0; height: 100%;
 font-size: 62.5%;
 background-image: url(logo.gif);  background-position: 0 0; background-repeat: repeat-y; background-color: #fff;
}
a:focus {outline: none;}
.clear {clear: both;}
b {color: #C31C0C;}
div, p, address, li, h1, h2, ul, img, ol {
 padding: 0; margin: 0;
 font-family: Trebuchet MS, Tahoma, Arial, Verdana, helvetica, Sans-Serif; color: #808383; font-size: 18px;
}
#randomImage { overflow: hidden;}
#randomImage div {
 right: 40px;position: absolute;
 background-color: #808383;
}
#randomImage div img {display: block; border: none;}
#image1 {top: 75px; clip: rect(0 370px 100px 270px); }
#image2 {top: 205px; clip: rect(0 370px 100px 270px);}
#image3 {top: 335px; clip: rect(0 370px 100px 270px);}
#randomImage a:link, #randomImage a:visited {border: none; color: #fff; display: block; }

#content {
 padding: 67px 220px 0px 210px;
}
#menu {
 position: fixed; bottom: 0px; right: 0px; width: 100%;
 background-color: #808383;list-style: none;
}
#menu li {
 display: block; padding: 0.27em 1em 0.27em 1em; float: right; margin: 0px;
 list-style: none;
}
#menu li a:link, #menu li a:visited {color: #fff;}
#menu li a:hover,#menu li a.ms:link,#menu li a.ms:visited  {color: #FFCC33;}

#content h1, #content h2 {text-transform: lowercase; padding-top: 0.3em; }
#content h1 {color: #FFCC33; font-size: 1.3em; line-height: 0.8em; margin-bottom: 0.9em; text-transform: uppercase;}
h2 {color: green; margin-top: 20px; font-size: 1.1em;text-transform: lowercase;}
h3 {color: #C31C0C; margin-top: 1em; font-size: 1em;text-transform: lowercase; text-align: right; }
#content q {font-style: italic;}
#content p {
 margin-top: 0.5em;
 margin-bottom: 0.5em;
 line-height: 1.3em;
 text-align: justify;
}
#content p.noBottomMargin {
 margin-bottom: 0;
}
#content ul, #content ol {padding: 0.1em 0 0.3em 1.7em;}
#content li {
 padding: 0.3em 0;
 list-style-position: outside; list-style-image: url(bullet.gif);
 text-align: justify;
}
#content ol li { list-style-image: none;}
#content address {font-style: normal;}

a:link {color: #333;}
a:link, a:visited {text-decoration: none; border-bottom: 1px dotted #808383;}
a:visited  {color: #808383;}
a:hover {border-color: #FFCC33;}
a[href^="http://"]{
 background:transparent url(externalLink.gif) no-repeat scroll right center;
 padding-right:13px; display:inline;
}
h2 a {color: green!important; border: none!important;}
h2 a:hover {color: #C31C0C!important; }
h2 a:visited {}
#shareThis li a[href^="htt"], #shareThis li a[href^="mail"] {
 background-image: none;
 padding: 0;
 border: none;
}
a[href^="http://www.sunnysideup.co.nz/"]{
 background-image:none;
 padding-right:0pt;
}
a.outsideLink {
 background:transparent url(externalLink.gif) no-repeat scroll right center;
 padding-right:13px; display:inline;
}
.faded { visibility: hidden;}
.notFaded {visibility: visible;}

#toc {position: fixed; top: 0px; right: 40px; width: 730px; font-size: 0.8em; text-align: right; z-index: 9999;}
#innertoc {margin-top: 0.33em}
 #contentheader {color:  #fff; background-color: #808383; border-top: 20px solid #808383; padding: 0 0.3em 0 0.3em; filter: alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; zoom: 1;}
 #contentheader:hover {color:  #BF9A2B; cursor:pointer; cursor: hand; filter: alpha(opacity=100); -moz-opacity:1; opacity:1; opacity:1; }
 #innertoc div {display: none;  background-color: #fff;}
 #innerSanctum {padding-right: 27px;}
 #innerSanctum .indent{font-size: 0.7em;}

 #innertoc a {
  display: block; padding: 2px 20px 2px 5px; overflow: hidden; width: 100%; margin-right: 20px;
  background-image: url(line.gif); background-position: 100% 50%; background-repeat: no-repeat;
  text-transform: lowercase;
 }
 #innertoc a:link, #innertoc a:visited {border: none;  color: #808383;}
 #innertoc a:visited {text-decoration: strike-through;}
 #innertoc a:hover {background-color: #FFCC33; color: #BF9A2B; }


iframe {width: 100%; height: 500px; border: 0px solid #808383;}

/* SHARE THIS */
#shareThis  {margin-top: 40px; margin-left: 210px; }
#shareThis ul {padding: 0; margin: 0; }
#shareThis li {list-style: none; width: auto; float: left; padding: 0; margin: 0; font-size: 0.67em;display: block; height: 30px; }
#shareThis li.first {}
#shareThis li.last {margin: 0 10px 40px 0; }
#shareThis li a:link  { }
#shareThis li a:hover, #shareThis li a:visited {filter: alpha(opacity=50); -moz-opacity:0.5; padding: 0 10px 0 0;opacity:0.5;}
#shareThis li a img {border: none; margin-right: 5px; }


/* CONTACT PAGE */
#paypalButton {
 width: 150px; height: 52px; display: block;
 background-image: url(paypalPay.gif); text-indent: -2000px;cursor:pointer;
}
#paypalButton:hover {
 background-position: 1px 1px;
}
#skypeButton { display: block;}
#skypeButton .contactHeading {float: left;}
#skypeButton a:link, #skypeButton a:visited  { border: none; display: block;}
#skypeButton a img { border: none;}

#newsletter label  {clear: both; width: 100%; display: block;}
#newsletter label span {width: 150px; text-align: right; float: left; display: block;;}
#newsletter label input {margin-left: 170px; display: block; width: 275px;}
#newsletter label input.subscribe {width: auto;}

/* PRICING */
th, td {
 margin:0;
 border: 0;
 padding: 0.2em; font-size: 0.8em;
 border-left: 1px solid #fff;border-top: 1px solid #fff;
 background-color: #BFC1C1; color: #808383;
}
th {text-align: left;}
td.price, th.price {text-align: right;}
table a:link, table  a:visited {color: #808383;}


/* PORTFOLIO */

ul#portfoliolist {margin: 0 0 0 0px; padding: 0}
#portfoliolist li {float: left; width: 252px; margin: 20px; list-style: none;}
 #portfoliolist li.even {clear: both; margin: 0px 40px 40px 0px;}
 #portfoliolist li.uneven {margin: 0 0 40px 0;}
 #portfoliolist li img {display: block; border: 1px solid #808383;}
 #portfoliolist li p {font-size: 0.67em; color: #000; padding: 0.3em;}
  #portfoliolist li a:link, #portfoliolist li a:visited {border: none; text-decoration: none; color: #000; font-weight: bold;}
   #portfoliolist li span {color: #808383; text-align: left;}
   #portfoliolist li span a:link, #portfoliolist li span a:visited {font-weight: normal;color: #808383; }
   #portfoliolist li span a:hover {background-color: #FFCC33;}
dt {font-weight: bold; margin-top: 0.5em;}
dd {border-bottom: 1px solid #FFCC33; text-align: justify; padding-bottom: 0.3em;}
dl { margin-bottom:1em; }


#imageGallery a {
 display: block;
 width: 75px;
 height: 92px;
 float: left;
 text-align: center;
 border-bottom: none;
 margin: 40px 38px 0 0;
 background-image: url(polaroid.jpg);
 background-repeat: no-repeat;
}

#imageGallery a span.polaroidFrame {
 width: 60px;
 height: 60px;
 overflow: hidden;
 display: block;
 margin: 12px auto;
}
#imageGallery a img {
 display: inline;
 margin: 0;
 border: none;
}
#imageGallerySection .pageLinks, #imageGallerySection a.currentPageLink {padding: 0 10px; border: none;}
#imageGallerySection a.pageLinks:hover, #imageGallerySection a.currentPageLink{color: green; font-size: 1.3em}

/* [SERVICES] */
h4.subHeading {margin-top: -0.55em; font-weight: normal; color: #C31C0C; font-size: 0.7em; font-style: italic;}
#quickSelectorsP {font-size: 0.7em; }
#quickSelectorsP  span {display: block;}
#quickSelectorsP a.selectedQuickCurrency, #quickSelectorsP a.selectedQuickCode {color: #C31C0C !important;}
#basicQuote th, td {font-size: 0.70em; vertical-align: top; padding: 5px;}
#basicQuote thead th {background-color: green; color: #fff;}
#basicQuote tbody th {background-color: #808383!important; color: #FFCC33!important;}
#basicQuote tbody td {color: #333;}
#basicQuote tbody td b {color: grey;}
#basicQuote tbody td.p {text-align: right; width: 5em;}
#basicQuote tbody a {text-align: right; width: 5em; color:#FFCC33;}

.previousNext {clear: both;}
.previousNext a:link, .previousNext a:visited {color: #C31C0C; font-weight: bold;}
.quoteSection {display: none;}
#quoteSectionZero {display: block;}
#rateCalculator div.enterDetails  {width: 47%; float: left;}
 #rateCalculator div#contactDetailsSelector  {width: 94%; }
 #rateCalculator div#contactDetailsSelector label  {width: 47%; float: left;}
 #rateCalculator div#codeSelector {width: 100%; }
  #rateCalculator div#codeSelector label {padding-bottom: 0.5em}
  #rateCalculator div#codeSelector span {font-weight: normal !important; color: #808383; display: block; margin: 0 0 7px 33px; line-height: 1}
 #rateCalculator div#calculatorUrl {width: 100%; }
 #rateCalculator div p {font-size: 1em;  color: green; font-weight: bold;}
#rateCalculator table {clear: both;width: 94%;}
 #rateCalculator .row {display: none;}
  #rateCalculator thead th, #rateCalculator tfoot th {background-color: green; color: #fff;  filter: alpha(opacity=75); -moz-opacity:0.75; opacity:0.75;}
  #rateCalculator thead th a:focus {outline:0;}
  #rateCalculator th, #rateCalculator td, #rateCalculator p.small {color: #333;font-size: 0.7em; padding: 7px; }
  #rateCalculator .qtyCell {width: 2em; text-align: center;}
  #rateCalculator .currencyCell {width: 7em; text-align: right;}
  #rateCalculator tr.subHeadingRow th {text-align: right; padding-top: 20px;}
   #rateCalculator tr.subHeadingRow th.lefty {text-align: left;}
   #rateCalculator tr.subHeadingRow th span {color: #333; font-weight: normal;display: block;}
   #rateCalculator tr.subHeadingRow th span .houseIntro {font-size: 0.7em; font-style: normal; display: block;}
  #rateCalculator tr td {color: #333; filter: alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; vertical-align: top;}
  #rateCalculator tr.selectedRow td {color: #000;  filter: alpha(opacity=75); -moz-opacity:0.75; opacity:0.75;}
   #rateCalculator td input {width: 1.5em; text-align: right;}
   #rateCalculator td span {font-style: italic; color: #333;}
   #rateCalculator td .moreLink:link, #rateCalculator td .moreLink:visited, a.groupExplanation {color: #000; font-weight: bold; border: none;}
   #rateCalculator thead th a:link, #rateCalculator thead th a:visited {color: #fff; text-decoration: underline;}
   #rateCalculator td a:focus {outline: none;}
#rateCalculator p.calculatorSubmit label {width: 47%; float: left; line-height: 1.3; text-align: left;}
#rateCalculator label {display:block;margin-left: 7px; color: #333; font-size: 0.7em;}
 #rateCalculator label input {margin: 0 20px 0 0px;}
#rateCalculator textarea {vertical-align:top; font-size: 0.9em; width: 95%;}
#rateCalculator input.addressInput {width: 95%;}
#rateCalculator input.confirm {width: 3em; text-align: center;}
#rateCalculator input.submitInput {width: 95%; padding: 0px; display: block; font-weight: bold; padding: 7px; margin-top: 10px;color: #C31C0C; }
 #rateCalculator input.submitInput:hover, #rateCalculator input.addressInput:focus {background-color: green; color: #fff;}



/* quotes */
#quoted {border-collapse: collapse; }
 table#innerQuoted {margin-bottom: 3em;}
 #quoted li {text-align: left !important;}
 #quoted tr {}
 #quoted p {text-align: left;}
  #quoted tr:hover td {background-color: green !important; color: #fff !important;}
  #quoted tr:hover td b {color: #fff !important;}
  #quoted  th, #quoted  td { padding: 0.3em; background-color: #e8e8e8; }
  #quoted  th a:link, #quoted  td a:link,  #quoted  th a:visited, #quoted  td a:visited {}
  #quoted th {font-size: 1.07em;}
  #quoted td {vertical-align: top; text-align: justify; }
   #quoted td.price, #quoted th.price {text-align: right;}
   #quoted td i {display: block; padding: 0.3em 0; font-size: 0.77em;}

/* HOME PAGE */
#testimonials p {font-size: 0.85em; }
#topPortfolio a {display: block; float: left; margin: 15px; border: 0px solid #fff!important; text-decoration: none;}
#topPortfolio a img {border: 5px solid #BFC1C1;}
#topPortfolio a:hover img {border: 5px solid #FFCC33;}

/* organic */