/* 
 * This is a basic form stylesheet that can be used as the starting point for the styling of
 * site forms that have been created using the new Forms Designer. 
 *
 * The iCM form stylesheet (icmform.css) and designer form stylesheet (designerform.css) both 
 * currently import this basic stylesheet though this tie might be broken at some point within 
 * the future.
 *
 * NOTE: 
 * 
 * This stylesheet assumes an XHTML DOCTYPE is being used.
 * If a HTML 4.01 DOCTYPE is being used, see notes in form-ie.css.
 *
 */

/* General styling */

.icmform {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	/*font-size: 0.8em;*/
	font-weight: normal;
	margin: 1em;
	/*border: 1px solid yellow;*/
}
.icmform ol {
	list-style:none; /* Remove list styling */
	padding: 0;	 /* Remove list padding */
	margin: 0;
	width: 100%; /* Ensure we take up all available width */
	/*border: 1px solid green;*/	
}
.icmform li {  
    overflow:hidden; /* Ensure LI self-clears i.e. expands to encompass floated child elements and hence long labels */
	padding: 0.5em;
    /*border: 1px solid blue;*/
}
.icmform fieldset {
	margin: 0;
	padding: 0;
	/*background-color: silver;*/
} 
.icmform legend {  
	color: #000000;  
	font-weight: bold; 
} 
.icmform fieldset fieldset {
	/*border-style: none;  */
	background-color: transparent;  
	background-image: none; 
}
.icmform fieldset fieldset legend {
	font-weight: normal
}
.icmform fieldset.icmhorizontal li {
	float: left;
	/*border: 1px solid blue;*/
}

/* Label alignment */

/* Left aligned */
.icmformleft label {
	float: left; /* Ensure labels will take width into account */
	clear: left; 
	width: 10em; /* Label width */
	margin-right: 1em;
}
.icmformleft fieldset.icmbuttongroup label {
	float: none;
	clear: none;
	width: auto;
}
.icmformleft fieldset fieldset.icmvertical label,
.icmformleft fieldset fieldset.icmhorizontal label {
	width: 9.3em;
}
.icmformleft fieldset.icmbuttongroup ol {
	padding: 0; 
	margin-left: 10.4em;
	clear: left;
}
.icmformleft fieldset fieldset.icmbuttongroup ol {
	margin-left: 10em;
}

fieldset.icmhorizontal.icmbuttongroup.icmradiocontainer ol{
  margin-left: 0;
}


/* Right aligned */
.icmformright label {
	float: left; /* Ensure labels will take width into account */ 
    clear: left; 
	width: 10em; /* Label width */
	margin-right: 1em;
	text-align: right;
}		
.icmformright fieldset.icmbuttongroup label {
	float: none;
	clear: none;
	width: auto;
}
.icmformright fieldset.icmbuttongroup ol {
	padding: 0; 
	margin-left: 10.4em;
	clear: left;
}
.icmformright fieldset fieldset.icmvertical label,
.icmformright fieldset fieldset.icmhorizontal label {
	width: 9.3em;
}
.icmformright fieldset fieldset.icmbuttongroup ol {
	margin-left: 10em;
}
.icmformright fieldset fieldset.icmbuttongroup label {
	width: auto;
}

/* Top aligned */
.icmformtop label {
	display: block;
}
.icmformtop fieldset fieldset legend {
	padding-left: 0.5em;
}
.icmformtop fieldset.icmhorizontal label {
	display: block;
}
.icmformtop fieldset.icmbuttongroup label {
	display: inline;
}

/* Static field styling */

/* Guidance text */
.icmform .icmguidance{
	color: #6699cc;
}
.icmform .icmguidanceright{
	text-align: right;
}
.icmform .icmguidanceleft{
	text-align: left;
}
.icmform .icmguidancecentre{
	text-align: center;
}
.icmform .icmguidancejustify{
	text-align: justify;
}	

/* Input field styling  very short styles */
.icmform .icmvstext, 
.icmform .icmvspassword, 
.icmform .icmvsselect, 
.icmform .icmvstextarea,
.icmform .icmvsfile {  
	width:5em;
} 

/* Input field styling  short styles */
.icmform .icmstext, 
.icmform .icmspassword, 
.icmform .icmsselect, 
.icmform .icmstextarea,
.icmform .icmsfile {  
	width:10em;
} 

/* Input field styling  default  styles */
.icmform .icmtext, 
.icmform .icmpassword, 
.icmform .icmselect, 
.icmform .icmtextarea,
.icmform .icmfile {  
	width:21em;
} 

/* Input field styling  long  styles */
.icmform .icmltext, 
.icmform .icmlpassword, 
.icmform .icmlselect, 
.icmform .icmltextarea,
.icmform .icmlfile {  
	width:33em;
} 

/* Input field styling stretch styles */
.icmform .icmfselect {  
	width: 75%; /* Fallback for browsers that don't support calc() */
	width:calc(100% - 12em) /* Modern browsers */
} 
.icmform .icmfselectnolabel, .icmformtop .icmfselect {  
	width: 100%;
} 

.icmform label strong {
	display: block;
	color: #C00; 
	font-size: 85%; 
	font-weight: bold;
	text-transform: uppercase; 
}

.icmform  div.clear {
	border: none;	
}

.icmform  div.valid {
	border: solid 1px #00e000;
}

.icmform  div.error {
	border: solid 1px #e00000;
}

.icmform .errorblock  ul {
	list-style:none;
	padding: 0;
	margin: 0;
	width: 100%;
}

.icmform .errorblock  li {  
    overflow:hidden;
	color: #e00000;
	/*border: solid 1px #e00000;*/
	margin: 10px 0 5px 0;
	padding: 0 0 0.5em 0.5em;
}

.icmformrecaptcha  {
	padding-left : 11em;
}

/* implement hiding of fieldset borders within a vertical/horizontal/grid layout */
.icmform fieldset.icmhideborder {
	border: none !important;
}


/* implement hiding of the label within a input fields */
.icmform label.icmhide {
	display: none !important;
}

/* implement hiding of the fieldset label within a vertical/horizontal/grid layout */
.icmform legend.icmhide {
	display: none;
}

/* Checkbox and checkbox group and radio button group styling */
.icmform .icmsinglecheckbox {
}
.icmform .icmsinglecheckbox input[type="checkbox"] {
	vertical-align: middle;
} 
.icmform .icmcheckcontainer {
}

.icmform .icmradiocontainer {
}

/* Form ROSkeleton CSS */
.icmformdata {
    /* Container. <h1>: Form Title. <h2>: Page Title(s). */
}

.icmformdata .icmformdatapagetable {
	/* The table generated for each form page. */
}

.icmformdata .icmformdatacontainer {
	/* Container labels. Vert, Horz, etc. */
}

.icmformdata .icmformdatalabel {
	/* Left column field label. */
}

.icmformdata .icmformdatavalue {
	/* Right column field value.
	   Nested <table> elements are field types that submit multiple values, i.e.
		GoogleMapLabel | [ Lat | 20.9999 ]
					     [ Lng | 21.9999 ]
	 */
}

/* v9 Form Buttons */
.icmform .icmbutton-surround {

}

.icmform .icmbutton-surround-panel{
	display: none;
}

.icmform .icmbutton-surround .icmbutton {

}

.icmform .back {

}

.icmform .prev {

}

.icmform .next {

}

.icmform .finish {

}

.icmform .reset {

}

.icmform .script {

}

.icmform .upload {

}

/* Keep wizard buttons on one line */
.icmform .icmwizardbuttongroup  .icmbutton-surround,
.icmform .icmwizardbuttongroup .icmbutton-surround .icmbutton {
	display: inline;
}

/* Background image for fieldsets */

/*.icmform legend {  
	margin-left: 1em;  
	padding: 0;  
	color: #000;  
	font-weight: bold; 
} 
.icmform fieldset {  
	margin: 0 0 1.5em 0;  
	padding: 0;  
	border: 1px solid #BFBAB0;  
	background-color: #F2EFE9;  
	background-image: url(resources/images/fieldset_gradient.jpg);  
	background-repeat: repeat-x; 
}*/

/* Styling for the grid layout */
.icmform .icmgrid {
	width: 100%;
	table-layout:fixed;
	display: table;
}
.icmform .icmgridrow {
	display: table-row;
}
.icmform .icmgridcell {
	vertical-align: top;
	display: table-cell;
}

/* Code Editor */
.icmformleft .icmcodeeditorMain, .icmformright .icmcodeeditorMain {
  margin-left: 11em;
}

/* WYSIWYG Editor */
.icmwysiwygMain {
    margin-top: 0.5em;
    padding: 1px; 
    background-color: #fff; /* Creates a border */
    border: solid 1px #B6B6B6; /* Needed to account for 1px height issue */
}

.icmformleft .icmwysiwygMain, .icmformright .icmwysiwygMain {
    margin-left:11em;
}
.icmformleft fieldset fieldset.icmvertical .icmwysiwygMain,
.icmformleft fieldset fieldset.icmhorizontal .icmwysiwygMain, 
.icmformright fieldset fieldset.icmvertical .icmwysiwygMain,
.icmformright fieldset fieldset.icmhorizontal .icmwysiwygMain {
	margin-left:10.3em;
}

.icmwysiwygMain iframe {
    border: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    border-bottom: solid 1px #B6B6B6;
    -ms-user-select: element; /* Fix (allow) text selection in IE11 */
}

.icmwysiwygMain textarea {
    border: none;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    font: 10pt "Lucida Console",Monaco,monospace;
    resize: none;
    outline: none;
}

.icmwysiwygToolbar {
    color: #111;
    background-color: #E0E1E0; /* Fallback. */
    background-image: -webkit-linear-gradient(top, #F4F4F4, #D2D3D2);
    background-image: -moz-linear-gradient(top, #F4F4F4, #D2D3D2);
    background-image: -o-linear-gradient(top, #F4F4F4, #D2D3D2);
    background-image: -ms-linear-gradient(top, #F4F4F4, #D2D3D2);
    background-image: linear-gradient(top, #F4F4F4, #D2D3D2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F4F4F4', endColorstr='#D2D3D2'); /* For IE < 10 */

    border-bottom: solid 1px #B6B6B6;
    padding-left:5px;
}

.icmwysiwygGroup {
    float: left;
    height: 32px;
}

.icmwysiwygButton,.icmwysiwygButtonH {
    float: left;
    margin: 4px 0 1px 0;
    padding: 1px 3px;
    text-align: center;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    font-size:15px;
}

.icmwysiwygDisabled {
    opacity: 0.3;
    filter: alpha(opacity=30);
    cursor: default;
}

.icmwysiwygButton:disabled,.icmwysiwygButtonH:disabled {
    background-color: transparent;
    cursor: default;
}

.icmwysiwygButton:hover {
    background-color: #DFF1FF;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

.icmwysiwygButtonH {
    color: transparent;
    cursor: default;
}

.icmwysiwygDivider {
    float: left;
    width: 1px;
    height: 23px;
    margin: 1px 0 1px 0;
}

.icmwysiwygPopup {
    border: solid 1px rgba(122,122,122,0.25);
    background-color: #ffffff;
    color: #111;
    position: absolute;
    font: 10pt Arial,Verdana;
    cursor: default;
    z-index: 10000;
}

.icmwysiwygList div {
    padding: 2px 4px 2px 4px;
}

.icmwysiwygList p,
.icmwysiwygList h1,.icmwysiwygList h2,.icmwysiwygList h3,.icmwysiwygList h4,.icmwysiwygList h5,.icmwysiwygList h6,
.icmwysiwygList blockquote,.icmwysiwygList pre,
.icmwysiwygList font {
    padding: 0;
    margin: 0;
    background-color: transparent;
}

.icmwysiwygColor {
    width: 150px;
    padding: 1px 0 0 1px;
}

.icmwysiwygColor div {
    float: left;
    width: 14px;
    height: 14px;
    margin: 0 1px 1px 0;
}

.icmwysiwygPrompt,.icmwysiwygMsg {
    background-color: #D0DEF0;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 8px;
    font-size: 8.5pt;
    border: solid 1px #B2B2B2;
}

.icmwysiwygPrompt input,.icmwysiwygPrompt textarea {
    font: 8.5pt Arial,Verdana;
    display:block;
}

.icmwysiwygMsg {
    width: 150px;
}

.icmwysiwygButtonH {
	/* This is supposed to be hidden, 
	but must exist and be visible so 
	we can use the events and anchor
	the pop-up. So we make it tiny tiny
	and therefore almost imposible to 
	click. */
	border:none;
	width: 1px;height:1px;
	padding:0;
	background-color:transparent;
	overflow:hidden;
}

.icmwysiwygPopup.icmwysiwygList div{
	margin: 2px;
	border: solid 1px white;
}
.icmwysiwygPopup.icmwysiwygList div:hover{
	background-color: #DFF1FF;
	border: solid 1px blue;
}

.icmwysiwyg-popup-header {
	margin-bottom:8px;
}

/* Buttons like CK editor... */
.icmwysiwygPrompt input[type="button"] {
	margin:8px 0 0 0;
	float:right;
	border: solid 1px #3A58A5;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 3px;
	background-color: #3A58A5; /* Fallback. */
    background-image: -webkit-linear-gradient(top, #80AAEA, #3A58A5);
    background-image: -moz-linear-gradient(top, #80AAEA, #3A58A5);
    background-image: -o-linear-gradient(top, #80AAEA, #3A58A5);
    background-image: -ms-linear-gradient(top, #80AAEA, #3A58A5);
    background-image: linear-gradient(top, #80AAEA, #3A58A5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80AAEA', endColorstr='#3A58A5'); /* For IE < 10 */
    
	font-weight: bold;
	color: #FFF;
	cursor: pointer;
}

.icmwysiwygPrompt input[type="button"]:hover {
	border-color: #2B3F75;
    background-color: #2B3F75; /* Fallback. */
    background-image: -webkit-linear-gradient(top, #80AAEA, #2B3F75);
    background-image: -moz-linear-gradient(top, #80AAEA, #2B3F75);
    background-image: -o-linear-gradient(top, #80AAEA, #2B3F75);
    background-image: -ms-linear-gradient(top, #80AAEA, #2B3F75);
    background-image: linear-gradient(top, #80AAEA, #2B3F75);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80AAEA', endColorstr='#2B3F75'); /* For IE < 10 */
    
}