/*
 *  OpenJaw input styling
 */
.oj-inputs *{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.oj-inputs h4 {
	font-size: 1.167em; 
	font-style: normal;
	font-weight: bold;
	line-height: 1.6426em;
	padding: 0 0 0.0714em 0.714em;
	background-color: #CCCCCC;
	color: #333333;
}

.oj-inputs label{
	display:none;
}

.oj-inputs input, 
.oj-inputs select{
	margin:0 0 10px 0;
}

.oj-inputs input[type=text]:focus,
.oj-inputs select:focus{  
   box-shadow: 0 0 2px rgba(0, 0, 150, 0.5);
   -webkit-box-shadow: 0 0 2px rgba(0, 0, 150, 0.5); 
   -moz-box-shadow: 0 0 2px rgba(0, 0, 150, 0.5); 
}  

.oj-inputs input[type=text],
.oj-inputs select{
	border: 1px solid #999999;
	height: 28px;
	padding-left: 10px;
	width:100%;
}

.oj-inputs select{
	padding:.3em;/.4em;
}

.oj-inputs p{
	margin: 13px 0;
	line-height: 12px;
	text-align: center;
	font-weight:bold;
}

.oj-inputs span{
	text-align: center;
	font-weight:bold;
}

.oj-inputs option[value=""]{
	color:#757575;
}

.oj-header{
	float: left;
    font-weight: bold;
    margin: 10px 0 0 10px;
	text-align:left;
	cursor:pointer
}

/*
*  Validation styling
*/

.oj-required{
	background: url("../../images/common/red_asterisk.png") no-repeat scroll #FFFFFF;
	background-position: right 5px center;
}

.oj-invalid{
    box-shadow: 0 1px 3px 0  rgba(255, 0, 0, 1);
    -webkit-box-shadow: 0 1px 3px 0  rgba(255, 0, 0, 1); 
    -moz-box-shadow: 0 1px 3px 0  rgba(255, 0, 0, 1); 
}

.oj-invalid-message{
   background: url("../../images/common/invalid.png") no-repeat scroll 98% center #FFFFFF;
}

.oj-invalid-message p{
  float:left;
  margin: 5px 0 5px 0;
  color: #D45252;
  padding-right: 2em;
  text-align:left;
}

.oj-valid{
	background: url("../../images/common/valid.png") no-repeat scroll #FFFFFF;
	background-position: right 5px center;
    box-shadow: 0 1px 3px 0 rgba(0, 255, 0, 0.5);
	-webkit-box-shadow: 0 1px 3px 0 rgba(0, 255, 0, 0.5);
	-moz-box-shadow: 0 1px 3px 0 rgba(0, 255, 0, 0.5);
}

.oj-valid p {
	text-align: center;
}

.link{
	cursor: pointer;
}

.oj-page-load{
    min-height: 40px;
	background: url("../../images/common/ajax-loader-small.gif") no-repeat center scroll #FFFFFF;
}


/* Styling for placeholder text for browsers that do not support the placeholder attribute */
.oj-has-placeholder {
	color: #666666;
}
/**
	CSS Used to indicate expanding div, arrow image that will rotate once the div is clicked.
	Usage: 
		<p onclick="OJ('#{$indicatorId}').toggleClass('rotated'); return false;">
			<xsl:value-of disable-output-escaping="yes" select="$someText"/>
		</p>
		<div class="rotateWrap">
			<div class="arrow">&nbsp;</div>
		</div>

*/
.oj-rotateWrap{
    overflow:visible;
	float:left;
    height:16px;
    width:16px;
	transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
    transition: ease .5s;
	-moz-transform: ease .5s;
	-webkit-transform: ease .5s;
	margin-top: 12px;
	margin-left: 3px;
}

.oj-arrow{
	position:relative;
	overflow:visible;
	background: url("../../images/common/arrow.png") no-repeat center scroll #FFFFFF;
	padding-top: 3px;
}

.oj-rotated{
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}


/*
*
* Optional info
*
*/
.oj-optional-header{
	float: left;
    font-weight: bold;
	text-align:left;
	cursor:pointer
}

.oj-optional-header:hover{
	text-decoration:underline;
}

.oj-optional{
	margin: 18px 0 0 0;
	text-align:center;
}

.oj-optional > img{
	margin-left:10px;
}

.oj-optional > a{
	margin-right:10px;
}


.oj-baggage-controls{
	background: #fff;
	padding-bottom:-10px;
	
}

.oj-baggage-controls .oj-baggage-button {
    background: none repeat scroll 0 0 #F2F2F2;
    border: medium none;
  	color: #8c8c8c;
    cursor: pointer;
    font-size: 1.2em;  
	height: 1.8em;
    transition: all 0.35s ease 0s;
	border-radius:3px;
}

.oj-baggage-button:focus {
	outline: 0;
}

.oj-add:hover {
	background-color: #80ff80;
	color: white;
}

.oj-remove:hover {
	background-color: #ff6666;
	color: white;
}

.oj-baggage-button:active {
    opacity:0.45; 
    transition:0; 
}

/**
  *  Dialog outlay
  */
.oj-modal-dialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 0.4s ease-in;
	-moz-transition: opacity 0.4s ease-in;
	transition: opacity 0.4s ease-in;
	pointer-events: none;
}

.oj-modal-dialog:target {
	opacity:1;
	pointer-events: auto;
}

.oj-modal-dialog .oj-modal-content {
	background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 5px;
    height: auto;
    margin: 10% auto;
    padding: 10px;
    position: relative;
    width: 60em;
}

.oj-modal-dialog p {
	margin: 10px 0;
	text-align: left;
	font: normal 1.1em/1.8em "Open Sans", Verdanda, sans-serif;
}

.oj-modal-dialog a.close {
	background: #F2F2F2; 
	color: #DDD;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 25px;
	text-decoration: none;
	font-size:12px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.oj-modal-dialog a.close:hover { 
	background-color:#FD9706;
	color: #FFF;
}