@charset "UTF-8";

/*
Design by CVWanted team
http://www.cvwanted.ch
*/

/* Form & Input & ... */

form div.group, form div.groupFirst{
	background-color:#ffffff;
	border-bottom:5px solid #eeeeee;
	margin-bottom:7px;
	padding:5px 0 5px 0;
	font-weight:bold;
	color:#99cc00;
	font-size:14px;
}

form div.groupFirst{
	padding:0px 0 5px 0;
}

form div.groupDesc{
	background-color:#f5f5f5;
	margin-bottom:10px;
	padding:5px;
	font-size:11px;
}

input, select, textarea {
	width:250px;
	border: 1px solid #dddddd;
	font-size: 12px; 
	color:#666666;
	font-family:Arial, Verdana;
	resize: none; 
	padding:5px;
	-webkit-border-radius:5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

input[type=image] {
	width:auto;
	border: 0px solid #dddddd;
	padding:0px;
}

input[type=checkbox] {
	width:auto;
	border: 0px solid #dddddd;
}

input.full, textarea.full {
	width:614px;
}


textarea.full {
	height:50px;
}

textarea.invite {
	height:100px;
}

input.button, input.buttonDisabled{
	width:auto;
	color:#666666;
	background: #ffffff url(../img/form_button_bg.png) repeat-x;
	/*background-color:#eeeeee;*/
	font-size:0.9em;
	font-weight:bold;
	padding:8px 20px 9px 20px;
	cursor:pointer;
	border:1px solid #dddddd;
}

input.buttonDisabled{
	color:#cccccc;
}

.pstrength-minchar {
	display:none;
}

.pstrength-bar, .pstrength-info{
	position:absolute;
	margin-top:-5px;
}

.pstrength-info{
	font-size:11px;
	right:0;
	margin-top:-25px;
	margin-right:6px;
}

select {
	width:264px;
	width:262px !important;
}

.checkbox{
	width:20px;
	border:none;
}

#formpane{
	float:left;
	margin:20px 0 5px 0;
	width:625px;
	min-height:500px;
	line-height:12px;
}

#formpane a{
	text-decoration:underline;
}

#formregion, #forminfo {
	float:left;
	padding:0px 0px 0px 0px;
	width:625px;
}
#formregion .elementContainer, #formregion .elementContainerLeft, #formregion .elementContainerRight {
	margin-bottom:10px;
}
#formregion .elementContainerLeft {
	float:left;
}

#formregion .elementContainerMiddleAction {
	float:left;
	width:15px;
	margin-top:23px;
	text-align:center;
}

#formregion .elementContainerMiddleAction a {
	font-size:10px;
	color:#999333;
	text-decoration:none;
	display:block;
	margin-bottom:3px;
}

#formregion .elementContainerRight, #formregion .elementContainerRightForAction {
	float:left;
	padding-left:15px;
}

#formregion .elementContainerRightForAction {
	padding-left:0px;
}
#formregion .elementContainerSettings {
	border-bottom:2px solid #eeeeee;
	padding-bottom:3px;
}
#formregion .submitContainer {
	margin-top:15px;
	margin-bottom:0px;
}

#formregion .elementContainer a {
	color:#999333;
	text-decoration:underline;
}

#formregion .freeFields {
	display:none;
}

#formregion .elementContainer a:hover{
	text-decoration:none;
}

#formregion #textarea{
	border:1px solid #dddddd;
	background-color:#ffffff;
	padding:2px 2px 2px 2px;
}
#formregion .invalid input,
#formregion .invalid select,
#formregion .invalid textarea{
	border:1px solid #ff6600;
}
#formregion .invalid span{
	display:inline;
	color:#ff6600;
}
#formheadererror, #formheadersuccess {
	border:1px solid #ff6600;
	padding:10px 20px 10px 10px;
	margin-bottom:15px;
	background-color:#f9f9f9;
}

#formheadersuccess {
	border:3px solid #99cc00;
}

#formheadersuccess a{
	color:#999333;
	text-decoration:underline;
}

#formheadersuccess a:hover{
	text-decoration:none;
}

#formheadererror img, #formheadersuccess img {
	float:left;
	margin-right:10px;
}

#forminfo {
	margin-top:20px;
	float:right;
	border:none;
	width:295px;
	background-color:#f9f9f9;
	text-align:normal;
	color:#666666;
	background: #ffffff none repeat-x top;
}

#forminfo #topTitle {
	background-image: url(../img/feature_topTitle.jpg);
	background-repeat:no-repeat;
	height:43px;
	width:295px;
}

#forminfo #top {
	background-image: url(../img/feature_top.jpg);
	background-repeat:no-repeat;
	height:3px;
	width:295px;
}

#forminfo #topTitle #title {
	padding:11px 0 0 10px;
	font-size:18px;
	color:#333333;
}

#forminfo #middle {
	background-image: url(../img/feature_middle.jpg);
	background-repeat:repeat y;
	height:auto;
	width:275px;
	padding:10px;
}

#forminfo #bottom {
	background-image: url(../img/feature_bottom.jpg);
	background-repeat:no-repeat;
	height:3px;
	width:295px;
}

#forminfo div.blockInfo {
	padding:5px 5px 2px 5px;
	background-color:#eeeeee;
	border:1px solid #dddddd;
	margin-bottom:10px;
}

#forminfo div.blockInfo h2{
	font-weight:bold;
	font-size:14px;
}

#forminfo div.progressBarContainer {
	padding:0;
	border:1px solid #dddddd;
	height:20px;
	background-color:#ffffff;
	margin:10px 0px 5px 0px;
}

#forminfo div.progressBarElement {
	padding:2px 0px 0px 5px;
	background: #ffffff url(../img/progressBar_bg.png) repeat-x left top;
	width:0px;
	height:18px;
	color:#eeeeee;
	font-weight:bold;
	text-align:center;
}

#forminfo ul, #forminfo .listlink {
	margin: 0;
	padding: 0;
	list-style: none;
}

#forminfo ul li{
	margin-bottom: 0px;
}

#forminfo ul a{
	color:#999999;
	text-decoration:none;
}

#forminfo ul a:hover{
	color:#666666;
}

#forminfo .listlink {
	margin: 0px 0 0px 15px;
	padding: 0px 0 0px 0;
	list-style: square;
	border-top:0px solid #eeeeee;
	color:#999333;
}

#forminfo .listlink li {
	margin-bottom: 2px;
}

#forminfo .listlink a{
	color:#999333;
	text-decoration:underline;
	font-size:11px;
}

#forminfo .listlink a:hover{
	text-decoration:none;
	color:#999333;
}

#forminfo ul h2{
	color:#99cc00;
	font-weight:bold;
	font-size:14px;
	margin-bottom:5px;
}

#forminfo #photoContainer{

}

#forminfo #photo{
	width:auto;
	text-align:center;
}

#forminfo #photo #imgPhoto{
	border:1px solid #dddddd;
	padding:2px;
}

#forminfo #action{
	text-align:center;
	margin:10px 0 0 0px;
}

#forminfo select{
	font-size:11px;
}
#forminfo .block-input{
	margin-bottom:5px;
}

/* Ajax */

.ajxErrorStatus{
	color:#ff6600;
}

.ajxSuccessStatus{
	color:#666666;
}

/* Label */

.formLabel .formLabelSettings{
	width:auto;
	margin-bottom:2px;
	margin-top:0px;
	color: #666666;
	font-weight:normal;
	/*float: left;*/
}
.formLabelSettings{
	float:left;
	width:auto;
	margin-bottom:2px;
	padding-top:5px;
}
.formElementSettings{
	float:right;
	width:100px;
	margin-bottom:2px;
	background-color:#eeeeee;
	text-align:center;
}


.inputTips, .inputWarnings{
	width:auto;
	margin-left:5px;
	font-size: 10px; 
	color: #999999;
}

.inputWarnings{
	margin-left:0px;
	margin-bottom:2px;
	color:#999999;
}

/* Thumbnails */
#thumbnailsregion .thumbnailContainer {
	margin-top:10px;
	margin-left:5px;
	/*border: 1px solid #eeeeee;
	background-color:#F5F5F5;*/
}

.thumbnailContainer .thumbnailLabel {
	font-weight:bold;
}

.thumbnailContainer .thumbnailExtra {
	padding:5px 5px 5px 5px;
	border: 1px solid #eeeeee;
	background-color:#F5F5F5;
}

/* Spry CSS */

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg,
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg,
.confirmRequiredState .confirmRequiredMsg,
.confirmInvalidState .confirmInvalidMsg,
.checkboxRequiredState .checkboxRequiredMsg,
.checkboxMinSelectionsState .checkboxMinSelectionsMsg,
.checkboxMaxSelectionsState .checkboxMaxSelectionsMsg,
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg  {
	display: inline;
	color: #ff6600;
	border: 1px none #ff6600;
	font-size:11px;
	margin-left:5px;
}

/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState,
.selectValidState select, select.selectValidState,
.confirmValidState input, input.confirmValidState,
.textareaValidState textarea, textarea.textareaValidState {
	background-color: #FFFFFF;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input,
select.selectRequiredState, .selectRequiredState select,
select.selectInvalidState, .selectInvalidState select,
input.confirmRequiredState, .confirmRequiredState input, 
input.confirmInvalidState, .confirmInvalidState input,
textarea.textareaRequiredState, .textareaRequiredState textarea, 
textarea.textareaMinCharsState, .textareaMinCharsState textarea, 
textarea.textareaMaxCharsState, .textareaMaxCharsState textarea {
	background-color: #FFFFFF;
	border: 1px solid #ff6600;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState,
.selectFocusState select, select.selectFocusState,
.confirmFocusState input, input.confirmFocusState,
.textareaFocusState textarea, textarea.textareaFocusState {
	background-color: #ffffff;
	border: 1px solid #99cc00;
}