/* 
    Document   : colorbox_customised
    Created on : Apr 9, 2013, 11:13:34 AM
    Author     : Eddeee
    Description:
        Purpose of the stylesheet follows.
*/

/*Start span part of button*/
/*Buttons*/
.colorbox-display .button {
	padding: 1px;
	font-size: 14px;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	background-color: white;

	display: -moz-inline-box;
	display: inline-block;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
	box-shadow: 0 1px 0 rgba(255,255,255,0.5);

	color: #2e440c;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);

	border: 1px solid #cfab1d;

	background-color: #f0dd93;
	background: -moz-linear-gradient(top, #faf5df, #e9ce61);
	background: -o-linear-gradient(top, #faf5df, #e9ce61);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#faf5df), color-stop(1,#e9ce61));

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faf5df', endColorstr='#e9ce61');
}
.colorbox-display .button span {
	margin: 0;
	
	height: 16px;
	line-height: 16px;
	font-size: 14px;
	font-weight:  bold;
	vertical-align: top;

	display: -moz-inline-box;
	display: inline-block;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
        
        color: #7B550F;
	padding: 9px 19px;

	text-shadow: 0 1px 0 rgba(255,255,255,0.7);

	background-color: #e4c23d;
	background: -moz-linear-gradient(top, #e8cc5d, #e0ba23);
	background: -o-linear-gradient(top, #e8cc5d, #e0ba23);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#e8cc5d), color-stop(1,#e0ba23));

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8cc5d', endColorstr='#e0ba23');
}
.colorbox-display .button input {
	position: absolute;
	cursor: pointer;
	left: 0;
	top: 0;
}
.colorbox-display .button.focus,
.colorbox-display .button:focus {

	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 4px rgba(0,0,0,0.3);
        border: 1px solid #a98c18;
}
.colorbox-display .button.focus span,
.colorbox-display .button:focus span,
.colorbox-display .button:hover span,
.colorbox-display .button.hover span,
.colorbox-display .button:active span,
.colorbox-display .button.active span {
        color: white;

	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;

	text-shadow: 0 1px 0 rgba(0,0,0,0.5);

	background-color: #cbab2b;
	background: -moz-linear-gradient(top, #bfa228, #d3b02d);
	background: -o-linear-gradient(top, #bfa228, #d3b02d);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#bfa228), color-stop(1,#d3b02d));

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfa228', endColorstr='#d3b02d');
}

/*End div part of button*/




/*Text*/
.colorbox-display
{
    font-family:Arial;
}
.colorbox-display h2
{
    color:#6f6f6f;
    font-family:futura-pt;
    font-size: 28px;
    margin: 0;
}
.colorbox-display h3
{
    color:#6f6f6f;
    font-family:futura-pt;
    font-size: 22px;
    margin: 0;
}


.colorbox-display label
{
    font-family:futura-pt;
    font-size:18px;
}
.colorbox-display a
{
    text-decoration: none;
    color:orangeRed;
}
/*End Text*/
#cboxContent
{
    border-radius:5px !important;
    padding-left:5px !important;
    padding-right:5px!important;
}

/*Start GRID*/
.colorbox-display .column 
{
	float: left;
	margin: 0 1%;
}
.colorbox-display .grid-1 
{
	width: 4.25%;
}
.colorbox-display .grid-2 
{
	width: 10.5%;
}
.colorbox-display .grid-3 
{
	width: 16.75%;
}
.colorbox-display .grid-4 
{
	width: 23%;
}
.colorbox-display .grid-5 
{
	width: 29.25%;
}
.colorbox-display .grid-6 
{
	width: 35.5%;
}
.colorbox-display .grid-7 
{
	width: 41.75%;
}
.colorbox-display .grid-8 
{
	width: 48%;
}
.colorbox-display .grid-9 
{
	width: 54.25%;
}
.colorbox-display .grid-10 
{
	width: 60.5%;
}
.colorbox-display .grid-11 
{
	width: 66.75%;
}
.colorbox-display .grid-12 
{
	width: 73%;
}
.colorbox-display .grid-13 
{
	width: 79.25%;
}
.colorbox-display .grid-14 
{
	width: 85.5%;
}
.colorbox-display .grid-15 
{
	width: 91.75%;
}
.colorbox-display .grid-16 
{
	width: 98%;
}

.colorbox-display textarea {
	width: 96%;
	max-width: 96%;
	min-width: 36%;

	background: white;
	color: #333333;
	border: 1px solid #9A9A9A;

	padding: 8px;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.colorbox-display input.password,
.colorbox-display input.text {
	border: 1px solid #9A9A9A;
	padding: 8px;
	color: #333333;
	width: 35%;
	background: white;
        
        font-family: "Arial",Helvetica,Arial,sans-serif;
        font-size:16px;
	line-height: 16px;

	vertical-align: middle;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.colorbox-display input.password.big,
.colorbox-display input.text.big {
	width: 96%;
}
.colorbox-display input.password.medium,
.colorbox-display input.text.medium {
	width: 65%;
}
.colorbox-display input.password.small,
.colorbox-display input.text.small {
	width: 35%;
}
.colorbox-display textarea.error,
.colorbox-display input.error {
	border: 1px solid #9C0303;
}
.colorbox-display input.password {
	background: white url('../img/input-password-bck.png') no-repeat right center;
	padding-right: 45px;
}


/*Popup error*/

/*End GRID*/

.colorbox-display .selector {
	height: 30px;
	border: 1px solid #9A9A9A;
	padding: 2px 8px;
	color: #333333;
	width: 25%;      
	background: white url('../img/select-bck.png') no-repeat right center;
	padding-right: 45px;

	font-family: "Arial",futura-pt,Helvetica,Arial,sans-serif;
        font-size:16px;
	line-height: 16px;

	vertical-align: middle;

	display: -moz-inline-box;
	display: inline-block;
                
	position: relative;

	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}
.colorbox-display .selector span {
	display: block;
	padding: 1px 0;
}
.colorbox-display .selector select {
	width: 100%;
	height: 35px;
        -webkit-appearance: none;    
	position: absolute;
	left: 0;
	top: 0;
}

/* Kevin MYC-4436 add this mobile only css style below to stop the colorbox from generating a window that is bigger than the viewport of the mobile browser causing horizontal scroll on phone browser */
@media (max-width: 750px) {

	/* Kevin MYC-4436 add closeWhite SVG logo only for mobile subscribe popup as per design requirement note that this relies on the custom class 'mobileColorBox' added as an attribute to colorbox in mobile_occasion_landing.php file */
	.mobileColorBox #cboxClose{position:absolute; top:0; right:0; background:url(images/closeWhite.svg) no-repeat; width:40px; height:40px; border:none; padding:0; text-indent:-9999px;}

  /* custom adjustment to the background of colorbox */
  .mobileColorBox #cboxContent {
      background: rgba(12, 0, 0, 0.9);
      padding-left: 0px !important;
  }

	#colorbox, #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {max-width: 100% !important;}
	#colorbox, #cboxContent, #cboxLoadedContent {max-width: 100% !important;}

	#colorbox, #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {width: 100% !important;}
	#colorbox, #cboxContent, #cboxLoadedContent {width: 100% !important;}
	
	#cboxContent {border-radius: 0px !important;}
	#cboxWrapper {width: 100% !important;}
	
	#cboxTopLeft, #cboxMiddleLeft, #cboxBottomLeft, #cboxTopRight, #cboxMiddleRight, #cboxBottomRight, #cboxTopCenter, #cboxBottomCenter {display: none;}
	#cboxWrapper {box-sizing: border-box; padding: 0px;}
}