/*
	Name: Fusetastic ALL-IN-ONE CSS 
	Date: December 8, 2011
	Description: Fusetastic Form Framework CSS
	Version: 1.11
	Author: Fusetastic.com
	Author URI: http://www.fusetastic.com
*/

/* RESET
-------------------------------------------------------------- */
/*html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    margin: 0;
    padding: 0
}
*/
/* SENSIBLE DEFAULT STYLES
-------------------------------------------------------------- 
h1,h2,h3,h4,h5,h6{font-weight:700;color:#111;line-height:1.1em;margin:0 0 .5em}
h1{font-size:2.52em}
h2{font-size:1.952em}
h3{font-size:1.652em}
h4{font-size:1.452em}
h5{font-size:1.252em}
h6{font-size:1.52em}
h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{margin:0}

p{margin:0 0 1.52em}
p img.left{float:left;margin:1.52em 1.52em 1.52em 0;padding:0}
p img.right{float:right;margin:1.52em 0 1.52em 1.52em}
em,dfn{font-style:italic}
sup,sub{line-height:0}
abbr,acronym{border-bottom:1px dotted #666}
address{font-style:italic;margin:0 0 1.5em}
del{color:#666}
pre,code{white-space:pre;margin:1.5em 0}
pre,code,tt{font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;display:block}
strong,dfn{font-weight:700} 

li ul,li ol{margin:0 1.5em}
ul,ol{margin:0 1.5em 1.5em}
ul li{margin-left:25px}
ul{list-style-type:disc}
ol{list-style-type:decimal}
dl{margin:0 0 1.5em}
dl dt{font-weight:700}
dd{margin-left:1.5em}
*/

/* FIXES
-------------------------------------------------------------- */
/* The Magnificent CLEARFIX */
.clearfix:before, .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden
}

.clearfix:after {
    clear: both
}

.clearfix {
    zoom: 1;
}

/* Javascript Notice */
.js #jsnotice {
    display: none
}

.no-js #jsnotice {
    display: block;
    color: #9F6000;
    background-color: #FEEFB3;
    border: 2px dashed;
    position: absolute;
    top: 0;
    left: 0;
    margin: 10px;
    padding: 15px
}

textarea {
    overflow: auto;
}

html {
    overflow-y: scroll;
}

.ie7 img {
    -ms-interpolation-mode: bicubic;
}

input[type=checkbox] {
    vertical-align: bottom
}

.ie7 input[type=checkbox] {
    vertical-align: baseline
}

label, input[type=button], input[type=submit], input[type=image], button {
    cursor: pointer
}

button, input, select, textarea {
    margin: 0
}

input[type=radio], .ie6 input {
    vertical-align: text-bottom
}

button {
    width: auto;
    overflow: visible;
}

/* COMMON ADDATIVE CLASSES
-------------------------------------------------------------- */
.left {
    float: left
}

.right {
    float: right
}

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0
}

.hide {
    display: none
}

.align-right {
    text-align: right
}

.align-left {
    text-align: left
}

.align-center {
    text-align: center
}

.align-justify {
    text-align: justify
}

.w100p {
    width: 100%
}

.mr20 {
    margin-right: 20px
}

.ml20 {
    margin-left: 20px
}

.offset1 {
    margin-left: 130px
}

.offset2 {
    margin-left: 105px
}

.no-bold {
    font-weight: 400 !important
}

.oldie input[type=checkbox], .oldie input[type=radio] {
    border: 0;
    background: none
}

/* Use this to create a horizontal ruler across a column. */
hr {
    background: #ddd;
    border: none;
    clear: both;
    color: #ddd;
    float: none;
    height: .1em;
    width: 100%;
    margin: 0 0 1.45em
}

hr.space {
    background: #fff;
    color: #fff
}

/* NOTICE BOXES
-------------------------------------------------------------- */
.error, .notice, .success {
    margin-bottom: 1em;
    border: 2px solid #ddd;
    padding: .8em
}

.error {
    background: #FBE3E4;
    color: #8a1f11;
    border-color: #FBC2C4
}

.notice {
    background: #FFF6BF;
    color: #514721;
    border-color: #FFD324
}

.success {
    background: #E6EFC2;
    color: #264409;
    border-color: #C6D880
}

.error a {
    color: #8a1f11
}

.notice a {
    color: #514721
}

.success a {
    color: #264409
}

/* Notice boxes large*/
.info-box, .message-box, .success-box, .warning-box, .error-box, .validation-box {
    background-repeat: no-repeat;
    background-position: 10px center;
    border: 2px dashed;
    margin: 10px 0;
    padding: 15px 10px 15px 50px
}

.info-box {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url(../images/info.png)
}

.message-box {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url(../images/message.png)
}

.success-box {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image: url(../images/success.png)
}

.warning-box {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url(../images/warning.png)
}

.error-box {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url(../images/error.png)
}

/* FORMS FRAMEWORK
-------------------------------------------------------------- */
/* [apply class=fuse to form(s)] */
form.fuse {
    width: 500px;
    margin: 0 auto;
    padding: 0
}

.fuse li {
    float: left;
    width: 100%;
    list-style-image: none
}

.fuse ul {
    list-style: none;
    height: 1%;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.form {
    list-style: none;
    margin: 0;
    padding: 7px 10px 10px
}

.form ul {
    overflow: hidden;
    height: 1%;
    padding: 2px 5px 0
}

.form label {
    width: 120px;
    float: left;
    display: inline;
    padding: 3px 5px 3px 0
}

.form li {
    padding-bottom: 3px;
    margin: 0
}

.form li ul li {
    border-bottom: 0 solid red
}

.form input {
    float: left;
    display: inline;
    line-height: 100%
}

.form select, .form textarea {
    float: left;
    display: inline
}

.form input[type=radio], .form input[type=checkbox] {
    border: 0 !important;
    background-color: transparent !important
}

/*
All of the modifier classes should be applied to form uls and are used to present the structure:<li><label></label><input/></li>.
Each letter represented in the class name represents the orientation of the li - label - input elements respectively.
h = horizontal block element (floated left)
v = vertical block element 
i = inline element
for example, the class:.hvv  =  [LI:Horizontal Block Element]  [LABEL:Verticle block element]  [INPUT:Vertical block element]
*/
.vvv li {
    display: block;
    clear: both;
    width: 100%
}

.vvv label {
    display: block;
    width: 100%;
    clear: both;
    float: none
}

.hvv li {
    float: left;
    margin-right: 10px;
    display: inline;
    width: auto
}

.hvv label {
    display: block;
    width: auto;
    float: none
}

.hii label {
    display: inline;
    margin-right: 0;
    vertical-align: middle;
    text-align: left;
    width: auto
}

.hhh label {
    float: left;
    width: 100px
}

.vii {
    float: left;
    display: inline;
    width: auto
}

.vii li {
    display: block;
    float: left;
    width: auto;
    clear: both
}

.vii label {
    display: inline;
    width: auto;
    vertical-align: middle;
    float: none
}

.vhh li {
    display: block;
    clear: both;
    float: left;
    width: auto;
    border: 3px solid #fff
}

.vhh label {
    float: left;
    width: 130px;
    display: inline
}

.vvv input, .vvv select, .vvv textarea {
    display: block;
    float: left
}

.hvv, .hii, .hhh {
    overflow: hidden;
    height: 1%
}

.hvv input, .hvv select, .hvv textarea {
    display: block
}

.hii li, .hhh li {
    float: left;
    margin-right: 10px;
    display: inline;
    width: auto;
    border-bottom: 0
}

.hii input, .hii select, .hii textarea {
    display: inline;
    vertical-align: middle
}

.hii li li, .hhh li li {
    clear: both
}

.hhh input, .hhh select, .hhh textarea {
    float: left
}

.vii input, .vii select, .vii textarea {
    display: inline;
    vertical-align: middle;
    float: none
}

.vhh, .vhh input, .vhh select, .vhh textarea {
    float: left;
    display: inline
}

/* Label modifiers */
label.v {
    display: block;
    float: none;
    width: auto;
    text-align: left;
    padding: 3px
}

label.h {
    display: inline;
    float: left;
    width: auto;
}

/* Multi-select box */
.multi-select {
    height: 200px;
    width: 200px;
    float: left;
    background-color: #FFF;
    overflow: auto;
    border: 0 inset #ccc;
    padding: 0
}

.multi-select .form {
    height: auto;
    border: 0;
    margin: 0;
    padding: 0
}

.multi-select .vhh {
    margin: 0;
    padding: 0
}

.multi-select .vhh input {
    float: left
}

.multi-select .vhh label {
    float: none;
    margin-left: 20px;
    display: block;
    width: auto;
    clear: none
}

.multi-select .vhh li {
    overflow: hidden;
    width: 100%
}

.multi-select .vii li {
    width: 100%
}

/* Form notes */
.note-left {
    float: left;
    padding: 3px 5px 0
}

.note-bottom {
    clear: both;
    display: block;
    margin-bottom: 3px;
    padding: 0
}

.tar label {
    text-align: right
}

/* Form validation */
.fuse .error {
    background: #fff;
    color: #df0000
}

.fuse div.error {
    color: #df0000;
    font-weight: 700;
    text-align: center;
    border: 2px dashed #df0000;
    width: 400px;
    background: #fee url(../images/error.png) no-repeat;
    background-position: 10px 10px;
    margin: 10px;
    padding: 10px 10px 10px 40px
}

.fuse span.error {
    background: url(../images/unchecked.gif) no-repeat 5px 3px;
    color: #df0000;
    font-weight: 700;
    border: none;
    padding: 3px 0 0 21px
}

.fuse input.error {
    border: 2px solid #df0000;
    background: #fee
}

.fuse span.checked {
    background: url(images/checked.gif) no-repeat 5px 3px;
    border: none
}

/* Customized radio and checkbox 
called via $('input').customInput();
and plugin jquery.custom-input.js
filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery */

/*wrapper divs */
.custom-checkbox, .custom-radio {
    position: relative
}

/* input, label positioning */
.custom-checkbox input, .custom-radio input {
    position: absolute;
    left: 2px;
    top: 3px;
    z-index: 0;
    margin: 0
}

.custom-checkbox label, .custom-radio label {
    display: block;
    position: relative;
    z-index: 1;
    line-height: 1;
    cursor: pointer;
    margin: 0 0 .3em;
    padding: .5em 0 .5em 30px
}

/* states */
.custom-checkbox label {
    background: url(images/checkbox-white.gif) no-repeat
}

.custom-radio label {
    background: url(images/radiobutton-white.gif) no-repeat
}

.custom-checkbox label, .custom-radio label {
    background-position: -10px -14px
}

.custom-checkbox label.hover, .custom-checkbox label.focus, .custom-radio label.hover, .custom-radio label.focus {
    background-position: -10px -114px
}

.custom-checkbox label.checked, .custom-radio label.checked {
    background-position: -10px -214px
}

.custom-checkbox label.checkedHover, .custom-checkbox label.checkedFocus {
    background-position: -10px -314px
}

.custom-checkbox label.focus, .custom-radio label.focus {
    outline: 1px dotted #ccc
}

/* BUTTONS
-------------------------------------------------------------- */

/* PAGE LAYOUT
-------------------------------------------------------------- */
/* The container class assigns the fixed width for the main area.*/
#container-page {
    width: 960px;
    margin: 0 auto
}

/* STYLING 
-------------------------------------------------------------- */
body {
    font: 13px/1.231 sans-serif;
    *font-size: small;
    background-color: #f1f1f1;
}

select, input, textarea, button {
    font: 99% sans-serif;
}

body, select, input, textarea {
    color: #444;
    /* set your base font here, to apply evenly http://goo.gl/YMg1 */
    /*
    font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;
    font-family:Cambria,Georgia,Times,'Times New Roman',serif;
    font-family:'Century Gothic', 'Apple Gothic', sans-serif;*/
}

/* Link Styling */
a, a:active, a:visited {
    color: #607890
}

a:hover, a:focus {
    color: #036;
    text-decoration: underline
}

/* Form Styling */
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid {
    background-color: #f0dddd
}

form.fuse {
    text-shadow: none
}

form .radio_text {
    color: #000;
    float: left;
    padding: 0 5px 0 0
}

/* Label Styling */
.fuse label {
    color: #222;
    font-size: 14px;
    font-weight: 700
}

label.label-under {
    clear: both;
    color: #444;
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1em;
    margin: 0;
    padding: 2px 0 4px 6px
}

label em, em.req {
    color: #ff0084;
    font-weight: 700;
    font-size: 18px
}

/* Input Field Styling */
.fuse input[type="text"], .fuse input[type="email"], .fuse input[type="password"], .fuse input[type="tel"], .fuse textarea, .fuse select {
    background-color: #f9f9f9;
    border: 2px solid #d2d2d2;
    color: #333333;
    font-size: 14px;
    margin: 1px 0 0 0;
    padding: 3px 10px;
    outline: none; /*Remove Chrome and Safari glows on focus*/
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

/* Field Highlight Styling */
.fuse input:focus, .fuse input[type="text"]:focus, .fuse input[type="email"], .fuse input[type="password"]:focus, .fuse input[type="tel"]:focus, .fuse textarea:focus, .fuse select:focus {
    /* orange highlight
    border:2px solid #ffb240;
        border:2px solid rgba(255,178,64, 0.8)!important; background-color: #fff!important;
        -moz-box-shadow: 0 0 5px rgba(255, 178, 64, 1); -webkit-box-shadow: 0 0 5px rgba(255, 178, 64, 1); box-shadow: 0 0 5px rgba(255, 178, 64, 1);*/
    /* blue highlight */
    border: 2px solid #06f;
    border: 2px solid rgba(0, 102, 255, 0.6) !important;
    background-color: #fff !important;
    -moz-box-shadow: #06f 0 0 7px;
    -webkit-box-shadow: #06f 0 0 7px;
    box-shadow: #06f 0 0 7px;
    /*purple highlight
        border:2px solid #2a2876;
        border:2px solid rgba(42,40,118, 0.6)!important; background-color: #fff!important;
        -moz-box-shadow: #2a2876 0 0 7px; -webkit-box-shadow: #2a2876 0 0 7px; box-shadow: #2a2876 0 0 7px
    }*/
    /* pink highlight
    border:2px solid #DD0083;
    border:2px solid rgba(221,0,131, 0.6)!important; background-color: #fff!important;
    -moz-box-shadow: #DD0083 0 0 7px; -webkit-box-shadow: #06f 0 0 7px; box-shadow: #DD0083 0 0 7px;
    #DD0083;*/
}

/* Fieldset design */
fieldset {
    background: transparent;
    clear: both;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    margin: 0;
    padding: 0 0 5px 20px
}

/*form fieldset{border-color:#232323;border-style:solid none none;border-width:1px 0 0;margin:0;padding:10px}
.fuse fieldset legend{font-size:150%;font-weight:400;margin:0;padding:0 5px}*/

/* CUSTOMIZATIONS 
-------------------------------------------------------------- 
#header{background:#2b2b2b;height:30px}
#footer{background:#2b2b2b;height:30px}
p.note{font-size:12px;margin:0 0 5px 0}
.tiny-text{font-size:10px;display:block;margin-left:20px}
.checkbox-label{margin-left:8px}
h2{font-weight:700;color:#111;line-height:18px;margin:5px 0 10px;font-size:18px;border-bottom: 1px solid #E7E7E7;}
fieldset{margin:0 0 10px 0; border:none;}
legend{color:#222;font-size:16px;font-weight:bold;}
#content{background:#2b2b2b;padding:0 10px}
fieldset#profile{border: 1px solid #E7E7E7}
div#profile-container{margin-top:10px}
#profile-toggle{margin-left:20px}
.fuse label {color: #fff;}
body {background-color: #2b2b2b;}
h2 {color: #DD0083;border-bottom:none}
.fuse input, .fuse textarea, .fuse select {border: 2px solid #000;}
div.ui-datepicker{
 font-size:11px;
}

label em, em.req {
color: #FF0084;
font-weight: bold;

}
input[type=submit].f-button {
	color: #666;
	cursor: pointer;
	border: solid 1px #ccc;
	display: inline-block;
	font: bold 14px/100% 'Oswald', Helvetica, Arial, Tahoma, sans-serif;
	line-height: 1;
	outline: none;
	padding: 6px 10px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: 5px 5px;
	-moz-border-radius: 5px 5px;
	border-radius: 5px 5px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
input[type=submit].f-button:hover {text-decoration: none;}
input[type=submit].f-button:active {position: relative; top: 1px;}
input[type=submit].f-button.large {padding: 10px 18px; font-size: 18px; font-weight: bold;}
input[type=submit].f-button.pink {
	color: #fff;
	border: solid 1px #af0369;
	background: #DD0083;
	background: -webkit-gradient(linear, left top, left bottom, from(#e63488), to(#bb2d65));
	background: -moz-linear-gradient(top,  #e63488,  #bb2d65);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e63488', endColorstr='#bb2d65');
}
input[type=submit].f-button.pink:hover {
	background: #DD0083;
	background: -webkit-gradient(linear, left top, left bottom, from(#cb1a82), to(#af0369));
	background: -moz-linear-gradient(top,  #cb1a82,  #af0369);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cb1a82', endColorstr='#af0369');
}
input[type=submit].f-button.pink:active {
	color: #ffffff;
	background: -webkit-gradient(linear, left top, left bottom, from(#e63488), to(#af0369));
	background: -moz-linear-gradient(top,  #cb1a82,  #af0369);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cb1a82', endColorstr='#af0369');
}
*/
/* Debugging CSS 

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

COLOR CODE - FOR CLARIFICATION & DEBUGGING
ul{background-color:red}
ul li{background-color:#0f0}
ul li ul{background-color:#00f}
ul li ul li{background-color:#eee}
label{background-color:#a0efed}
*/

/* jQueryUI theming
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />
-------------------------------------------------------------- */

/* Fusetastic custom jqueryui integrated 
.ft-button{cursor:pointer;position:relative;outline:0;text-decoration:none!important;text-align:center;zoom:1;margin:0 4px 0 0;padding:5px 10px}
.ui-default-state{cursor:pointer;padding:.5em 1em}
*/