/*

futurescape.co.nz
spitfire creative - spitfire.co.nz

*/



/*
===============================================================
LAYOUT AND TEMPLATE STYLES
===============================================================
*/

html {
    background: url(../images/bg-shad-tile.jpg) center top repeat-y #ececec;
    height: 100%;
}

body {
    margin: 0;
    background: url(../images/body-bg-top.jpg) center top no-repeat;
    font-family: Arial, Helvetica, sans-serif;
}



#header {
    text-indent: -9999px;
    overflow: hidden;
    background: url(../images/logo-lg.gif) no-repeat 24px 8px;
    height: 115px;
}

#header a {
    display: block;
    overflow: hidden;
    height: 115px;
}

/*
===============================================================
HTML ELEMENTS
===============================================================
*/
hr {
    display: none;
}

.grid_9 hr {
    width: 660px;
    margin-left: 0;
}

hr.rule-dotted {
    display: block;
    border: 0;
    border-bottom: 1px dotted #ccc;
    margin-right: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}

a {
    color: #666;
    text-decoration: underline;
}
a:hover {
    color: #ff5900;
    text-decoration: none;
}


/*
===============================================================
MAIN MENU
===============================================================
*/

.menu {
    border-top: 1px solid #e6e6e6;
    height: 34px;
    background: url(../images/menu-grad-bg.gif) 0 0 repeat-x;
}


.menu a {
    height: 23px;
    color: #666;
    text-decoration: none;
    font-size: 13px;
    display: block;
    padding: 6px 19px 5px;
    border-left: 1px solid #e6e6e6;
}

.menu a:hover {
    background-color: #f3f3f3;
    text-decoration: underline;
}

.menu li.first a {
    border-left: 0;
}

.menu li.join a {
    color: #ff5900;
}

.menu li.join a:hover {
    background: url(../images/menu-grad-bg.gif) 0 0 repeat-x;
}


.menu a.current, .menu li.join a.current {
    color: #fff;
    background: url(../images/menu-current-bg.gif) 0 0 repeat-x;
}

.menu a.current:hover, .menu li.join a.current:hover {
    text-decoration: none;
    cursor: default;
    color: #fff;
    background: url(../images/menu-current-bg.gif) 0 0 repeat-x;
}


/*
===============================================================
MASTHEAD
===============================================================
*/

#masthead {
    height: 220px;
}

#masthead-small {
    height: 40px;
}


#masthead-content {
    background: url(../images/masthead-alt-content.jpg) 0 0 no-repeat #ff3500;
    height: 220px;
}

#masthead-small #masthead-content {
    height: 40px;
    background: url(../images/headbar-bg.jpg) 0 0 repeat-x;
}

#masthead-small #masthead-content h1 {
    color: #fff;
    font-weight: normal;
    letter-spacing: -0.1px;
    font-size: 22px;
    margin-left: 20px;
    padding-top: 3px;
}
/* swf to come */


/*
===============================================================
CONTENT STYLES
===============================================================
*/

#content-wrapper {
    min-height: 300px;
    background: url(../images/content-wrapper-bg.jpg) 0 0 repeat-x;
    padding-top: 2em;
}
#content-wrapper .grid_12 {
    margin-bottom: 2em;
}

#content-wrapper h2 {
    color: #F65226;
    font-size: 23px;
    margin-bottom: .65em;
    font-weight: normal;
}

#content-wrapper h3 {
    color: #FE6602;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: .5em;
}

#content-wrapper h4 {
    font-size: 14px;
    color: #777;
    font-weight: bold;
    margin-bottom: .25em;
}

#home-page #content-wrapper h4, #content-wrapper #awards-panel h4 {
    font-size: 16px;
    color: #666;
    font-weight: bold;
    margin-bottom: 1em;
}

#content-wrapper #awards-panel p {
    margin: 0;
    margin-bottom: .5em;
}

#content-wrapper h5 {
    font-size: 16px;
    font-weight: bold;
    color: #FE6602;
    text-align: center;
    line-height: normal;
}

#content-wrapper p, #content-wrapper ul, #content-wrapper ol, #content-wrapper table {
    color: #666;
    font-size: 12px;
}

#content-wrapper blockquote {
    margin: 0 3em;
}

#content-wrapper .inpage-banner {
    margin-top: 10px;
    margin-left: 10px;
}

#content-wrapper #body-content .inpage-banner {
    margin-left: 0;
}


#home-page #content-wrapper .grid_5 {
    background: url(../images/border-orng.gif) right top repeat-y;
}

#content-wrapper .grid_4, #content-wrapper .grid_9.alpha {
    background: url(../images/border-grey.gif) right top repeat-y;
}

#content-wrapper #body-content.grid_9 {
    min-height: 540px;
}


#content-wrapper .grid_9 p, #content-wrapper .grid_9 ul, #content-wrapper .grid_9 h1, #content-wrapper .grid_9 h2, #content-wrapper .grid_9 h3, #content-wrapper .grid_9 h4, #content-wrapper .grid_9 h5 {
    padding-right: 4em;
}

#content-wrapper .grid_9.wrapper {
    margin: 0;
}


#content-wrapper .grid_7 p, #content-wrapper .grid_7 ul, #content-wrapper .grid_7 h1, #content-wrapper .grid_7 h2, #content-wrapper .grid_7 h3, #content-wrapper .grid_7 h4, #content-wrapper .grid_7 h5 {
    padding-right: 4em;
}

#content-wrapper .grid_6 p, #content-wrapper .grid_6 ul, #content-wrapper .grid_6 h1, #content-wrapper .grid_6 h2, #content-wrapper .grid_6 h3, #content-wrapper .grid_6 h4, #content-wrapper .grid_6 h5 {
    margin-left: -16px !important;
    padding-right: 3em;
}

#content-wrapper .grid_5 p, #content-wrapper .grid_5 ul, #content-wrapper .grid_5 h1, #content-wrapper .grid_5 h2, #content-wrapper .grid_5 h3, #content-wrapper .grid_5 h4, #content-wrapper .grid_5 h5 {
    padding-left: 8px;
    padding-right: 20px;
}

#content-wrapper .grid_4 p, #content-wrapper .grid_4 ul, #content-wrapper .grid_4 h1, #content-wrapper .grid_4 h2, #content-wrapper .grid_4 h3, #content-wrapper .grid_4 h4, #content-wrapper .grid_4 h5 {
    padding-left: 0px;
    padding-right: 20px;
}

#content-wrapper .grid_3 p, #content-wrapper .grid_3 ul, #content-wrapper .grid_3 h1, #content-wrapper .grid_3 h2, #content-wrapper .grid_3 h3, #content-wrapper .grid_3 h4, #content-wrapper .grid_3 h5 {
    padding-left: 0px;
    padding-right: 20px;
    text-align: center;
}

#content-wrapper .grid_9.alpha .grid_3 p, #content-wrapper .grid_9.alpha .grid_3 ul, #content-wrapper .grid_9.alpha .grid_3 h1, #content-wrapper .grid_9.alpha .grid_3 h2, #content-wrapper .grid_9.alpha .grid_3 h3, #content-wrapper .grid_9.alpha .grid_3 h4, #content-wrapper .grid_9.alpha .grid_3 h5 {
    padding-left: 5px;
}


#content-wrapper .grid_2 p, #content-wrapper .grid_2 ul, #content-wrapper .grid_2 h1, #content-wrapper .grid_2 h2, #content-wrapper .grid_2 h3, #content-wrapper .grid_2 h4, #content-wrapper .grid_2 h5 {
    margin-left: 21px;
    margin-top: 6px;
}

.join-button {
    background: url(../images/button-join-research.jpg) 0 0 no-repeat;
    text-align: center;
    font-size: 16px;
}

.join-button a {
    width: 268px;
    height: 48px;
    padding-top: 22px;
    display: block;
    text-decoration: none;
    font-weight: bold;
}

.join-button a span {
    color: #ff5900;
}

#content-wrapper p.info, #content-wrapper p.alert, #content-wrapper p.error {
    padding: 1em 3em 1em 3.5em;
    width: 510px;
}

.info,
.error,
.alert,
.validation-summary {
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border: 1px solid;
	
}

.validation-summary {
	background-color: #FFF9EA;
    border-color: #FFE7A8;
	margin-bottom:1em;
	padding:1em .5em;
	}

.validation-summary h3 {
    background: url(../images/error.png) 10px center  no-repeat;	
	padding-left:30px;

	}

.info {
    background: url(../images/information.png) 1em 1em no-repeat;
    background-color: #E6F7F7;
    border-color: #B7E8E8;

}

.error {
    background: url(../images/error.png) 1em 1em no-repeat;
    background-color: #FFF9EA;
    border-color: #FFE7A8;
}

.alert {
    background: url(../images/exclamation.png) 1em 1em no-repeat;
    background-color: #FBF0F0;
    border-color: #F2CECE;
}

#clients-table {
    margin: 15px 30px 0 20px;
    width: 90%;
    text-align: center;
    xborder: 1px solid red;
}

#clients-table td {
    padding: 5px 10px;
    width: 170px;
}

#contact-panel {
    margin: 0 0 0 2em;
    height: 140px;
}

#contact-panel p {
    text-align: left !important;
}

#content-wrapper .image-w-caption p {
    color: #666;
    font-size: 11px;
}

/*
===============================================================
FOOTER STYLES
===============================================================
*/
#footer {
    height: 94px;
    background: url(../images/footer-rule-tile.jpg) 0 0 repeat-x;
    position: relative;
}

/* footer menu */
#footer .menu {
    background: none;
    margin-top: 14px;
    border: 0;
    margin-left: 0px;
}

#footer .menu a {
    font-size: 12px;
    display: block;
    padding: 0px 10px;
    border-left: 1px solid #e9e9e9;
    background: none;
}

#footer .menu li.first a {
    border-left: 0;
}

#footer .menu li.join a {
    color: #ff5900;
}

#footer p {
    color: #999;
    font-size: .85em;
    margin-bottom: 0;
}

#footer a {
    color: #999;
}

#footer a:hover {
    color: #666;
}

#footer #credit {
    margin-top: 20px;
    margin-left: 8px;
}

#footer #copy-notice {
    color: #ccc;
    margin-top: 5px;
}

#footer #footer-right {
    position: absolute;
    top: 14px;
    right: 10px;
}
#footer #logo {
    background: url(../images/logo-sml.jpg) 0 0 no-repeat;
    text-indent: -9999px;
    width: 136px;
    height: 50px;
}
/*
===============================================================
TABS STYLES
===============================================================
*/

ul.tabs {
    margin: 0;
    padding: 0;
}
ul.tabs li {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.tabs li a {
    float: left;
    display: block;
}

/* Clearing floats without extra markup  */
ul.tabs {
    display: inline-block;
}
ul.tabs:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html ul.tabs {
    height: 1%;
}
ul.tabs {
    display: block;
}



/*
===============================================================
FORMS STYLES
===============================================================
*/


label {
    font-weight: bold;
}

/* Fieldsets */
fieldset {
    padding: 1.4em;
    margin: 0 0 1.5em 0;
    border: 1px solid #ddd;
}
legend {
    padding: 0 .4em;
    font-weight: bold;
    font-size: 1.2em;
}

/* Textareas */
textarea {
    margin: 0.5em 0.5em 0 0;
}
textarea {
    padding: .4em;
}

#form-wrapper.hform p {
    margin: 0 /*0 0 .5em;*/;
}
#form-wrapper.hform p label {
    float: left;
    width: 230px;
}

#form-wrapper.hform p input {
    width: 280px;
}
#form-wrapper.hform p select {
    width: 293px;
}


.hform p input.txt, .hform p select, .hform p textarea {
    padding: 5px;
    font-size: 16px;
    color: #666;
    border: 2px solid #ccc;
    background-color: #ececec;
    margin-bottom: 1em;
}


.hform p input.txt:focus, .hform p textarea:focus {
    border-color: #aaa;
    background-color: #f3f3f3;
}


#form-wrapper.hform p input.button {
    width: auto;
    border: none;
}
#form-wrapper.hform p input.checkbox {
    width: auto;
}
#form-wrapper.hform p.radio-group input {
    width: auto;
}

#form-wrapper.hform p.checkbox {
    margin-left: 230px;
}
#form-wrapper.hform p.checkbox label {
    float: none;
}
#form-wrapper.hform p.checkbox input {
    width: auto;
}

/* custom styles */
.hform {
    font-size: 16px;
    background: url(../images/form-bg.jpg) 0 0 no-repeat;
    min-height: 495px;
    padding-top: 1.2em;
    position: relative;
}

.hform p {
    position: relative;
}

.hform p label {
    font-size: 1.3em;
    color: #777;
    font-weight: normal;
    margin-top: .2em;
}


.hform p textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #333;
    width: 280px;
    margin: 0;
    letter-spacing: 1px;
}

.hform fieldset {
    border: 0;
}
.hform legend {
    font-size: 1.15em;
    font-weight: normal;
    color: #FE6602;
    padding-left: 0;
}

.hform .send-button, .hform .register-button {
    background: url(../images/button-send-msg.gif) 0 0 no-repeat;
    text-indent: -9999px;
    width: 142px;
    height: 40px;
    display: block;
    margin-left: 228px;
    margin-top: 20px;
}

.hform #register-button {
    background: url(../images/button-register.gif) 0 0 no-repeat;
}

.hform .send-button:hover, .hform .register-button:hover {
    background-position: 0 -40px;
}

.hform span.required {
    background: url(../images/star.gif) 0 0 no-repeat;
    position: absolute;
    text-indent: -9999px;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    margin-left: 3px;
}

.hform .required-note {
    position: absolute;
    top: 20px;
    right: 40px;
}

.hform .required-note span.required {
    top: -2px;
    left: 155px;
}

.hform span.validation-output {
    color: #930;
    font-size: 1em;
    vertical-align: top;
    padding-left: 15px; /*display:none;*/
}
/*
.hform .txtarea span.validation-output {
	padding-top:3px;
	}*/

.hform p.radio-group label {
    width: 100px !important;
    margin-top: 0;
    margin-bottom: 1em;
}

.hform .radio-group span.validation-output {
    padding-left: 110px;
}

.hform .radio-group span.required {
    margin-left: 99px;
}