/*------------ General Page Rules ----------------------------------------------------------*/


body, html
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

h1, h2, h3, h4, h5, p, ul, ol, li, form, hr
{
margin: 0;
padding: 0;
}

BODY, TABLE 
{
font-family: Arial, Helvetica, sans-serif; 
font-size:12px; 
color:#58595b; 
}

/* ----------- Colours -------------------------*/

/*
Light Grey: #cccccc
Dark Grey: #818285
Light Blue: #9bd1e5
Medium Blue: #65a8c1
Light Green: #c0cfa5
Medium Green: #7b8b38
Light Brown #d2c4a5
Medium Brown #D2C5A5
*/

/* ----------- General Page Rules -------------------------*/

h1
{
margin: 15px 0px 8px;
padding:0px 0px 3px 0px;
color: #024964;
font-size: 18px;
font-style:italic;
text-transform: uppercase;
width:100%;
background:url(http://www.arahanga.co.nz/images/style/headingUnderline.png) bottom left repeat-x;
font-weight:300;
}

h2
{
margin: 10px 0px;
color: #004964;
font-size: 14px;
text-transform: none;
font-weight:300;
}

h3
{
margin: 5px 0px;
color: #697D91;
font-size: 14px;
text-transform: none;
font-weight:400;
}

p
{
line-height: 19px;
margin: 12px 0px;
}

ul
{
margin: 10px 0px;
padding: 0px 0px 0px 20px;
}

ol
{
margin: 10px 0px;
padding: 0px 0px 0px 20px;
}

li
{
margin: 3px 0px;
}

li p
{
margin: 0;
line-height: 19px;
}

hr
{
margin: 15px 0px;
border: none;
background: none;
border-bottom: #ccc;
}

a
{
color: #0C4A64;
text-decoration:none;
}

a:hover
{
color: #58595b;

}

td
{
vertical-align: top;
}

a img
{
border: none;
}


/* ----------- Site Wide Rules -------------------------*/

/*------------ Main Containers ---------------------------------------*/


.container
{
margin: 0px auto;
width: 851px;
text-align: left;
}

.bgContainer
{
width: 851px;
float: left;
position: relative;
height: auto;
}

body
{
/*background: 100% width tile here */
}

#wrap
{
position: relative;
z-index: 2;
min-height: 100%; 
width: 100%; 
/*background: 100% height tile here */
}

#main
{
overflow:hidden;
padding-bottom: 45px ; /* must be same height as the footer */
}

#header
{
float: left;
position: relative;
z-index: 50;
width: 851px;
height: 205px;
margin:19px 0px 0px 0px;
background:url(http://www.arahanga.co.nz/images/style/header_bg.png) top left no-repeat;
}

#content
{
float: left;
position: relative;
z-index: 40;
width: 851px;
min-height: 400px;
background:url(http://www.arahanga.co.nz/images/style/content_bg.png)right -65px no-repeat;
}

#centerCol
{
float: left;
position: relative;
width: 851px;
min-height: 400px;

}

#default #centerCol
{
float: left;
position: relative;
width: 851px;
min-height: 400px;
}

#leftCol
{
float: left;
position: relative;
width: 214px;
border-right: 1px solid #ccc;
min-height: 400px;
margin: 25px 0px 0px 0px;
}

#rightCol
{
float: right;
position: relative;
width: 140px;
min-height: 400px;
margin:108px 0px 0px 0px;
border:none;
}

#default #rightCol
{
float: right;
position: relative;
width: 140px;
min-height: 400px;
margin:74px 0px 0px 0px;
border:none;
}

#footer {
position: relative;
width: 100%;
clear: both;
z-index: 60;
margin: -45px 0px 0px 0px;
height: 45px;
background:none;
background:url(http://www.arahanga.co.nz/images/style/footer_bg.jpg) bottom center no-repeat;
} 

#footer .container
{
margin: 0 auto;
width: 846px;
text-align: left;
}

#footer .bgContainer
{
float: left;
position: relative;
width: 846px;
height: 45px;
margin: 0px;
padding: 0px;
background:none;
border-bottom:none;
}

#bottomStrip
{

}

/*------------ Module/Element Specific Rules ---------------------------------------*/


/******* Header Elements ***********/

#header a.logo
{
float: left;
position: relative;
margin: 22px 0px 0px 295px;
}

#header a.logo img
{

}

#indent
{
float: left;
position: relative;
margin:-13px 0px 0px 20px;
padding:0px 0px 0px 0px;
}


/******* Home Callouts Container ***********/

#homeCallouts
{
float: right;
position: relative;
margin: 12px 9px 20px 0px;
padding:0px 0px 40px 0px;
width: 560px;
border-bottom:1px solid #004964;
}

/******what We Do Callout*******/

#homeCallouts #whatWeDoCallout
{
float: left;
position: relative;
}

#homeCallouts #whatWeDoCallout .moduleComponentcallouts
{
float: left;
position: relative;
width:371px;
height:214px;
background:url(http://www.arahanga.co.nz/images/style/whatWeDoCallout_bg.png) top left no-repeat;
}

#homeCallouts #whatWeDoCallout .moduleComponentcallouts .bannerTitle
{
color: #024964;
font-size: 13px;
font-style:italic;
text-transform: uppercase;
padding:0px 0px 3px 10px;
margin:18px 0px 0px 0px;
width:130px;
font-weight:bold;
}

#homeCallouts #whatWeDoCallout .moduleComponentcallouts .bannerHtmlContent
{
padding:0px 0px 0px 10px;
margin:0px 0px 0px 0px;
width:341px;
}

#homeCallouts #whatWeDoCallout .moduleComponentcallouts .bannerHtmlContent h2
{
padding:0px 0px 3px 0px;
margin:0px 0px 0px 0px;
color: #024964;
font-style:italic;
font-size:12px;
}

#homeCallouts #whatWeDoCallout .moduleComponentcallouts .bannerHtmlContent p
{
font-size:11px;
line-height:12px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}

#homeCallouts #whatWeDoCallout .moduleComponentcallouts .bannerHtmlContent img
{
margin:0px 0px 0px 0px;
padding:5px 0px 0px 10px;
}

#homeCallouts #whatWeDoCallout .moduleComponentcallouts .bannerHtmlContent a
{
color: #024964;
text-decoration:none;
}

#homeCallouts #whatWeDoCallout .moduleComponentcallouts .bannerHtmlContent a:hover
{
text-decoration:underline;
}


/******Design Unit Callout*******/

#homeCallouts #designUnitCallout
{
float: right;
position: relative;
}

#homeCallouts #designUnitCallout .moduleComponentcallouts
{
float: left;
position: relative;
width:185px;
height:215px;
background:url(http://www.arahanga.co.nz/images/style/designCallout_bg.png) top left no-repeat;
margin:0px -10px 0px 0px;
}

#homeCallouts #designUnitCallout .moduleComponentcallouts .bannerTitle
{
color: #024964;
font-size: 13px;
font-style:italic;
text-transform: uppercase;
padding:5px 0px 5px 11px;
margin:15px 0px 0px 0px;
width:180px;
font-weight:bold;
}

#homeCallouts #designUnitCallout .moduleComponentcallouts .bannerHtmlContent
{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
width:165px;
height:164px;
}

#homeCallouts #designUnitCallout .moduleComponentcallouts .bannerHtmlContent h2
{
padding:0px 0px 3px 0px;
margin:0px 0px 0px 0px;
color: #024964;
font-style:italic;
}

#homeCallouts #designUnitCallout .moduleComponentcallouts .bannerHtmlContent ul li
{
font-size:11px;
line-height:12px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
color:#58595b;

}

#homeCallouts #designUnitCallout .moduleComponentcallouts .bannerHtmlContent a img
{
float: left;
position: relative;
margin:0px -9px 6px 1px;

}

#homeCallouts #designUnitCallout .moduleComponentcallouts .bannerHtmlContent a
{
float: right;
position: relative;
color: #024964;
text-decoration:none;
margin:-10px -3px 0px 0px;
font-weight:400;
font-size:11px;
font-style:normal;
}

#homeCallouts #designUnitCallout .moduleComponentcallouts .bannerHtmlContent a:hover
{
text-decoration:underline;
}


/******Contact us Callout*******/

.contact_us #rightCol #contactCallout
{
display:none;
}

#rightCol #contactCallout
{
float: right;
position: relative;
}

#rightCol #contactCallout .moduleComponentcallouts
{
float: left;
position: relative;
width:135px;
height:157px;
background:url(http://www.arahanga.co.nz/images/style/contactCallout_bg.png) top left no-repeat;
margin:0px -4px 15px 0px;
}

#rightCol #contactCallout .moduleComponentcallouts .bannerTitle
{
color: #024964;
font-size: 13px;
font-style:italic;
text-transform: uppercase;
padding:5px 0px 0px 11px;
margin:10px 0px 0px 0px;
width:135px;
font-weight:bold;
}


#rightCol #contactCallout .moduleComponentcallouts .bannerHtmlContent
{
padding:0px 0px 0px 0px;
margin:70px 0px 0px 0px;
width:135px;
}

#rightCol #contactCallout .moduleComponentcallouts .bannerHtmlContent h2
{
padding:0px 0px 3px 0px;
margin:0px 0px 0px 0px;
color: #024964;
font-style:italic;
border:1px solid #FF0000;
}

#rightCol #contactCallout .moduleComponentcallouts .bannerHtmlContent p
{
font-size:11px;
line-height:12px;
padding:0px 15px 0px 12px;
margin:0px 0px 0px 0px;

}

#rightCol #contactCallout .moduleComponentcallouts .bannerHtmlContent img
{
float: left;
position: relative;
margin:-8px 0px 4px 0px;
}

#rightCol #contactCallout .moduleComponentcallouts .bannerHtmlContent a
{
float: right;
position: relative;
color: #024964;
text-decoration:none;
margin:-13px -3px 0px 0px;
font-weight:bold;
font-size:11px;
font-style:italic;
}

#rightCol #contactCallout a .moduleComponentcallouts .bannerHtmlContent p
{
color: #6c6d6f;
}


#rightCol #contactCallout a:hover .moduleComponentcallouts .bannerHtmlContent p
{
color:#0C4A64;
}

#rightCol #contactCallout .moduleComponentcallouts .bannerHtmlContent a:hover
{
text-decoration:underline;
}

/******Our Clients Callout*******/

#rightCol #clientsCallout
{
float: right;
position: relative;
}

#rightCol #clientsCallout .moduleComponentcallouts
{
float: left;
position: relative;
width:135px;
height:228px;
background:url(http://www.arahanga.co.nz/images/style/ourClientsCallout_bg.png) top left no-repeat;
margin:0px -4px 0px 0px;
}

#rightCol #clientsCallout .moduleComponentcallouts .bannerTitle
{
color: #024964;
font-size: 13px;
font-style:italic;
text-transform: uppercase;
padding:5px 0px 5px 11px;
margin:10px 0px 0px 0px;
width:135px;
font-weight:bold;
}

#rightCol #clientsCallout .moduleComponentcallouts .bannerHtmlContent
{
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
width:145px;
}

#rightCol #clientsCallout .moduleComponentcallouts .bannerHtmlContent h2
{
padding:0px 0px 3px 0px;
margin:0px 0px 0px 0px;
color: #024964;
font-style:italic;
border:1px solid #FF0000;
}

#rightCol #clientsCallout .moduleComponentcallouts .bannerHtmlContent p
{
font-size:11px;
line-height:14px;
padding:0px 15px 0px 12px;
margin:0px 0px 0px 0px;

}

#rightCol #clientsCallout .moduleComponentcallouts .bannerHtmlContent img
{
float: left;
position: relative;
margin:5px 0px 8px 0px;
}

#rightCol #clientsCallout .moduleComponentcallouts .bannerHtmlContent a
{
float: right;
position: relative;
color: #024964;
text-decoration:none;
margin:7px 8px 0px 0px;
font-weight:400;
font-size:11px;
font-style:normal;
}

#rightCol #clientsCallout .moduleComponentcallouts .bannerHtmlContent a:hover
{
text-decoration:underline;
}

/******* Page Editor Container ***********/

#pageEditorContent
{
float: left;
position: relative;
width: 561px;
padding: 12px 0px 12px 0px;
margin: 23px 0px 0px 19px;
border-bottom:1px solid #004964;
}

#default #pageEditorContent
{
float: left;
position: relative;
width: 561px;
padding: 12px 0px 12px 0px;
margin: 23px 0px 25px 19px;
border-bottom:1px solid #004964;
}

#default #pageEditorContent img
{
border:none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background:#F0F0F0;
behavior:url(http://www.arahanga.co.nz/stylesheets/PIE.htc);
}

#default.about_us #pageEditorContent table td
{
border-bottom:1px solid #004964;
line-height:19px;
}

#default.about_us #pageEditorContent
{

border-bottom:none;
}


/* Footer Menu  */

#footerMenuOne,
#footerMenuTwo,
#footerMenuTwo
{
float: left;
position: relative
width: 150px;
}


/* Copyright */

#copyright
{
float: left;
position: relative;
width: 100%;
text-align: center;
color: #58595b;
margin: -20px 0px 0px 0px;
}

#copyright p
{

}

#copyright p a
{
text-decoration:none;
color: #58595b;
}

#copyright p a:hover
{
text-decoration:none;
color: #0C4A64;
}

/* Left Column Navigation */


#leftNavigation
{
float: left;
position: relative;
margin-top:46px;
}

#leftNavigation ul
{
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
}

#leftNavigation ul li
{

}

#leftNavigation ul li a 
{
display: block;
width: 124px;
padding: 0px 0px 4px 0px;
background:none;
margin: 10px 0px 10px;
color: #58595b;
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
background: url(http://www.arahanga.co.nz/images/style/navLines.png)bottom left repeat-x;
font-style:italic;
}

#leftNavigation ul li a:hover
{
color:#004963;
}

#leftNavigation ul li ul
{
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
}

#leftNavigation ul li ul li
{
background: none;
}

#leftNavigation ul li ul li a 
{
display: block;
width: 128px;
padding: 6px 0px;
background: none;
margin: 0px 0px;
color: #656565;
font-size: 14px;

text-transform: uppercase;
font-family: Arial;
text-decoration: none;
}

#leftNavigation ul li ul li a:hover 
{

}

/* Form Element (Email, newsletter, competition, survey) Styling ------------------------*/


#emailForm,
#subscribeForm,
#surveyTable,
#alertForm,
#registrationForm 
{
float: left;
width: 97%;
padding: 10px;
margin: -25px 0px 30px 0px;
border:none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background:#F0F0F0;
behavior:url(http://www.arahanga.co.nz/stylesheets/PIE.htc);
}

#emailForm{
width: 500px;
}

#emailForm td.labelHorizontal,
#subscribeForm td.labelHorizontal,
#surveyTable td.labelHorizontal,
#alertForm td.labelHorizontal,
#registrationForm  td.labelHorizontal
{
width: 45%;
vertical-align: top;
color: #333;
padding: 0 5% 0 0 ;
}

#emailForm td.valueHorizontal,
#subscribeForm td.valueHorizontal,
#surveyTable td.valueHorizontal,
#alertForm td.valueHorizontal,
#registrationForm  td.valueHorizontal
{
width: 50%;
vertical-align: top;
text-align: left;
}

#emailForm td.valueHorizontal .fgroup,
#subscribeForm td.valueHorizontal .fgroup,
#surveyTable td.valueHorizontal .fgroup,
#alertForm td.valueHorizontal  .fgroup,
#registrationForm  td.valueHorizontal  .fgroup
{
font-size: 11px;
}

span.fieldNumber
{
font-weight: bold;
margin: 0px 10px 0px 0px;
color:  #65a8c1;
}

span.required
{
font-weight: bold;
color:  #004963;
}


#emailForm input.fmtxt,
#emailForm input.fstxt,
#subscribeForm input.fmtxt,
#subscribeForm input.fstxt,
#surveyTable input.fmtxt,
#surveyTable input.fstxt,
#alertForm input.fmtxt,
#alertForm input.fstxt,
#alertForm input.ftxt,
#registrationForm input.fmtxt,
#registrationForm input.fstxt,
#registrationForm input.ftxt
{
background: #FFF;
border: 1px solid #ccc;
font-size: 11px;
padding: 4px;
width: 350px;
}

#emailForm textarea.fmtxt,
#subscribeForm textarea.fmtxt,
#surveyTable textarea.fmtxt,
#alertForm textarea.fmtxt,
#registrationForm  textarea.fmtxt
{
background: #FFF;
border: 1px solid #ccc;
font-size: 11px;
padding: 4px;
width: 350px;
font-family: Arial;
}

#emailForm input.fmtxt:hover,
#emailForm input.fstxt:hover,
#emailForm textarea.fmtxt:hover,
#emailForm input.fmtxt:focus,
#emailForm input.fstxt:focus,
#emailForm textarea.fmtxt:focus,
#subscribeForm input.fmtxt:hover,
#subscribeForm input.fstxt:hover,
#subscribeForm textarea.fmtxt:hover,
#subscribeForm input.fmtxt:focus,
#subscribeForm input.fstxt:focus,
#subscribeForm textarea.fmtxt:focus,
#surveyTable input.fmtxt:hover,
#surveyTable input.fstxt:hover,
#surveyTable textarea.fmtxt:hover,
#surveyTable input.fmtxt:focus,
#surveyTable input.fstxt:focus,
#surveyTable textarea.fmtxt:focus,
#alertForm input.fmtxt:hover,
#alertForm input.fstxt:hover,
#alertForm textarea.fmtxt:hover,
#alertForm input.fmtxt:focus,
#alertForm input.fstxt:focus,
#alertForm textarea.fmtxt:focus,
#registrationForm input.fmtxt:hover,
#registrationForm input.fstxt:hover,
#registrationForm textarea.fmtxt:hover,
#registrationForm input.fmtxt:focus,
#registrationForm input.fstxt:focus,
#registrationForm  textarea.fmtxt:focus
{
background: #fff;
border: 1px solid #004963;

}


#emailForm input.fdate,
#subscribeForm input.fdate,
#surveyTable input.fdate,
#alertForm input.fdate,
#registrationForm input.fdate
{
background: #FFF;
border: 1px solid #ccc;
font-size: 11px;
padding: 4px;
width: 350px;
}

#emailForm input.fdate:hover,
#emailForm input.fdate:focus,
#subscribeForm input.fdate:hover,
#subscribeForm input.fdate:focus,
#surveyTable input.fdate:hover,
#surveyTable input.fdate:focus,
#alertForm input.fdate:hover,
#alertForm input.fdate:focus,
#registrationForm input.fdate:focus,
#registrationForm input.fdate:hover
{
background: #fff;
border: 1px solid #004963;
}


#emailForm select.fseldate,
#subscribeForm select.fseldate,
#surveyTable select.fseldate,
#alertForm select.fseldate,
#registrationForm select.fseldate
{
background: #FFF;
border: 1px solid #ccc;
font-size: 11px;
padding: 4px;
width: auto;
margin: 0px 3px 0px 0px;
}

#emailForm select.fseldate:hover,
#emailForm select.fseldate:focus,
#subscribeForm select.fseldate:hover,
#subscribeForm select.fseldate:focus,

#surveyTable select.fseldate:hover,
#surveyTable select.fseldate:focus,
#alertForm select.fseldate:hover,
#alertForm select.fseldate:focus,
#registrationForm select.fdate:focus,
#registrationForm select.fdate:hover
{
background: #fff;
border: 1px solid #65a8c1;
}

#emailForm .buttonBar,
#surveyTable .buttonBar,
#alertForm .buttonBar,
#registrationForm  .buttonBar
{
text-align: right;
padding: 15px 0px 0px 0px;
}

#subscribeForm .buttonPanel,
#surveyTable .buttonPanel,
#alertForm .buttonPanel,
#registrationForm .buttonPanel
{
text-align: right;
padding: 15px 0px 0px 0px;
}

#emailForm .buttonBar input,
#subscribeForm .buttonPanel input,
#surveyTable .buttonBar input,
#alertForm input.fsub,
#registrationForm input.fsub
{
background: #efefef;
border: 1px solid #ccc;
font-size: 11px;
padding: 4px;
width: 100px;
cursor: pointer;
}


#emailForm .buttonBar input:hover,
#subscribeForm .buttonPanel input:hover,
#surveyTable .buttonBar input:hover,
#alertForm input.fsub:hover,
#registrationForm  input.fsub:hover
{
background: #004963;
color: #FFF;
}

.msg
{
color: #FF0000;
margin: 10px 0px;
font-style: italic;
}

.finlinehelp
{
display: none;
}

#emailForm .reset,
#subscribeForm .reset,
#surveyTable .reset,
#alertForm .reset,
#registrationForm .reset
{
display: none;
}