@import url('main.css');   


.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 

  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 
}


/* This shit means it only effects direct ul elements that are direct children of div */
.main-menu div > ul > li > a {

color: #ffffff !important;

font-size: 12px;

background: url("video.png") no-repeat right center;
	
}
/*
.main-menu {
	
	color: #ffffff !important;

font-size: 30px;

text-align: right;

	vertical-align: top;
	
	background: url("video.png") no-repeat right center;
}
*/

.form-disclaimer {

	font-size: 14px;

text-align: right;

	vertical-align: top;

}


/* This is experimental (Feb 16, 2015) to get scrollbars on calendar cells */
div.scrollable {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}


#errorMsg {
  	line-height: 18px;
  	color: #FF1493; /* #ff1a3a;*/
  	/*background: #F9E5E6;*/
  	display: none;
  	font-weight: bold;
}

.errMsgs {
  	line-height: 18px;
  	color: #FF1493; /* #ff1a3a;*/
  	/*background: #F9E5E6;*/
  	display: none;
  	font-weight: bold;	
}


/****************************************************************************************/
/* The following several classes are for the rotating cube                              */
/* <!-- http://paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/ */
/*
#spinner {
    -webkit-animation-name: spinner5;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 20s;

    animation-name: spinner5;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-duration: 20s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

.face {
  position: absolute;
  height: 360px;
  width: 360px;
  padding: 20px;
  background-color: rgba(50, 50, 50, 0.7);
}

#cube {
  position: relative;
  margin: 0 auto;
  height: 400px;
  width: 400px;  
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 2s linear;
  transform-style: preserve-3d;  
}

#experiment {
  -webkit-perspective: 800px;
  -webkit-perspective-origin: 50% 200px;
  -moz-perspective-origin: 50% 200px;
  -moz-perspective: 800px;
    
}

#cube .one  {
  -webkit-transform: rotateX(90deg) translateZ(200px);
}

#cube .two {
  -webkit-transform: translateZ(200px);
}

#cube .three {
  -webkit-transform: rotateY(90deg) translateZ(200px);
}

#cube .four {
  -webkit-transform: rotateY(180deg) translateZ(200px);
}

#cube .five {
  -webkit-transform: rotateY(-90deg) translateZ(200px);
}

#cube .six {
  -webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
}
*/


/***********************************************************************************
https://desandro.github.io/3dtransforms/docs/carousel.html
**********************************************************************************/

.CarouselContainer {

  width: 740px;
  /*height: 540px;*/
  height: 500px;
  position: relative;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 200px;
  -moz-perspective-origin: 50% 200px;
 

}

#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 2s linear;
  -webkit-transform-style: preserve-3d;
  -moz-transition: -moz-transform 2s linear; 
  
    -webkit-animation-name: spinner5;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 8s;

    animation-name: spinner5;
    animation-timing-function: ease-out;
    /*animation-iteration-count: 1;*/
    animation-iteration-count: 0;
    animation-duration: 8s;

}


  /* WebKit and Opera browsers */
  @-webkit-keyframes spinner5 {
    from { -webkit-transform: rotateY(0deg);    }
    to   { -webkit-transform: rotateY(-360deg); }
  }

  /* all other browsers */
  @keyframes spinner5 {
    from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
    }
  }

  #carousel:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }

  #PriceAndFeatures:focus {
    -webkit-animation-iteration-count: 0;
    animation-iteration-count: 0;
  }

#carousel figure {
  margin: 0 20 0 0px;
  display: block;
  position: absolute;
  width: 720px;
  height: 460px;
  /*left: 60px;*/
  top: 30px;
  /*border: 2px solid #3399ff; */
  border-style: ridge ;
  background-color: rgba(235, 210, 188, 1.1);  /*dark gray: rgba(18, 20, 23, 0.8);  rgba(228, 139, 233, 0.7); rgba(237, 214, 194, 1.1); */
  /* 235, 210, 188 */
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}


/* y is the angle of one side of the triangle to the other */
/* z is the spacing apart from each other the sides are */
#carousel figure:nth-child(1) { transform: rotateY(   0deg ) translateZ( 230px ); }
#carousel figure:nth-child(2) { transform: rotateY( 240deg ) translateZ( 230px ); }
#carousel figure:nth-child(3) { transform: rotateY( -240deg ) translateZ( 230px ); }


/* #carousel figure:nth-child(9) { transform: translateZ( -288px ) rotateY( -160deg ); */

/**********************************************************************************/


#SearchInputSWYT {
	
	color:/*#333333*/ #000000 !important; 

	font-size:15px !important;

	/*margin: 0 0 0 10px !important;*/ /*top right bottom left*/

	width:275px !important;

	

	-webkit-border-radius: 3px !important;

	border-radius: 2px !important;

  	-webkit-box-shadow: none !important;

	box-shadow: none !important;

	height: 35px !important;

	outline: none !important;

}

#HiddenFld_Heidi {
/*	display: none; */
	font-size: 14px;
}


.InstructionText {
  /* margin-bottom: 2px; */
  margin: 6px;

  font-size: 11px;
  
  line-height: 13px;

  /* color: #824328; */
  /* color: #55240f; */
  color: #2b1208;
  
  font-family: "Open Sans",sans-serif;
  font-style: italic;

  font-weight: 400;
}



.landingPageLabel3 {
  margin: 6px;

  font-size: 11px;
  
  letter-spacing: 1.5px;
  line-height:	16.5px;

  color: #824328;
  
  font-family: "Open Sans",sans-serif;
  font-style: normal;

  font-weight: 700;
}


#mainSearchDiv {
	/*background-color: #ffffff !important;*/

	/* I removed this border on 4/6/2015 */
	/*border: 2px solid #D8AA5F !important;*/

	padding: 5px !important;

	color:#333333 !important;

	font-size:11px !important;

	/*margin: 0 0 0 10px !important;*/

	/*width:830px !important;*/
	width: 42% !important;

	height: 300px;

	-webkit-border-radius: 3px !important;

	border-radius: 3px !important;

  	-webkit-box-shadow: none !important;

}
 
.btnSearch:hover {
  color: #FFF;
  background: #900;
}

#makeappt {

	margin:15px 0 10px 35px;

	float:right;

}



#makeappt-sidebar {

 /*top, right, bottom, left*/

	margin:10px 10px 0px 60px; 

	float:right;

	width:250px;

        border: 1px solid #b4b4b4;

	background-color: #FFE4C4; 

}





#login {

	background-color: #FBE0AA;

	border: 1px solid #D8AA5F;

	padding: 10px;

	width: 92%;

	color:#000000;

	margin:15px 0 0 0;	

	
-webkit-border-radius: 10px !important;

border-radius: 10px !important;

}



.field1 {

	background-color: #ffffff;

	border: 1px solid #D8AA5F;

	padding: 3px;

	color:#333333;

	font-size:11px;

	margin: 0 0 0 10px;

	width:200px;

	

	-webkit-border-radius: 3px !important;

border-radius: 3px !important;

	

}



.field1-sidebar {

	background-color: #ffffff;

	border: 1px solid #D8AA5F;

	padding: 3px;

	color:#333333;

	font-size:11px;

	margin: 0 0 0 10px;

	width:175px !important;

	
	-webkit-border-radius: 3px !important;

	border-radius: 3px !important;

}



.loginhome {

	margin: 10px 0 10px 10px; 

	padding: 5px 10px 5px 10px;

	font-weight:bold;

	color:#ffffff;

}

/* vv custom styles */

form input.field1 {

	background-color: #ffffff !important;

	border: 1px solid #D8AA5F !important;

	padding: 3px !important;

	color:#333333 !important;

	font-size:11px !important;

	margin: 0 0 0 10px !important;

	width:200px !important;

	

	-webkit-border-radius: 3px !important;

	border-radius: 3px !important;

  	-webkit-box-shadow: none !important;

	box-shadow: none !important;

	height: 15px !important;

	outline: none !important;

}



#VertBar {



    border-left: 1px solid black;



    float: right;



    padding-left: 10px;



    width: 40%;



}

#NotTransparent {
/*	filter:alpha(opacity=100); */
	-khtml-opacity: 1.0; 
	opacity: 1; 
}


.legend {
	color: #333333;
    display: block;
    font-family: "Open Sans",sans-serif;
    font-style: italic;
    font-weight: 600;
    font-size: 11px !important;    
}

#SelectedTime {
	/*display: block;*/
    font-family: "Open Sans",sans-serif;
    /*font-style: semi-bold;*/
    font-weight: 600;
    /*font-size: 10px !important;*/
    font-size: 10px;
    
}

.nectarJug {
	/*display: hidden;*/
	visibility: hidden;
}

.nectarJugdDiv {
	/*display: hidden;*/
	display: none;
}

.close-image {
    cursor: pointer;
    display: block;
    float: right;  
    z-index: 63;
    position: absolute; /*newly added*/
    right: 4px; /*newly added*/
    top: 4px;/*newly added*/
    width: 15px;
    border: none !important;
    /*margin:0;*/
    margin-bottom: 0 !important;   
    /* fyi... it's the box-shadow that causes that border you can't get rid of on images*/ 
}

.get-started-now-image {
    cursor: pointer;
    display: block;
    float: right;  
    z-index: 63;
    position: absolute; /*newly added*/
    right: 1270px; /*newly added*/
    top: 90px;/*newly added*/
    width: 275px;
    border: none !important;
    /*margin:0;*/
    margin-bottom: 0 !important;   
    /* fyi... it's the box-shadow that causes that border you can't get rid of on images*/ 
    box-shadow: none;
}


.help-button-image {
    cursor: pointer;
    display: block;
    /*float: right;  
    z-index: 63;
    /*position: absolute; */
    /*right: 4px; */
    /*top: 4px;*/
    width: 8px;
    border:none !important;
    margin-bottom: 0 !important;
    /* fyi... it's the box-shadow that causes that border you can't get rid of on images*/    
}

.WhatNeedsAttentionImage {
    cursor: pointer;
    display: block;

    width: 13px;
    border:none !important;
    margin-bottom: 0 !important;
    /* fyi... it's the box-shadow that causes that border you can't get rid of on images*/
    box-shadow: none;    
}



.smallTextInputLabel {
    color: #333333 !important;
    font-size: 11px !important;
}

.size12TextInputLabel {
    color: #000000 !important;
    font-size: 12px !important;
}

.size13TextInputLabel {
    color: #000000 !important;
    font-size: 13px !important;
}

.size15TextInputLabel {
    color: #000000 !important;
    font-size: 15px !important;
}

.alternateBackgroundColorOnPuttyDiv {
	/*height: 20px !important; */
	background-color: #E9E0D0 !important;
}

.alternateBackgroundColorOnPuttyDiv:focus, .alternateBackgroundColorOnPuttyDiv:active  {
	background-color: #A3C5D0 !important;
}

.popupDivShadow {
	box-shadow: 0 0 30px 5px #999;
	-webkit-box-shadow: 0 0 30px 5px #999;
}

#MyLittlePopupDivYesNo {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  
  width: 35%;
  height: 45%;
  background-color: black;
  z-index:1001;
 /* -moz-opacity: 0.9;
  opacity:.90;
  filter: alpha(opacity=90);  */
  
    padding: 35px;
    border: 10px double #E6BE8A; /*#CD853F;*/
    margin: 25px;  
    
    box-shadow: 10px 10px 5px #888888;
    
    visibility: hidden;
}


#WhatAreYouWantingToPutOnTheCalendar {
  position: fixed;
  top: 45%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  resize: both;
  
  line-height: 20px;

  /* color: #824328; */
  /* color: #55240f; */
  color: #2b1208;
  
  font-family: "Open Sans",sans-serif;
  font-style: normal;
  font-size: 15px;
  font-weight: 400;    
  
  width: 45%;
  height: 70%;
  background-color: black;
  z-index:1001;
 /* -moz-opacity: 0.9;
  opacity:.90;
  filter: alpha(opacity=90);  */
  
    padding: 15px;
    border: 8px ridge #E6BE8A; /*#CD853F;*/
    margin: 15px;  
    
    box-shadow: 10px 10px 5px #888888;
    
    visibility: hidden;
}


#ClientLogin_WeddingUpDo {
  position: fixed;
  top: 45%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  resize: both;
  
  line-height: 20px;

  color: #333333; /* color: #2b1208;  dark brown font */
  
  font-family: "Droid Serif",serif;
/*  font-family: "Open Sans",sans-serif; */  
  font-style: normal;
  font-size: 17px;
  font-weight: 400;    
  
  width: 25%;
  height: 60%;
  background-color: #fdf8e1;  /* light peachy background */
  z-index:1001;
 /* -moz-opacity: 0.9;
  opacity:.90;
  filter: alpha(opacity=90);  */
  
    padding: 15px;
    border: 8px ridge #E6BE8A; /*#CD853F;*/
    margin: 15px;  
    
    box-shadow: 10px 10px 5px #888888;
    
    visibility: hidden;
}

#SaveAppointmentLandingPage {
  position: fixed;
  top: 45%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  resize: both;
  
  line-height: 20px;

  color: #1F1429;  /* #333333;  color: #2b1208;  dark brown font */
  
  font-family: "Droid Serif",serif;
/*  font-family: "Open Sans",sans-serif; */  
  font-style: normal;
  font-size: 17px;
  font-weight: 400;    
  
  width: 25%;
  height: 60%;
  background-color: #fdf8e1;  /* light peachy background */
  z-index:1001;
 /* -moz-opacity: 0.9;
  opacity:.90;
  filter: alpha(opacity=90);  */
  
    padding: 15px;
    border: 8px ridge #E6BE8A; /*#CD853F;*/
    margin: 15px;  
    
    box-shadow: 10px 10px 5px #888888;
    
    visibility: hidden;
}


.ClientLoginBigLabel {
  line-height: 24px;

  color: #2b1208; /* dark brown font */
  
  font-family: "Droid Serif",serif;
/*  font-family: "Open Sans",sans-serif; */  
  font-style: normal;
  font-size: 21px;
  font-weight: 400;    
}

.ClientLoginSmallLabel {
  line-height: 20px;

  color: #2b1208; /* dark brown font */
  
  font-family: "Droid Serif",serif;
/*  font-family: "Open Sans",sans-serif; */  
  font-style: normal;
  font-size: 18px;
  font-weight: 400;    
}


#start_time {
  
  line-height: 20px;
  
  font-family: "Open Sans",sans-serif;
  font-style: normal;
  font-size: 15px;
  font-weight: 400;    
  
  background-color: black;
  z-index:90;
  
  margin-bottom: 0px;  
}


.what_time_would_you_like_appointment_to_end  {
  
  line-height: 20px;
  
  font-family: "Open Sans",sans-serif;
  font-style: normal;
  font-size: 15px;
  font-weight: 400;    
  
  background-color: black;
  z-index:91;
  
  margin-bottom: 0px;  
}

#WhatYouGetSection {

  font-family: 'Droid Serif', serif;

  color: black; 

  font-size: 20px;

}