/* ==========================================================================
   common - SYSMSG
   ========================================================================== */
   
/* -------------------------------------------------------------------------- */
/* container */
.sysmsg { 
	position:relative; width:auto; height:auto; margin:9px 0 18px 0; padding:20px 25px 12px 25px; overflow:hidden;
	color:#fff; background:#f7f7f7;  
	font-size:18px; font-weight:400; line-height:26px;
	/*background-clip*/-moz-background-clip:padding; -webkit-background-clip:padding; background-clip:padding-box; }
	
	/* common */
	.sysmsg h3,
	.sysmsg h4,
	.sysmsg p,
	.sysmsg li 	{ margin:0 !important; padding:0 0 9px 0 !important; color:#fff !important;  }
	
	/* custom */
	.sysmsg h3,
	.sysmsg h4 	{ font-size:20px; font-weight:700; }
	.sysmsg a		{ text-decoration:underline; }
		
/* extend */
.sysmsgSuccess 	{ background:#131F6B; }
.sysmsgError 		{ background:#d32329; }

/* ==========================================================================
   common - FORM
   ========================================================================== */

/* -------------------------------------------------------- */
/* container */
.formView { position:relative; width:99%; margin:0; padding:0; }

	/* form */
	.formView form {
		display:block; position:relative; width:100%; height:auto; margin:0; padding:0; }
		
		/* -------------------------------------------------------- */
		/* placeholder */
		::-webkit-input-placeholder			{ color:#00417b; }
		:-moz-placeholder 					{ color:#00417b; }
		::-moz-placeholder 					{ color:#00417b; }
		:-ms-input-placeholder				{ color:#00417b; }
		
		/* -------------------------------------------------------- */
		/* fieldset */
		.formView fieldset { 
			display:block; position:relative; margin:0; padding:0; border:0; }
		
		/* -------------------------------------------------------- */
		/* label */			
		.formView label { 
			display:block; margin:0; padding:26px 0 0 0;
			color:#2C2C2C; vertical-align:baseline; white-space:nowrap; text-overflow:ellipsis;
			font-size:17px; font-weight:normal; line-height:40px; }
		.formView label span{ font-style:italic; font-weight:200; color:#83898c; } 
		/* inline */
		.formView label.inline { 
			display:inline-block; margin:0; padding:0 0 3px 10px; line-height:120%; overflow:hidden;
			white-space:normal; vertical-align:top; 

			position: relative; top: 2px;


		}
		.formView input.styled + label.inline { 
			width:80%; } /* prevent wrappnig */
			.formView input.styled + label.inline.amend{
				width:17%;
			}
			
		/* disabled */
		.formView .disabled label { 
			color:#666; }
		
		/* -------------------------------------------------------- */
		/* radio/checkbox */
		
		/* default */
		.formView input.radio,
		.formView input.checkbox { /*by JS*/ }
		
		/* custom-form-elements */
		.formView span.radio,
		.formView span.checkbox	{ 
			display:inline-block; width:25px; height:25px; margin:0 0 0 0; padding:0;
			/*background:url(../img/radio-custom.png) no-repeat; vertical-align:middle;*/
			cursor:pointer!important; }
		.formView span.checkbox { 
			background-image:url(../img/checkbox-custom.png); }
		
		/* disabled */
		.formView .disabled span.radio,
		.formView .disabled span.checkbox { 
			cursor:default!important; }
			
		/* -------------------------------------------------------- */
		/* input */
		#formENews input.text,
		.formView input.text,
		.formView textarea  { 
			display:block; width:95.75%; height:20px; margin:0; padding:12px 2%; overflow:hidden;
			color:#2C2C2C; background:#FBF9F4; border:1px solid #DADAD2;
			font-size:18px; line-height:20px; font-weight:400;
			
			/*background-clip*/-moz-background-clip:padding; -webkit-background-clip:padding; background-clip:padding-box; 

			width: 95%;


		}


		/* Enews Subscribe */

		/* Title select */
		#seg-04 #title-select.col2 { width: 130px!important;}
		.enews-title.custom-dropdown.custom-dropdown--white { width: 128px!important;}
		#formENews .enews-title select.text { width: 114px!important;}

		/* State & Country Select */
		#seg-04 #state-select.col2 { width: 47%!important;}
		#state-select .enews-title.custom-dropdown.custom-dropdown--white { width: 99%!important;}
		#formENews #state-select .enews-title select.text { width: 94%!important; line-height: 120%;}


		#seg-04 .col2 { width: 47%!important;}
		#seg-04 #formENews #subscriberFirstName,
		#seg-04 #formENews #subscriberLastName { width: 94%!important;}

		#seg-04 #formENews #emailAddress { width: 95%!important;}
		

		
		#formENews input.text { border-radius: 0;}
		
		#formENews .enews-title select.text {
		  background: #fbf9f4;
		  border: medium none;
		  margin-bottom: 0;
		  padding: 13px 0px 14px 12px;
		  font-size: 18px;
		  color: #7395AB;
		  border-radius: 0;
		  
		}

		

		#seg-04 .col2 select#state,
		#seg-04 .col2 select#country { width: 94%!important;}

		.formspacer-short { height: 1em; clear: both;}

		#seg-04 #formENews label { font-size: 17px;}

		#seg-04 .col3 input#organisation,
		#seg-04 .col3 input#occupation,
		#seg-04 .col3 input#diocese { width: 87%!important; padding-left: 13px;}



		
		/* interaction */
		.formView input.text:focus,
		.formView input.text:active { 
			color:#2C2C2C; background:#FFFFFB;
			border-color: #131F6B;
			}
		.formView input.text[disabled] { 
			color:#ccc!important; opacity:1!important; }
		
		/* datepicker */
		.formView input.text.datepicker + .icon { 
			bottom:16px; right:14px; width:14px; height:14px;
			color:#333; font-size:14px; line-height:14px;
			cursor:pointer!important; }
		.formView input.text.datepicker + .icon:hover { 
			color:#297ad4; }
		
		/* nesting */
		.formView .col2 > input.text 									{ width:91.25%; padding-left:4%; padding-right:4%; }
		.formView .col2 > .col2 > input.text 					{ width:82%; padding-left:8%; padding-right:8%; }
		.formView .col2 > .col3 > input.text 					{ width:75.25%; padding-left:12%; padding-right:12%; }
		.formView .col2 > .col2 > .col2 > input.text 	{ width:67.25%; padding-left:16%; padding-right:16%; }
		
		/* ------------------------------------------------------------------------------ */
		/* select */
		.formView select,
		.formView .select { 
			display:block; width:92.75%; height:20px; margin:0; padding:12px 5% 12px 2%; overflow:hidden;
			color:#929292; background:#FBF9F4; border:2px solid #bfbfbf;
			font-size:18px; line-height:20px; font-weight:400;
			cursor:pointer!important;
			/*border-radius*/-webkit-border-radius:0px; border-radius:0px;
			/*background-clip*/-moz-background-clip:padding; -webkit-background-clip:padding; background-clip:padding-box;}
		
		/* custom-form-elements */
		
		/* same dimension as .select */
		.formView select 				{ position:relative; width:92%!important; height:44px!important; margin:0; padding:0 10px; border:0px solid #bfbfbf;
								  						/*box-sizing*/-webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; } 
		/* put <select> on top */
		.formView .select 			{ position:absolute; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
		.formView .multiselect 				{ position:relative; width:92%!important; height:350px!important; margin:0; padding:0 10px; border:0px solid #bfbfbf;
								  						/*box-sizing*/-webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; }

.formView #creditcard select { width: 87%!important;}

		
		/* optimise position for IE7 */
		.ie7 .formView select 	{ margin-top:10px; } 
		
		/* icon */
		.formView .select .icon { right:4px; top:50%; width:24px; height:24px; margin:-12px 0 0 0; font-size:14px; line-height:24px; }
		
		/* nesting */
		.formView .col2 > .select 								{ width:85.25%; padding-left:4%; padding-right:10%; }
		.formView .col2 > .col2 > .select 				{ width:71.25%; padding-left:8%; padding-right:20%; }
		.formView .col2 > .col3 > .select 				{ width:57.25%; padding-left:12%; padding-right:30%; }
		.formView .col2 > .col2 > .col2 > .select { width:43.25%; padding-left:16%; padding-right:40%; }
		
		/* -------------------------------------------------------- */
		/* textarea */
		.formView textarea { 
			display:block; width:95%; margin:0; padding:12px 2%; overflow:hidden;
			color:#2C2C2C; background:#FBF9F4; border:1px solid #DADAD2; resize:vertical;
			font-size:17px; line-height:120%; font-weight:400; height: 70px;
			/*background-clip*/-moz-background-clip:padding; -webkit-background-clip:padding; background-clip:padding-box; }
		
		/* interaction */
		.formView textarea:focus,
		.formView textarea:active { 
			color:#2C2C2C; background:#FFFFFB;
			border-color: #131F6B;
		}
		.formView textarea[disabled] { 
			color:#666!important; opacity:1!important; }
		
		/* nesting */		
		.formView .col2 > textarea 									{ width:91.25%; padding-left:4%; padding-right:4%; }
		.formView .col2 > .col2 > textarea 					{ width:83.25%; padding-left:8%; padding-right:8%; }
		.formView .col2 > .col3 > textarea	 				{ width:75.25%; padding-left:12%; padding-right:12%; }
		.formView .col2 > .col2 > .col2 > textarea 	{ width:67.25%; padding-left:16%; padding-right:16%; }
		
		/* text button */	
		.formView .btnText { margin-top:5px; }



/*Checkbox form spacer*/
.formspacer {
	height: 2em; clear: both;
}

.formView .col2a > div,
.formView .col2b > div { padding-bottom: 5px;}

.formView .col2 .btnLeft { float: left;}


.formView input.error { border: 1px solid #ec1322;}

.formView label.formLabel { font-weight: bold;}

/* -------------------------------------------------------------------------- */
/* responsive */
@media only screen and (max-width:640px) {
	
	/* reduce label top gap */
	.formView label 		{ padding-top:8px; /*font-size:14px;*/ }
	.formView label.inline 	{ padding-top:16px; }
	
	/* reduce radio/checkbox top gap */
	.formView span.radio,
	.formView span.checkbox { margin-top:16px; }

}
@media only screen and (max-width:520px) {
	
	/* normalize for mobile */
	
	/* input/textarea */
	.formView input.text,
	.formView .col2 > input.text,
	.formView .col2 > .col2 > input.text, 
	.formView .col2 > .col2 > .col2 > input.text,
	.formView textarea,
	.formView .col2 > textarea,
	.formView .col2 > .col2 > textarea, 
	.formView .col2 > .col2 > .col2 > textarea 			{ width:91.25%; padding-left:4%; padding-right:4%; }
		
	/* select */
	.formView .select,
	.formView .col2 > .select,
	.formView .col2 > .col2 > .select,
	.formView .col2 > .col2 > .col2 > .select 			{ width:85.25%; padding-left:4%; padding-right:10%; }
	
	/* col2Important */
	.formView .col2 > .col2.col2Important > input.text 	{ width:83.25%; padding-left:8%; padding-right:8%; }
	.formView .col2 > .col2.col2Important > .select 	{ width:71.25%; padding-left:8%; padding-right:20%; }
	
	/* col3Important */
	.formView .col2 > .col3.col3Important > input.text 	{ width:71.25%; padding-left:14%; padding-right:14%; }
	.formView .col2 > .col3.col3Important > .select		{ width:55.25%; padding-left:14%; padding-right:30%; }

	/* button */
	.formView .btnBox,
	.formView .btnText { 
		display:block; margin-left:0!important; margin-right:0!important;
		float:none!important; clear:both!important; text-align:center; }

		#main .formView .col2 > .col2 { width: 100% }
	#main .formView .col2 > .col2 > input.text { width: 91% }
	
}

@media only screen and (max-width:540px) {
	
	/* normalize for mobile */
	
	/* input/textarea */
	#main .formView .col2a,
	#main .formView .col2b,
	#main .formView .colFull,
	#main .formView .col2 { width:100%; padding-left:0%; padding-right:0%; clear: both; float: none; }

	#main .formView .col2 > .col2 { width: 100% }
	#main .formView .col2 > .col2 > input.text { width: 91% }
		
	/* select */
	.formView .select,
	.formView .col2 > .select,
	.formView .col2 > .col2 > .select,
	.formView .col2 > .col2 > .col2 > .select 			{ width:85.25%; padding-left:4%; padding-right:10%; }
	
	/* col2Important */
	.formView .col2 > .col2.col2Important > input.text 	{ width:83.25%; padding-left:8%; padding-right:8%; }
	.formView .col2 > .col2.col2Important > .select 	{ width:71.25%; padding-left:8%; padding-right:20%; }
	
	/* col3Important */
	.formView .col2 > .col3.col3Important > input.text 	{ width:71.25%; padding-left:14%; padding-right:14%; }
	.formView .col2 > .col3.col3Important > .select		{ width:55.25%; padding-left:14%; padding-right:30%; }

	/* button */
	.formView .btnBox,
	.formView .btnText { 
		display:block; margin-left:0!important; margin-right:0!important;
		float:none!important; clear:both!important; text-align:center; }


	/* Delivery Information */
	.formView label.inline{ padding-top: 0; top: 0;}
	
}

@media only screen and (max-width:640px) {
	/* Delivery Information */
	.formView label.inline{ padding-top: 0; top: 0;}
}





.custom-dropdown--large {
    font-size: 1.5em;
}

.custom-dropdown--small {
    font-size: .7em;
}

.custom-dropdown__select{
    font-size: inherit; /* inherit size from .custom-dropdown */
    padding: .5em; /* add some space*/
    margin: 0; /* remove default margins */
}

.custom-dropdown__select--white {
    background-color: #fff;
    color: #444;    
}



    .custom-dropdown {
        position: relative;
        display: block;
        vertical-align: middle;
        border:1px solid #bfbfbf
    }

    .custom-dropdown__select {
        padding-right: 2.5em; /* accommodate with the pseudo elements for the dropdown arrow */
        border: 0;
        border-radius: 0px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;    
    }

    .custom-dropdown::before,
    .custom-dropdown::after {
        content: "";
        position: absolute;
        pointer-events: none;
    }

    .custom-dropdown::after { /*  Custom dropdown arrow */
        content: "\25BC";
        height: 1em;
        font-size: .625em;
        line-height: 1;
        right: 1.2em;
        top: 50%; margin-top: -.5em;
    }

    .custom-dropdown::before { /*  Custom dropdown arrow cover */
        width: 2em;
        right: 0; top: 0; bottom: 0;
        border-radius: 0;
    }

    .custom-dropdown__select[disabled] {
        color: rgba(0,0,0,.3);
    }

    .custom-dropdown.custom-dropdown--disabled::after {
        color: rgba(0,0,0,.1);
    }

    /* White dropdown style */
    .custom-dropdown--white::before {
        background-color: #fbf9f4;;
        border-left: 1px solid rgba(0,0,0,.1);
    }

    .custom-dropdown--white::after {
        color: rgba(0,0,0,.9);
    }

    /* FF only temp fix */
    @-moz-document url-prefix() {
        .custom-dropdown__select             { padding-right: .9em }
        .custom-dropdown--large .custom-dropdown__select { padding-right: 1.3em }
        .custom-dropdown--small .custom-dropdown__select { padding-right: .5em }
    }



.formView select { -webkit-appearance: none!important;}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
	.selector-01 { margin: 10px; }
	.selector-02 { margin: 10px; }
	.selector-03 { margin: 10px; }
}



/* Checkout page */
#payment #summary .extra.total tr.last-child p { font-family: "source_sans_probold", sans-serif;}


/* Events Register accordion form */

#accordion { margin-bottom: 20px;}

/* Title style */
#accordion .first p {
  border-bottom: none;
  color: #064787;
  font-family: "HelveticaNeueStdCond77Bold";
  font-size: 17px;
  font-weight: normal;
  line-height: 20px;

  cursor: pointer;
}

/* Add space between each event in the form */
#accordion .first {
	display: block;
	margin: 10px 0;
	position: relative;
}

/* Stack title and description */
.accordion div { width: 100%; display: block; position: relative; outline: none;}

.eventTitle {
	display: inline-block; width: 80%;
}

.strike .eventTitle { color: green!important;}

.accordion .first { border-bottom: 1px solid #064787; padding: 10px 0;}
.accordion .second { clear: both; border-bottom: 1px solid #064787!important;}


/* Align Checkbox and Title */
.accordion input[type="checkbox"] {
	float: left;
	margin-right: 14px;
	width: 25px;
}

/* Align description and amount input */
.accordion .second .option-content { 
	display: inline-block;
	width: 70%;

}

.accordion .second span.option-quantity span {
	margin: 16px -10px 0px 0px;
	float: right; 
}



.accordion input[type="number"] {
	float: right;
	margin: 0 20px;
	width: 25px;
	padding: 10px;
}

/* Hide description and amount input */
.accordion .icon { position: absolute; right: 35px; color: #064787;}

.strike .icon { color: green;}




.ui-accordion-header-active .icon-chevron-down:before {
	content: "\f077"!important;
}

.strike span.selected:after {
	content: "(selected)";
	
}


/* Responsive */
@media all and (max-width: 450px) {
	#accordion .second p {
		width: 55%;
	}
}



/* IE8 fixes */
.ie8 .icon {
	display: none;
}

.text .amend{
	display: inline-block;
    margin-top: -30px;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid #ccc;
    width: 300px;
}