#__koucai___photo_ro img.fabrikLightBoxImage {
width: 120px;
}

/*Here is the styling for your table legend - to learn what all the different elements are in a basic form see http://www.w3schools.com/tags/tag_legend.asp*/
#details_1 legend,
#details_1 h3.legend{
	background-color: #c0c0c0;
	-moz-user-select: none;
	border-bottom: 1px solid #B7B7B7;
	/* border-top: 1px solid #B7B7B7; */
	color: #777777;
	font-weight: bold;
	margin: 0;
	padding:0;
	text-shadow: 0 1px 0 #FFFFFF;
	zoom: 1;
	width:100%;
	background: -moz-linear-gradient(center top , #F3F3F3, #D7D7D7) repeat scroll 0 0 #E7E7E7;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7D7D7', endColorstr='#F3F3F3'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3),
		to(#D7D7D7) );
	background-image: -ms-linear-gradient(top, #F3F3F3, #D7D7D7);
	position:relative;
	font-size: 100%;
}

/*Here is the styling for your group intro*/
#details_1 .groupintro{
	margin-top:40px;
	padding:0 20px;
	color:#666;
}

/*Here is the styling for your group outro*/
#details_1 .groupoutro{
	padding:10px 20px 10px 20px;
	color:#666;
}

#details_1 legend span,
#details_1 h3.legend span{
	padding:5px;
	display:block;
}

/*This controls the background color and the outer border of your form*/
#details_1{
	width:100%;
	background-color:none;
	border:1px solid #DDDDDD;
}

/*This controls the padding of the title of your form*/
#main #details_1 h1{
	padding-left:10px;
	margin:0;
}

/*This controls the margin and border of your form area ie the fieldset - note: if you leave the margin as is, this could be said to control the 'inner border'*/
#details_1 fieldset,
#details_1 .fabrikGroup{
	margin:5px 10px;
	position:relative;
	padding:0;
	bborder:1px solid #DDDDDD;
}

/* Needed in detail view */
#details_1 .fabrikGroup{
	clear: both;
}

/*This controls the display of your form elements - note: ul stands for 'unordered list', see: http://www.w3schools.com/tags/tag_ul.asp*/
#details_1 fieldset ul{
	list-style:none;
	margin:0;
}

/*Note that the order of pixel specifications here follows this rule - top, right, bottom, left*/
/* Styling for main element list in form view */
#form_1 fieldset > ul{
	padding:4px 10px 20px 10px;
}

/* Styling for the main element list in detail view*/
#details_1 .fabrikGroup > ul{
	margin: 0;
	padding:4px 10px 20px 20px;
}

/*This controls the styling of the form and group - this is a bit vague, needs clarification*/
#details_1 .fabrikForm .fabrikGroup ul{
	list-style:none;
}

/*This controls the styling of your gallery - needs clarification*/
#details_1 .fabrikGalleryImage{
	border:1px solid #ccc;
	margin:5px;
	padding:5px;
}

/*This controls styling of your google maps elements - needs clarification*/
/* START: align google map sub elements vertically */

.googlemap .fabrikSubElementContainer{
	-moz-box-orient:vertical;
	-webkit-box-orient:vertical;
	box-orient:vertical;
}

/*This controls styling of your google maps elements - needs clarification*/
.googlemap .fabrikSubElementContainer > div{
	-mox-box-flex: 1;
	-webkit-box-flex: 1;
	box-flex: 1;
}

/* END: align google map sub elements vertically */
/* START : label spacing for chxbox, radios */

#details_1 label span{
	padding:0 4px;
}

/* END : label spacing for chxbox, radios */

/*This controls the styling of the tips box that is associated with any of your elements*/
.floating-tip {
	background-color: #fff;
}

/*This controls the styling of your linked tables - needs clarification*/
#details_1 .linkedTables{
	margin:0.6em 0;
}

/*This controls the styling of your related data - needs clarification*/
#details_1  .related_data_norecords{
	display:inline;
}

/*This controls ???? - needs clarification*/
#details_1 .fabrikForm .fabrikGroup ul .fabrikElementContainer,
#details_1 .fabrikElementContainer,
#details_1 .fabrikElementContainer{
	padding:0px 10px;
	background:none !important;
	display:-webkit-box;
	display:-moz-box;
	display:box;
	overflow:visible;
	width:50%;
}

#details_1 table.repeatGroupTable {
	width: 100%;
}

/** Repeat group rendered as a table **/
#details_1 .repeatGroupTable .fabrikElementContainer {
	display:table-cell;
	width: auto;
	padding: 5px;
	margin: 0;
}

#details_1 .repeatGroupTable .fabrikElement {
    margin: 0;
}

#details_1 .fabrikElement {
    margin: 4px 0 0 0;
}

#details_1 .fabrikErrorMessage {
    display: none;
}

#details_1 ul.fabrikRepeatData {
	margin: 0;
}

#details_1 .oddRow0 {
	background-color: #FAFAFA;
}

#details_1 .oddRow1 {
	background-color: #Efefef;
}


#details_1 .fabrikSubGroup {
    margin-top: 10px;
}

/*This controls the styling of the buttons area at the bottom of your form*/
#details_1 .fabrikActions{
	padding:10px;
	clear:left;
	margin:5px 10px;
	border:1px solid #DDDDDD;
}

/*This controls the spacing between the buttons at the bottom of your form, for more information on the input tag see http://www.w3schools.com/html/html_forms.asp*/
#details_1 .fabrikActions input{
	margin-right:7px;
}

/*This controls the styling of the form field when being validated by ajax*/
#details_1 .fabrikValidating{
	color: #476767;
	background: #EFFFFF no-repeat right 7px !important;
}

/*This controls the styling of the form field when ajax validation has been successful*/
#details_1 .fabrikSuccess{
	color: #598F5B;
	background: #DFFFE0;
}

/*** slide out add option
section for dropdowns radio buttons etc**/

#details_1 .addoption dl{
	display:inline;
	width:75%;
}
#details_1 .addoption{
	clear:left;
	padding:8px;
	margin:3px 0;
	background-color:#efefef;
}

#details_1  a.toggle-addoption, a.toggle-selectoption{
	padding:0 0 0 10px;
}


/*** end slide out add option section **/

#details_1 input,
#details_1 select,
#details_1 textarea{
	border:1px solid #DDDDDD;
	border-radius:3px;
	padding:3px;
}

#details_1  .inputbox:focus{
	background-color:#ffffcc;
	border:1px solid #aaaaaa;
}

#details_1 .addoption dd, .addoption dt{
	padding:2px;
	display:inline;
}

#details_1 .fabrikSubGroup{
	clear:both;
	margin-top:40px;
	position: relative;
}

#details_1 .fabrikSubGroupElements{
	width:80%;
	border: 1px dotted #ccc;
}

#details_1 tr.fabrikSubGroup .fabrikErrorMessage {
	padding: 0;
}

#details_1 div.fabrikGroupRepeater{
	position: absolute;
	right: 10px;
	top: 0;
}
#details_1 .geo{
	visibility:hidden;
}


#details_1 .fabrikGroup .readonly,
#details_1 .fabrikGroup .disabled{
	background-color:#DFDFDF !important;
	color:#8F8F8F;
}

/*** fileupload folder select css **/
#details_1 ul.folderselect{
	border:1px dotted #eee;
	background-color:#efefef;
	color:#333;
}

#details_1 .folderselect-container{
	border:1px dotted #666;width:350px;
}

#details_1 .fabrikForm {
}

.fabrikForm img{
	margin:4px 0px 0px 3px !important;
}

#details_1 .fabrikForm .breadcrumbs{
	background: transparent url(../images/folder_open.png) no-repeat center left;
	padding:2px 2px 2px 26px ;
}

#details_1 .fabrikForm .fabrikGroup li.fileupload_folder{
	background: transparent url(../images/folder.png) no-repeat center left;
	padding:2px 2px 2px 26px ;
	margin:2px;
}

#details_1 .fabrik_characters_left{
	clear:left;
}

/** bump calendar above mocha window in mootools 1.2**/
#details_1 div.calendar{
	z-index:115 !important;
}

/** special case for 'display' element with 'show label: no' option **/
#details_1 .fabrikPluginElementDisplayLabel {
	width: 100% !important;
}

/** autocomplete container inject in doc body not in #forn_1 */
.auto-complete-container{
	overflow-y: hidden;
	border:1px solid #ddd;
	z-index:99999;
}

#details_1 .displayBox {
width:99%;
}
.auto-complete-container ul{
	list-style:none;
	padding:0;
	margin:0;
}

.auto-complete-container li.unselected{
	padding:2px 10px !important;
	background-color:#fff !important;
	margin:0 !important;
	border-top:1px solid #ddd;
	cursor:pointer;
}

.auto-complete-container li:hover,
.auto-complete-container li.selected{
	background-color:#DFFAFF !important;
	cursor:pointer;
}
#details_1 .leftCol,
#details_1 .leftCol,
#details_1 .fabrikSubLabel{
	width: 205px;
}
#details_1 .leftCol{
	color:#444;
}

#details_1 .fabrikElement {
	margin-left: 10px;
	-webkit-box-flex:1;
	-moz-box-flex:1;
	box-flex:1;
	min-width: 100% !important;
	max-width: 440px !important;
}

@media (min-width:1000px) and (max-width:1190px) {
#details_1 .fabrikElement {
	margin-left: 3px;
	max-width: 280px !important;
}

}


@media (max-width: 480px) {
#details_1 .displayBox {
display:block;
width:80% !important;
max-width:60vw !important;
}
	
#details_1 .displayBox leftCol, #details_1 .displayBox fabrikElement{
	display:inline-block;
}

#details_1 .fabrikElement {
	margin-left: 3px;
	max-width: 200px !important;
}

}



#details_1 .addbutton {
	background: transparent url(images/add.png) no-repeat left;
	padding: 2px 5px 0 20px;
	margin-left:7px;
}

#details_1 .fabrikError,
#details_1 .fabrikNotice,
#details_1 .fabrikValidating0,
#details_1 .fabrikSuccess0{
	font-weight: bold;
}

#details_1 .fabrikMainError{
	height:2em;
	line-height:2em;
}

#details_1 .fabrikMainError img{
	padding:0.35em 1em;
	float:left;
}

#details_1 .fabrikNotice{
	background: url('images/alert.png') no-repeat scroll 10px center #DFFDFF !important;
    color: #009FBF;
    padding: 10px 10px 10px 35px;
}

#details_1 .fabrikError,
#details_1 .fabrikGroup .fabrikError{
	color: #c00;
	background: #EFE7B8;
}

#details_1 .fabrikErrorMessage{
	padding-right: 5px;
}

#details_1 li:before {
margin-top: 6px;
}

#details_1 li {
	line-height: 1.1em;
}


#details_1 .fabrikLabel {
	min-height:1px; /*for elements with no label txt*/
	line-height: 140%;
}

#details_1 .fabrikActions {
	padding-top: 15px;
	clear: left;
	padding-bottom: 15px;
}

/* #details_1 .fabrikGroupRepeater {
	padding-top: 50px;
	float: left;
	width: 19%;
} */

/** used by password element */
#details_1 .fabrikSubLabel {
	margin-left: -10px;
	clear: left;
	margin-top: 10px;
	float: left;
}

#details_1 .fabrikSubElement {
	display: block;
	margin-top: 10px;
}

#details_1 .addGroup:link {
	text-decoration: none;
}

/*
some fun with fancy buttons not ready for prime time

#details_1 .button{
	background: -moz-linear-gradient(center top , #ccc 0%, #777) repeat scroll 0 0 transparent;
	background-image: -ms-linear-gradient(top, #ccc, #777);
	border: 1px solid #614337;
	border-radius: 6px 6px 6px 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 2px rgba(255, 255, 255, 0.6) inset;
	color: #FFFFFF;
	margin: 10px;
	padding: 5px 20px;
}

#details_1 .button:hover{
	background: -moz-linear-gradient(center top , #E88801 0%, #C93C00) repeat scroll 0 0 transparent; /* orange */
	background: -moz-linear-gradient(center top , #8EC400 0%, #558A01) repeat scroll 0 0 transparent; /* green */
	background-image: -ms-linear-gradient(top, #8EC400, #558A01);
	text-shadow: 0 -1px 0 #000000, 0 1px 0 rgba(255, 255, 255, 0.2);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

#details_1 .button[name=delete]:hover{
	background: -moz-linear-gradient(center top , #E88801 0%, #C93C00) repeat scroll 0 0 transparent;
	background-image: -ms-linear-gradient(top, #E88801, #C93C00);
}

#details_1 .button[name=Reset]:hover{
	background: -moz-linear-gradient(center top , #E3EB01 0%, #B19F01) repeat scroll 0 0 transparent;
	background-image: -ms-linear-gradient(top, #E88801, #B19F01);
} */