/* 
	Title:			MCS - Calendar screen styles 

	Table of Contents:
		layout
		boxes
		typography
		instructions
		footer
		page1
		page2
		page3
		page4
		footer
		demo
		landing pages
		clearing
		
To-do:
+ rename page1,2,3,4 to more meaningful names
+ clean up and streamline
		
*/


/* layout
----------------------------------------------- */
	
*{
	margin: 0;
	padding:0;
	}

body{
	background: url(../images/bg.jpg) repeat-x;
	font: 76% trebuchet, verdana, sans-serif;
	text-align: center;
	color: #48441d;
	}

#page1,
#page2,
#page3,
#page4,
#landing,
#misc{
	margin: 0 auto;
	width: 800px;
	text-align: left;
	}

#refer-a-friend {
	margin: 10 auto;
	
	text-align: left;
}

#refer-a-friend .box{
	background: none;
	border: none;
	background-color: #9c3;
	}



#content-wrapper{
	background: url(../images/bg_middle.gif) repeat-y;
	}
	
#content{
	padding: 40px 50px 10px 40px;
	background: url(../images/bg_top.gif) no-repeat;
	}
	
#header{
	padding-bottom: 6px;
	}

#header #instructions{
	float: left;
	padding-left: 5px;
	width: 350px;
	}
	
#header #logo{
	float: right;
	}

#footer{
	background: url(../images/bg_bottom.gif) no-repeat;
	padding-bottom: 40px;
	}



/* boxes
----------------------------------------------- */
.arrow{
	position: relative;
	padding-bottom: 20px;
	background: url(../images/down_arrow.gif) left bottom no-repeat;
	}
	
.box{
	width: 100%;
	background: url(../images/bg_box.gif) repeat-y;
	border: 4px solid #dde9c7;
	margin-top: 5px;
	}

.box .step-number{
	float: left;
	width: 30px;
	font-size: 3em;
	color: #fff;
	text-align: center;
	}


.box .main{
	padding: 4px;
	}
	
	
.box .main .step-text{
	padding: 10px;
	margin: 5px;
	margin-left: 40px;
	background-color: #dde9c7;
	}

/* typography
----------------------------------------------- */

h1 {
	color: #b7b37f;
	font-size: 1.5em; 
	margin-bottom: .5em;
	}
h2 { 
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: .4em;
	}
h3 { 
	font-size: 1.1em;
	font-weight: bold;
	}

p {
	margin-bottom: 1.5em;
	line-height: 1.5em;
	}

a {
	color: #F3C444;
	font-weight: bold;
	text-decoration: none;
	}
a img{
	border: 0;
	}
input {
	display: inline;
	}

.error_msg{
	font-weight: bold;
	color: #e33;
	}


/* instructions
----------------------------------------------- */

#instructions ul {
	list-style-type: none;
	background: url(../images/instructions_arrow.gif) left bottom no-repeat;
	}
#instructions ul li{
	padding-left: 25px;
	}	

#instructions ul li strong{
	color: #19b4de;
	}	


/* page1
----------------------------------------------- */
	
/* step1 */

#page1 #step1{
	height: 260px;
	}

#page1 #step1 .step-number{
	height: 260px;
	}
	
#page1 #step1 #preview {
	float: left;
	width: 191px;	/* Opera 5 */
	\width: 220px;	/* IE5Win */
	w\idth: 191px;	/*Others */
	height: 170px;	/* Opera 5 */
	\height: 184px;	/* IE5Win */
	h\eight: 170px;	/*Others */
	margin: 2px 0 0 15px;
	padding: 8px 5px 0 5px;
	border: 2px solid #dde9c7;
	text-align: center;
	background-color: #fff;
	font-size: 1em;
	}
	
#page1 #step1 #preview img{
	margin: 0 auto;
	padding-bottom: 2px;
	display: block;
	}
	
#page1 #step1 #choose-image{
	float: right;
	width: 442px;
	}
#page1 #step1 #choose-image img{
	float: left;
	border: 2px solid #eef4e3;
	}

/* step2 */

#page1 #step2 .step-number{
	height: 150px;
	}

#page1 #step2 #cover-box {
	float: left;
	width: 159px;	/* Opera 5 */
	\width: 190px;	/* IE5Win */
	w\idth: 159px;	/*Others */
	margin: 10px 0 0 15px;
	padding: 6px;
	border: 2px solid #dde9c7;
	text-align: center;
	background-color: #fff;
	}

#page1 #step2 #cover-box img{
	margin: 0 auto;
	display: block;
	border: 2px solid #eef4e3;
	}

#page1 #step2 #cover-box img:hover{
	border: 2px solid #48441d;
	}

#page1 #step2 #choose-month{
	float: right;
	width: 446px;
	padding: 4px 4px 0 0;
	text-align: center;
	line-height: .9em;
	}
#page1 #step2 #choose-month div{
	float: left;
	padding-bottom: 8px;
	}

#page1 #step2 #choose-month img{
	border: 2px solid #eef4e3;
	display: block;
	}

#page1 #step2 #choose-month img:hover{
	border: 2px solid #48441d;
	}
	
/* step3 */

#page1 #step3 .main{
	float: left;
	padding: 10px;
	}
	

/* page2
----------------------------------------------- */
	
/* step1 */

#page2 #step1{
	padding-bottom: 30px;
	}


#page2 #step1 .month{
	float: right;
	width: 650px;
	}


#page2 #step1 .month .preview{
	float: left;
	margin: 10px 20px 0 0;
	padding: 6px;
	border: 2px solid #dde9c7;
	text-align: center;
	background-color: #fff;
	}

#page2 #step1 .month .preview img{
	display: block;
	padding-bottom: 2px;
}

#page2 #step1 .month .caption{
	padding-top: 10px;
	}

#page2 #step1 .month .caption textarea{
	margin-top: 2px;
	}
	
	
		
/* page3
----------------------------------------------- */
	
/* step1 */

#page3 #step1 .step-number{
	height: 200px;
	}
	
#page3 #step1 #holiday-groups{
	padding: 5px 15px 100px 15px;
	margin-left: 10px;
	float: left;
	}

#page3 #step1 .holiday-group{
	padding: 10px;
	background-color: #dde9c7;
	}
#page3 #step1 a{
	color: #48441d;
	}

#page3 #step1 a .holiday-group{
	display: block;
	color: #48441d;
	border: 2px solid #eef4e3;
	}

#page3 #step1 a:hover .holiday-group{
	color: #48441d;
	border: 2px solid #adc997;
	}

	
#page3 #step1 .holiday-listings{
	float: left;
	margin: 5px;
	padding: 15px 50px 20px 20px;
	border: 2px solid #dde9c7;
	background-color: #fff;
	font-size: 0.9em;
	line-height: 1.6em;
	}



/* step2 */

#page3 #step2 #custom-date-wrapper{
	float: right;
	width: 660px;
	padding-bottom: 10px;
	}

#page3 #step2 .custom-date,
#page3 #step2 .add-custom-date,{
	float: left;
	}

#page3 #step2 .custom-date{
	padding: 8px;
	margin-bottom: 2px;
	}
#page3 #step2 .add-custom-date{
	padding: 8px;
	background-color: #dde9c7;
	margin-bottom: 6px;
	}

	
/* page4
----------------------------------------------- */
	
/* step1 */

#page4 #step1{
	padding-bottom: 30px;
	background: url(../images/bg_page4_step1.gif) repeat-y;
	}
	
	
#page4 #step1 .step-text{
	width: 470px;
	}
	
#page4 #step1 #months-wrapper{
	width: 670px;
	float: right;
	}
	
#page4 #step1 .month{
	float: left;
	width: 500px;
	}


#page4 #step1 .month .preview{
	float: left;
	margin: 10px 10px 0 10px;
	padding: 6px;
	border: 2px solid #dde9c7;
	text-align: center;
	background-color: #fff;
	}

#page4 #step1 .month .preview img{
	display: block;
	padding-bottom: 2px;
}

#page4 #step1 .month .caption{
	padding-top: 10px;
	}

#page4 #step1 .month .caption textarea{
	margin-top: 2px;
	}

#page4 #step1 .caption-box-review{
	float: left;
	margin-top: 4px;
	background-color: #fff;
	width: 350px;
	border: 2px solid #dde9c7;
	padding: 15px;
}

#page4 #step1 .buttons,
#page4 #step2 .buttons{
	float: right;
	width: 136px;
	padding-top: 24px;
	}

#page4 #step1 .buttons img{
	padding-bottom: 5px;
	}

/* step2 */

#page4 #step2{
	background: url(../images/bg_page4_step1.gif) repeat-y;
	}

#page4 #step2 #date-wrapper{
	float: left;
	padding-left: 40px;
	}
	/*
#page4 #step2 #holiday-listings{
	float: left;
	padding: 15px;
	line-height: 1.8em;
	}
	
#page4 #step2 #custom-dates{
	float: right;
	padding: 15px 50px 15px 15px;
	}	
	*/
.holiday-listings-review{
	float: left;
	width: 346px;	/* Opera 5 */
	\width: 400px;	/* IE5Win */
	w\idth: 346px;	/*Others */
	margin: 10px;
	padding: 15px;
	border: 2px solid #dde9c7;
	background-color: #fff;
	line-height: 1.8em;
	clear: both;
	}



#review-instructions-right{
	background-color: #dde9c7;
	border: 2px solid #eef4e3;
	margin: 5px;
	padding: 5px;	
}

/* footer
----------------------------------------------- */


#footer #timeline{
	float: left;
	text-align: right;
	padding-left: 140px;
	}

#footer #timeline dl{
	font-size: 0.8em;
	}

#footer #timeline dt,
#footer #timeline dd{
	float: left;
	height: 40px;
	line-height: 40px;
	text-align: center;
	}

#footer #timeline dt{
	width: 20px;
	background: url(../images/timeline_off.gif) bottom no-repeat;
	}

#footer #timeline dt.active{
	background: url(../images/timeline_on.gif) bottom no-repeat;
	}
#footer #timeline dd{
	margin-right: 10px;
	}



#footer #next{
	float: right;
	padding: 8px 40px 0 0;
	}

#next img{
	display: block;
	}

#next ul{
	padding-left: 7px;
	}
	
#next li{
	float: left;
	list-style: none;
	height: 20px;
	width: 21px;
	text-align: center;
	}
#next li.active{
	background: url(../images/next_active.gif) no-repeat;
	}


/* demo
----------------------------------------------- */
#demo-text{
	margin: 0 auto;
	width: 700px;	/* Opera 5 */
	\width: 760px;	/* IE5Win */
	w\idth: 700px;	/*Others */
	padding: 10px 20px 10px 40px;
	margin-bottom: 15px;
	border: 2px solid #ddd;
	text-align: left;
	}

#demo-text h2{
	
	}


/* landing page
----------------------------------------------- */

/*body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 10px 0px 0px;
	text-align: center;
	background: url(../images/bkg.jpg) repeat-x;
}*/

#landing .box{
	background: none;
	border: none;
	background-color: none;
	}
#landing-nav{
	list-style: none;
	}

#landing-nav li{
	display: block;
	float: left;
	}

#boxBlueFrame{
	width: 344px;	/* Opera 5 */
	\width: 360px;	/* IE5Win */
	w\idth: 344px;	/*Others */
	padding: 8px;
	background: #19B4DE;
	float: left;
	margin-top: 10px;
	font: 14px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #FFFFFF;
}
#boxBlue{
	padding: 10px;
	background: #D1EEFF;
	margin-top: 10px;
	font: 12px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #333333;
}
.boxBlue img{
	float: left;
	margin: 5 5px 5px 0;
	padding: 5px 5px 5px 0px;
	clear: both;
}
#boxGreenFrame{
	clear: right;
	width: 305px;	/* Opera 5 */
	\width: 325px;	/* IE5Win */
	w\idth: 305px;	/*Others */
	padding: 10px;
	background: #99CC33;
	float: right;
	margin-top: 10px;
	font: 14px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #FFFFFF;
}
#boxgreen{
	padding: 10px;
	background: #DEE9C7;
	margin-top: 10px;
	font: 12px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #333333;
}

#boxReferAFriendFrame{
	xclear: center;
	width: 405px;	/* Opera 5 */
	\width: 425px;	/* IE5Win */
	w\idth: 405px;	/*Others */
	padding: 10px;
	background: #99CC33;
	float: right;
	margin-top: 20px;
	margin-right: 20px;
	margin-left: 20px;
	margin-bottom: 20px;
	font: 14px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #FFFFFF;
}
#boxReferAFriend{
	padding: 10px;
	background: #DEE9C7;
	margin-top: 10px;
	font: 12px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #333333;
}

#box-refer-a-friend-email-text p {
	padding: 10px;
	border: 1px solid #bec9a7;
	background: #BEC9A7 url(../images/refer.gif) top left repeat-x;
	margin-top: 10px;
	font: 12px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #333333;
}

#boxAdFrame{
	clear: right;
	float: right;
}
#boxBrownFrame{
	clear: both;
	padding: 10px;
	width: 688px;	/* Opera 5 */
	\width: 708px;	/* IE5Win */
	w\idth: 688px;	/*Others */
	background: #B98B2F;
	float: left;
	margin-top: 10px;
	font: 14px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #FFFFFF;
}
#boxBrown{
	clear: both;
	padding: 10px;
	background: #E7CDA0;
	margin-top: 10px;
	font: 12px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #333333;
}
.boxBrown img{
	float: left;
	margin: 5 5px 5px 0;
	padding: 5px;
	clear: both;
}

#tagline {
	float: left;
	font: 16px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #19B4DE;
	padding: 20px 0 0 20px;
	text-align: center;
}
#boxAboutFrame{
	padding: 10px;
	width: 610px;
	background: #FFFFFF;
	margin-top: 10px;
	font: 18px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #83AD2A;
}
#boxAbout{
	padding: 10px;
	margin-top: 40px;
	font: 12px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #333333;
}
.boxAbout img{
	float: left;
	margin: 5 5px 5px 0;
	padding: 5px;
	clear: both;
}

#landing #footer{
	text-align: center;
	padding-top: 15px;
	padding-bottom: 90px;
	}
/*h1 {
	font: 20px "Lucida Grande", Helvetica, Verdana, Arial;
	color: #000000;
	margin-bottom: 0px;
	margin-top: 5px;
}
p {
	font: 12px/110% "Lucida Grande", Helvetica, Verdana, Arial;
	margin-top: 5px;
}

*/


/* clearing
----------------------------------------------- */

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}