/* - - - - - - - - - - - - - - - - - - - - -

 Title : Cultural Care Au Pair Forms CSS. Based on Wufoo Form CSS.
 Author : Boris Masis
 URL : http://culturalcare.com

- - - - - - - - - - - - - - - - - - - - - */

body {
    margin: 7px 0 15px 0;
    font-size: small;
    font-family: "Lucida Grande" , Tahoma, Arial, Verdana, sans-serif;
    text-align:center;
    background-color: #E9EFF9;
}

* html body {
    font-size: x-small; /* for IE5/Win */
    f\ont-size:small; /* for other IE versions */
}

#container {
    position: relative;
    text-align: left;
}

#container, #footer {
    margin: 0 auto;
    width: 580px;
}

h1, h2, h3 {
    font-weight: normal;
}

form li div.col span{
	display:block;
	width:100%;
	float:left;
	padding:0;
}

li.notStacked div.col span{
	width:auto;
	margin:0 7px 0 0;
}

/* - - - - - - - - - - - - - - - - - - - - -

FORM

- - - - - - - - - - - - - - - - - - - - - */

.wufoo {
    font-family: "Lucida Grande" , Tahoma, Arial, Verdana, sans-serif;
    font-size: small;
    margin: 20px 20px 0 20px;
    padding: 0 0 20px 0;
}

form ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
}

form li {
    margin: 0;
    padding: 4px 5px 2px 9px;
    /* position: relative; 
    causes problems using mootools hide() in IE */
}

form li:after, .buttons:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

form li, .buttons {
    display: inline-block;
}

* html form li, * html .buttons {
    height: 1%;
}

form li, .buttons {
    display: block;
}

form li div, form li span {
    margin: 0 0 0 2px;
    padding: 0 0 8px 0;
    color: #444;
}

form li span {
/*  float: left; removed (was causing mootools fx problems) */
    margin:0;
} 

form li div.left {
    display: inline;
    float: left;
    width: 48%;
    clear: both;
}

form li div.right {
    display: inline;
    float: right;
    width: 48%;
}
form li div.left .medium, form li div.right .medium {
    width: 100%;
}

.clear {
    clear: both;
}

form li div label, form li span label {
    margin: 0;
    padding-top: 3px;
    clear: both;
    font-size: 9px;
    line-height: 9px;
    color: #444;
    display: block;
}

.icon {
    float: left;
    margin: .1em 5px 0 0;
    padding: 0;
    width: 16px;
    height: 16px;
}

/* ----- FIELD FLOATING ----- */

form li.leftHalf, form li.rightHalf{
	width:42% !important;
}
li.leftHalf{
	clear:left;
	float:left;
}
li.rightHalf{
	clear:none;
	float:right;
}
li.leftHalf .medium, li.rightHalf .medium,
li.leftHalf .small, li.rightHalf .small{
	width:100%;
}

/* ----- CUSTOMIZATIONS ----- */

.wufoo li {
    width: 90%;
}

a:link, .link {
    color: #EC008C;
}

a:visited {
    color: #CF81B2;
}

a:hover {
    color: #FF3FB3;
}

a:active {
    color: #FF3FB3;
}

.link {
    text-decoration:underline;
}

#background, .notice, .message {
    margin: 0 auto;
    width: 600px;
}

#background, .notice {
    background-color: White;
    padding-bottom: 7px;
    padding-top: 7px;
    border-top: solid 3px #F5F6F5;
}

#background {
    border-bottom: solid 3px #F5F6F5;
}

#container, .dashboard {
    border: 3px solid #BF0B78;
    background: transparent url("../img/bg-app.png") repeat-x;
    background-position: 20px 20px;
    clear: both;
}

.notice{
    font-size:1.5em;
    text-transform:uppercase;
    margin-bottom:20px;
    color: #8A8A8A;
}

.noticeGreen {
    color:#79BF7D;
    font-weight:bold;
}

h1, #container h2, .dashboard h2, #top_right, #contentcenter h1 {
    text-indent: 10px;
    color: White;
    text-transform: uppercase;
    font-size: 1.2em;
    font-family: arial;
}

.dashboard h2{
    text-indent: 1px;
    font-size:1em;
    padding:5px;
    }

h1 {
    font-size: 20px;
    text-align: left;
}

#container h2, .dashboard h2 {
    font-weight: bold;
}

div.done .highlight{
    background-color: #D3EFD1;
}

.highlightYellow {
    background-color: #FEFFBF;
    padding:0px;
    float:none;
}

form li.focused, .checklist li:hover, .checklist td:hover, .highlight{
    background-color: #FDEAF8;
}

div.done li.focused, div.done .checklist td:hover{
    background-color: #EFFFEE;
}

form ul li.left-full, form ul li.right-full {
    float: left;
    width: 40%;
    padding-right: 25px;
}

form .left-full div label, form .right-full div label {
    padding-top: 10px;
}

form .left-full div .medium, form .right-full div .medium {
    width: 100%;
}

form li div label, form li span label {
    padding-bottom: 3px;
    font-size: 11.5px;
    line-height: 11px;
}

label.choice-full {
    width: 100%;
}

.left {
  float: left;
  text-align: left;
  padding-right:4px;
}

.right {
  float: right;
  text-align: right;
}

form li div span.full input, 
form li div span.full select, 
form li div span.left input, 
form li div span.right input,
form li div span.left select,
form li div span.right select{
	width:100%;
}

.headingGreen, .headingRed {
    color: #55A04C;   
    text-transform: uppercase;
    float: none;
    font-weight: bold;
}

.headingRed {
    color: #FF4F56;
}

.hiddenElement {
    margin-left: 20px;
    margin-top: 2px;
    clear: both;
}

.hiddenElementNoIndent {
    margin-left: 0px;
    padding-left: 2px;
    width: 100%;
}

.indentedElement {
    margin-left: 25px;
    margin-top: 0px;
}

#footer {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align:left;
}

form li.inline, form div.inline {
    width: auto;
    line-height: 200%;
    margin-bottom: 0px;
}

form li.inline div, form li.inline label {
    display: inline;
    margin-right: 0px;
    margin-left: 0px;
}

form li.inline .blockElement div, form li.inline .blockElement label {
    display: block;
}

form li.inline input, form li.inline textarea, form li.inline div select {
    margin-right: 5px !important;
    display: inline;
    margin-left: 0px;
}

form div.inline img {
    vertical-align: middle;
    padding-left: 2px;
}

form li {
    margin-bottom: 1.3em;
}

form li.clear {
    clear: both;
    height: 0;
    padding: 0;
    margin: 0;
}

form li.width80, form span.width80 {
    width: 80%;
}

form .section h3 {
    font-weight: bold;
    font-size: 110%;
    margin: 0 0 2px 0;
    color: #444444;
}

#bulletedList {
    list-style-type: disc;
    padding-left: 3em;
}

#bulletedList li {
    margin: 0px;
    display: list-item;
    padding: 0px;
}

.smallText{
    font-size:85%;
    font-weight:normal;
}

img.slideTriggerIn, img.slideTriggerOut, img.link {
    cursor:pointer;
}

/* used to make slideContent-triggering radio buttons and checkboxes look good in safari */
div.radioHolder {
    display:inline;
    margin:0px;
}

.slideContent{
    margin:0;
    padding:0;
}

.slideContent li{
    position:static;
    /*needed to ensure mootools slide works in IE */
}

/* dummyTrigger is a hack used to match the number of triggers and slideContent elements 
dummyHolder is a hack used to simulate the needed number of holder elements*/
.dummyTrigger, .dummyHolder {
    display:none;
}

/* ----- INFO ----- */

.info {
    display: inline-block;
    clear: both;
    margin: 0 0 1em 0;
    border-bottom: 1px dotted #ccc;
}

.info[class] {
    display: block;
}

.info h2 {
    font-weight: normal;
    font-size: 160%;
    margin: 0 0 3px 0;
    clear: left;
}

.info p {
    font-size: 95%;
    line-height: 130%;
    margin: 0 0 1em 0;
}

/* ----- SECTIONS ----- */

form hr {
    display: none;
}

form li.section {
    border-bottom: 1px dashed #ccc;
    margin-top: 9px;
    padding: 0px;
    width: 98%;
}

form ul li.first {
    border-top: none;
    margin-top: 0px;
    padding-top: 1px;
}

form .section p {
   /* font-size: 85%;*/
    margin: 0 0 1em 0;
}

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

.button {
    cursor: hand !important;
}
input.btTxt {
    padding: 0 7px;
    width: auto;
    overflow: visible;
}

.buttons {
    clear: both;
    margin-top: 10px;
}

.buttons input {
    font-size: 120%;
    margin-right: 5px;
    margin-left: 5px;
}

.inPageButtons{
    margin-top:0px;
}

.inPageButtons input{
    margin-left:0px;
}

/* ----- FIELDS AND LABELS ----- */

label.desc {
    line-height: 150%;
    padding: 0 4px 1px 0;
    border: none;
    color: #444;
    display: block;
    font-size: 95%;
}

input.text, textarea.textarea, select.select {
    margin: 0;
    font-size: 100%;
    border-top: 1px solid #7c7c7c;
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3;
    border-bottom: 1px solid #ddd;
    background: #fff url(../img/fieldbg.gif) repeat-x top;
    color: #333;
}

input.text {
    padding: 2px 0 2px 0;
}

input.currency {
    text-align: right;
}

input.checkbox, input.radio, .radioButtonList input {
    display: block;
    line-height: 1.4em;
    margin: 8px 0 0 3px;
    width: 13px;
    height: 13px;
    border: 0px !important;
}
label.choice, .radioButtonList label {
    font-size: 100%;
    display: block;
    line-height: 1.4em;
    margin: -21px 0 0 25px; /*negative margin-top causes problems in IE mootools slide with visibility */
    padding: 4px 0 5px 0;
    color: #444;
}

.radioButtonList input{
    display: inline;
}
 
textarea.textarea {
    margin-top: 1px;
    font-family: "Lucida Grande" , Tahoma, Arial, Verdana, sans-serif;
}

select.select {
    margin: 1px 0;
    padding: 1px 0 0 0;
}

select.select[class] {
    margin: 0;
    padding: 1px 0 1px 0;
}

.safari select.select {
    margin-bottom: 1px;
    font-size: 120% !important;
}

/* ----- SIZES ----- */

.third {
    width: 32% !important;
}

.half {
    width: 48% !important;
}

.full {
    width: 100% !important;
}

input.very-small, select.very-small {
    width: 14%;
}

input.small, select.small {
    width: 25%;
}

input.medium, select.medium {
    width: 50%;
}

input.large, select.large, textarea.textarea {
    width: 100%;
}

input.tags {
    width: 315px;
}

textarea.very-small {
    height: 3.7em;
}

textarea.small {
    height: 5.5em;
}

textarea.medium {
    height: 10em;
}

textarea.large {
    height: 20em;
}

/* ----- REQUIRED ----- */

form .req {
    float: none;
    color: red;
    font-weight: bold;
}

/* ----- CHECKLISTS ----- */

.checklist {
    border: 1px solid #ccc;
    list-style: none;
    height: 12em;
    overflow-x:hidden;
    overflow-y:scroll;
}

.checklist ul, .checklist li {
    margin: 0;
    padding: 0;
    width: auto;
    position: static;
}

.checklist li, .checklist td {
    border-bottom: 1px solid #EFEFEF;
    padding:0;
}

ul.checklist, div.checklist {
    width: 45%;
}

ul.checklist li label div.validation-advice {
    text-indent: 0px;
    margin-left: -25px;
}

.checklist label {
    display: inline;
    margin: 0px;
    height:100%;
}

.checklist input {
    vertical-align: middle;
}

.checklist table {
    width:100%
}

* html .checklist label {
    height: 1%;
}
/*IE6 hack for checklists */

/* ----- VALIDATION ----- */

.validation-failed {
    background-color:#FFDFE5 !important;
    border:1px solid red !Important;
}

input.disabled, select.disabled {
    background-color: #F2F2F2 !Important;
    border: 1px solid gray !Important; 
}

.validation-advice {
    margin: 5px 0px 0px 0px;
    padding: 5px;
    background-color: #DD3898;
    color: #FFF;
    font-weight: bold;
    line-height: normal;
    height:auto !Important;
}

form li.inline div.validation-advice {
    display:block;
    margin: 0px 0px 10px 0px;
    /*height:16px; /*ie seems to need this.. not sure why */
}

.custom-advice {
    margin: 5px 0;
    padding: 5px;
    background-color: #C8AA00;
    color: #FFF;
    font-weight: bold;
    line-height: normal;
}

/* ----- ERROR/UPDATE MESSAGES ----- */

.message {
	background: white url("../img/bg-done.png") repeat-x;
	border: 1px solid #74AF00;
	border-width: 1px 0;
	clear: both;
	margin-bottom: 1.5em;
	text-align: left;
	line-height:1.3;
}

.message dl {
	background: url("../img/msg-done.png") no-repeat;
	padding: 15px 10px 1em 72px;
	margin: 0;
}

.message dt {
	color: #599F5C;
	font-weight: bold;
}

.message dd {
	margin-left: 0;
}

.message dd p {
	margin-bottom: .2em;
	margin-top: .4em;
}

.message a, div.done a {
	color: #599F5C !important;
}

.message ul li {
	background: url("../img/bullet.gif") no-repeat 0 .7em;
	padding-left: 10px;
	margin-bottom:0;
}

.error-message {
	background: white url("../img/bg-app.png") repeat-x;
	border-color: #DDADAD;
}

.error-message dt, .error-message a {
	color: #A33;
}

.error-message dl {
	background-image: url("../img/msg-error-app.png");
}

.info-message {
	background-image: url("../img/bg-info.png");
	border-color: #9F9F9F;
}

.info-message dt {
	color: #4F4F4F;
}

.info-message a {
	color: #6F6F6F;
}

.info-message ul li {
	margin-bottom: .2em;
}

.info-message dl {
	background-image: url("../img/msg-info.png");
}