/*  
Site Name: Rushton Architects
Site URI: http://www.rushtonarchitects.co.nz
Version: 1.0

UPDATE INFO ---------------------------------------

Revision number: 1.0
Last updated: 12 March 2011
Last update made by: Priya Singh

CONVENTIONS ---------------------------------------

hyphenate class / id names - #my-id-name, .my-class-name
class / id names to start with lower case letter (ID's reserved for .net use will start with Upper case letter)

CONTENTS ------------------------------------------
*01: Util Classes
*02: Structure (layout, size, positioning)   
*03: Colours & Styles
*04: Typography

*/

@import url(boss.editor.css);


/* cms specific css*/
#nobots{position:absolute;top:-2000px;}
fieldset,img{border:0;}
fieldset{margin:0;padding:0;}
input.error,textarea.error{border:solid 1px #ff0000;}
label.error{color:#ff0000;clear:left;display:block;}      
dd input.shortinput,dd input.postcode{width:40px;}
ul.list{list-style-image:none;list-style-position:outside;list-style-type:none;margin:0 0;padding:0;}
.IE7 ul.list {line-height:100%;}
ul.list li{display:block;margin:0;list-style-type:none;}
ul.list li a{line-height:100%;display:block;text-decoration:none;}
.IE6 ul.list li a{width:100%;}/*For horizontal - set to auto;*/
.clear{clear:both;}
#comments form .left {width:49%;float:left;margin-right:0px;}
#comments form dt{float:none;text-align:left;}
#comments form dt,#comments form .body{padding-top:10px;}
#comments form dd{padding:0;padding-bottom:5px;}
#comments form dd input{width:88%;border:1px solid #CCCCCC;padding:2px;}
#comments form textarea {width:279px;height:95px;border:1px solid #ccc;}
#comments .all{font-weight:normal;clear:both;margin-top:40px;}
#comments .all .nocomments{background-color:#f0f0f0;padding:1px 10px 10px 4px;}
#comments .all ul.list li{margin-top:30px;}
#comments .all ul.list li a{display:inline;float:none;}
#comments .all ul.list li p{margin-top:5px;}
#comments .all ul.list li.admin{background-color:#F0F0F0;}
.articlelinks{float:right;width:25%;}


/* Remove if no Boss.Client module*/
.bodytext  fieldset dt{background-color:#DEDDDC;}
.complete dd{padding-bottom:3px;}
dl.total dt{padding:4px 0 4px 6px;}
.checkout{text-align:right;}
.fineprint,p.fineprint{font-size:10px;}
dl.total dt{width:84%;}
dd p{margin:0px;}
dd .textinputs{width:330px;font-size:13px;}
.IE7 dd .textinputs{width:320px;}
.transactions,.addresses{clear:left;margin-top:30px;width: 460px;}
.responseError{background-color:#EEFAAA;padding:10px;margin:10px 0;}
.wide .responseError ul {margin:0;}
.responseError li {line-height:18px;}
.responseMessage{background-color:#CCFF99;padding:10px;margin:10px 0;}
.responseMessage li {line-height:18px;}
.wide .responseMessage ul {margin:0;}
ul.controls{float:right;text-align:center;margin-top:2px;}
.controls li{float:right;padding-left:15px;}
.controls li a{display:block;padding:3px 10px 4px 8px;background-color:#EEFAAA;border:solid 1px #DDEBBB;}
.addresses h5{margin:13px 0 3px 0;}
.selectaddresses .addresslist input{float:left;}
.addresslist dd{font-size:0.9em;}
ul.controladd {float:none;width:14em;}
ul.controladd li{float:none;padding-left:0px;}

/*----- 01: Util Classes ----- */
.veil                            { display: block; text-indent: -9999px; overflow: hidden; }
.self-clear, .col-holder             { zoom: 1; }
.self-clear:after, .col-holder:after    { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.col-holder .col                  { float: left;}
.col-holder .col.scroll{height: 430px; overflow: auto;}

.page-2 .image{height:278px;overflow:hidden;margin-bottom:10px;}

/*----- 02: Structure ----- */
.layout {
   width: 880px;
   margin: 0 auto;
   position: relative;
}

#header {
   height: 100px;
   margin: 0 10px 30px 10px;
   position: relative;
}

#logo, 
#navigation, 
#login,
#logout,
#account-btn
{ position: absolute; }

#account-btn            { top: 0px; right: 94px; z-index: 10;}
#login                  { top: 0px; right: 5px; z-index: 10;}
#logout                  { top: 0px; right: 5px; z-index: 10;}
#logo                   { bottom: 0px; left: 0px; }
#navigation                { bottom: 0px; right: 0px; margin: 0px; }
#navigation li            { float: left; margin: 0 0 0 45px; line-height: 1; list-style-type:none;}

#subnav                  { margin: 10px 0 0 0; }
#subnav li, #subnav li a   { width: 40px; height: 40px; display: block; }
#subnav li               { float: left; margin-left: 4px; overflow: hidden; }
#subnav li.first         { margin-left: 0px; }
#subnav li a            { line-height: 37px; text-align: center; }

.content {
   position: relative;
   padding: 0 10px;
}


   .narrow       { width: 180px; min-height:100px; margin: 0 10px 0 0; }
   .wide         { width: 670px; }
   .wide.noimage   {width:660px;padding-right:10px;}
   
   .wide img      { margin-bottom: 10px; }
   .wide p         { margin-right: 10px; }
   
   .col-360      { width: 360px; height: 430px; padding-right: 10px; overflow: auto; }
   .col-300      { width: 300px; height: 430px; overflow: hidden; direction: rtl; text-align: right; }
   
   .col img.right   { float: right; margin-left: 20px; }
   
   .inner-col-half   { width: 450px; }
   
   .col-300 img   { display: block; margin: 0 0 5px 0; }
   .col-300 p      { direction: ltr; margin-right: 10px; }
   
   .strip, .strip .col      { height: 100px; overflow: hidden; }
   .strip               { margin: 0 0 10px 0; }
   .strip img            { display: block; }
   
   .vertical-nav         { height: 430px; overflow: hidden; }
   .vertical-nav ul      { margin: 0px; }
   .vertical-nav li      { width: 180px; height: 100px; margin: 0 0 10px 0; } 
   
   .image-strip, .image-strip ul   { margin: 0px; height: 100px; overflow: hidden; position: relative; }
   .image-strip li               { float: left; margin-right: 1px; display: block; height:100%;}
   .image-strip img {height:100%;}
   
   .image-strip .btn { 
      width: 100px; 
      height: 100px; 
      display: block; 
      position: absolute;
      top: 0px;
      z-index: 20;
      overflow: hidden;
      text-indent: -9999px;
      background: url(../bg-transparent.png);
   }
   
   .image-strip .btn-back   { left: 0px; }
   .image-strip .btn-fwd   { right: 0px; }
   
   img, canvas            { display: block; }
   .nav-image            { position: relative; display: inline-block; margin: 0 0 10px 0; width: 180px; height: 100px; overflow: hidden; outline:0 none;}
   .nav-image img         { position: absolute; top: 0px; left: 0px; width:100%;}
   .nav-image p         { position: absolute; display: block; margin: 0; width: 160px; left: 0px; bottom: 0px; padding: 3px 10px; }
   
   .page-nav            { position: absolute; width: 30px; height: 45px; top: 190px; }
   .prev               { left: -50px; }
   .next               { right: -50px; }
   
   .pagination            { margin: 40px auto 0 auto; text-align: center; }
   
   .pagination a, .pagination span { 
      display: inline-block; 
      text-indent: -9999px; 
      overflow: hidden;
      outline: none;
      width: 8px; 
      height: 8px; 
      padding: 5px 3px;
      margin: 0px;
   }


#footer {
   padding: 20px 0;
   width: 100%;
   /*position: absolute;
   left: 0px; 
   bottom: 0px;*/
   margin-top: 40px;
}

/*----- 03: Colours & Styles (does not include content typography) ----- */
body {
   background: #fff;
   border-top: 3px solid #000;
}

#login {
   background: url(../btn-login.png) top left no-repeat;
   width: 120px; height: 25px; 
}

#account-btn {
   background: url(../account-btns.gif) top left no-repeat;
   width: 94px; height: 25px; 
}

#logout {
   background: url(../account-btns.gif) -99px 0 no-repeat;
   width: 94px; height: 25px; 
}

#logo {
   background: url(../rushton-logo.png) top left no-repeat;
   width: 180px; height: 53px;
}

.content {
   background: url(../bg-layout.png) top right no-repeat;min-height:430px;
}

#navigation a:hover, #subnav a:hover, .nav-image:hover { text-decoration: none; }

#navigation a          { font-size: 13px; color: #3f3f3f; text-transform: uppercase; }
#navigation a:hover      { color: #f00; }
#navigation a.selected   { font-weight: bold; color: #000; }

#subnav li            { border: 1px solid #636363; }
#subnav a            { color: #434343; text-transform: uppercase; font-size: 11px; font-weight: bold;}
#subnav a:hover         { background: #ececec; }
#subnav a.selected      { color: #fff; background: #636363; }

.prev { background: url(../ind-arrow-prev.png) top left no-repeat; }
.next { background: url(../ind-arrow-next.png) top left no-repeat; }

.dim {
   opacity: 0.6;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
   filter: alpha(opacity=70);
}

img.bright, .vertical-nav a.selected img, .vertical-nav a.selected p {
   opacity: 1;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
}

.vertical-nav a.selected img { top: 0px !important; }

#footer,
.pagination a,
.pagination span {
   border-top: 1px solid #efefef;
}

.pagination a          { background: url(../ind-pagination.png) -29px 100% no-repeat; }
.pagination a:hover, 
.pagination a.selected    { background: url(../ind-pagination.png) 3px 100% no-repeat; }

.nav-image p {
   font-size: 11px;
   text-transform: uppercase;
   background: url(../bg-transparent-70.png); 
   color: #fff;
}

.nav-image p.bright {
   background: #000;
   
}

.downloads-list { clear: both; margin: 0 0 0 20px; padding: 30px 0 0 0; }
.downloads-list li { width: 190px; margin: 0 20px 0 0; padding: 0px; display: block; float: left; }
.downloads-list h3 { text-transform: none; font-size: 14px; font-weight: normal; color: #272626 !important;  margin-bottom: 20px; }
.downloads-list img { margin-left: 20px; }
.downloads-list p { margin:0 0 5px 0; }
.downloads-list .download-link { 
   text-align: center; color: #fff; background: #4c4c4c; 
   display: block; padding: 3px; width: 100px; 
   text-transform: uppercase; font-size: 12px; font-weight: bold;
   margin-bottom: 10px; 
}

.downloads-list .download-link:hover { background: #333; text-decoration: none; }
.downloads-list .file-icon {display:block;min-height:65px;}
.downloads-list .file-desc {width:135px;}


.divider {border-bottom:1px solid #EEEEEE;height:20px;clear:both;margin-right:10px;}

#footer p, #footer a { color: #8c8c8c; }

#footer p {
   text-align: center;
   margin: 0;
   font-size: 10px;
   line-height: 13px;
}

#footer a      { text-decoration: none; border-bottom: 1px solid #ccc; }



/*----- 05: Scrolling ----- */

.simply-scroll-container, .simply-scroll-clip { 
   position: relative;
}

.simply-scroll-clip { 
   overflow: hidden;
   z-index: 2;
   height: 430px;
}

.simply-scroll-list { 
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
   overflow: hidden;
   margin: 0;
   padding: 0;
   list-style: none;
}

.simply-scroll-btn {
   position: absolute;
   background: url(../bg-transparent.png);
   width: 180px;
   height: 50px;
   z-index:3;
   cursor: pointer;
   left: 0px;
}

.simply-scroll-container .disabled { z-index: 0 !important; }
.simply-scroll-btn-up { top: 0px; }
.simply-scroll-btn-down { bottom: 0px; }

/*----- 06: Form -----*/
#login-form { width: 300px; margin-top: 20px; }
#login-form .buttons { float: right; }

#login-form .textinputs { 
   width: 228px; 
   border: 1px solid #acacac; 
   height: 30px; 
   
   vertical-align: middle;
   padding-left: 80px;
   margin-bottom: 10px;
}

#login-form dt { position: relative; }
#login-form label { position: absolute; top: -3px; left: 0px; padding: 10px; }

#login-form p { text-align: right; font-size: 11px; }
#login-form p a { text-decoration: underline; }

#login-form button { 
   background: #626262; 
   width: 110px; 
   text-align: center; 
   color: #fff; 
   margin: 0; padding: 2px 0 3px 0; border: 0;
   text-transform: uppercase;
   cursor: pointer; cursor: hand;
   font-family: Century Gothic, Lucida Sans, Arial, Helvetica, sans-serif;
   font-weight: bold;
   font-size: 12px;
}

.form,#changepassword {
   margin-top:20px;
}

.form {
   width:460px;
}

#changepassword {
   width:330px;
}

.form fieldset,#changepassword fieldset,.form h2,#changepassword h2 {
   padding-bottom:15px;
}

.form dt,#changepassword dt,#user-details dt {
   float: left;
   clear: right;
    width: 130px;
   text-align: left;
}

#user-details dt {
   clear:left;
}

.form dd,#user-details dd,#changepassword dd {
   width: 330px;
   float:right;
   padding-bottom: 7px;
}

#changepassword dd {
   width:200px;
}

#user-details {
   margin-top:15px;
}

#user-details dd {
   float:left;
}

.form dd input {
   border: 1px solid #999999;
    height: 20px;
    margin-bottom: 5px;
    width: 330px;
}

#changepassword dd input {
   border: 1px solid #999999;
    height: 20px;
    margin-bottom: 5px;
    width: 200px;
}

.form dd a{
   float:right;
}

#account #acct-email {
   padding-bottom: 0;
}

#account #userPassword {
   text-decoration:underline;
}

.form .buttoninputs, #changepassword .buttoninputs{
   height:30px;
   padding:0 15px;
   background-color:#4c4c4c;
   color:#ffffff;
   font-weight:bold;
   text-transform:uppercase;
   border:none;
   font-family: Century Gothic, Lucida Sans, Arial, Helvetica, sans-serif;
   float:right;
   cursor:pointer;
}
#address .buttoninputs {margin-left:10px;}

.utility-nav {
   background: #d7d7d7 url(/assets/bg-utility.png) top left no-repeat;
   padding-bottom: 50px;
   margin-bottom: 10px;
}

.utility-nav h3 {
   background: #626262;
   color: #fff !important;
   padding: 5px 0 5px 10px;
}

.utility-nav ul {
   margin: 5px 10px 0 10px;
   font-size: 12px;
}

.utility-nav ul li { margin: 0 0 3px 0; list-style-type:none;}
.utility-nav ul a { color: #151515; }

.portfolio dl {margin-bottom:18px;float:left;clear:both;width:100%;}
.portfolio dt {width:25%;float:left;clear:left;}
.portfolio dd {width:75%;float:right;}