/*--------------------------------------------------

	Client: SpecialK
	
	This stylesheet is used to style the jQuery
    UI Elemetns only!
	
	REMEMBER TO KEEP IT CLEAN, EASY TO READ,
	AND IN THE DOCUMENT FLOW!
	
	Thanks!

--------------------------------------------------*/

/*----- Modals -----*/

div.ui-widget-overlay {
    background: #FFF;
    filter: alpha(opacity = 75);
    left: 0;
    opacity: 0.75;
    position: absolute;
    top: 0;
}

div.modal-popup {
    background: url(/Content/img/jquery/modals/standard-modal-background.png) no-repeat;
    height: 346px !important;
    padding: 20px 30px;
    width: 246px !important;
}

div.contact-modal-popup {
    background: url(/Content/img/jquery/modals/contact-modal-background.png) no-repeat;
    height: 414px !important;
    padding: 25px 50px;
    width: 551px !important;
}

div.product-recipe-modal-popup { width: 813px !important; }

/* - Select Challenge Date - */

div#select-challenge-date { display: none; }

div#select-challenge-date span.hr {
    background: url(/Content/img/jquery/modals/blue-border.gif) no-repeat center top;
    display: block;
    height: 1px;
    margin: 25px 0;
}

p.back-link a {
    color: #69C;
    text-decoration: underline;
}

p#goal-for-special-k-challenge {
    background: url(/Content/img/jquery/modals/goal-for-special-k-challenge.gif) no-repeat;
    height: 53px;
    margin: 0 auto 15px;
    text-indent: -10000px;
    width: 206px;
}

div.goal-drop-down {
    margin: 0 0 20px;
    text-align: center;
}

div.goal-drop-down select {
    text-align: center;
    width: 240px;
}

p#when-like-to-begin {
    background: url(/Content/img/jquery/modals/when-like-to-begin.gif) no-repeat;
    height: 10px;
    text-indent: -10000px;
    width: 257px;
}

div.date-drop-downs { text-align: center; }

button.modal-go-btn {
    background: url(/Content/img/jquery/modals/modal-go-button.gif) no-repeat;
    border: none;
    height: 29px;
    *margin: -20px 0 0 -80px;
    *position: absolute;
    text-indent: -10000px;
    width: 155px;
}

button.modal-go-btn:hover {
    background: url(/Content/img/jquery/modals/modal-go-button.gif) no-repeat 0 -29px;
    cursor: pointer;
}





/* - Product / Recipe Modal - */

div#product-recipe-modal {
    display: none;
    float: left;
    width: 813px;
}

div#product-recipe-modal div.content {
    background: url(/Content/img/jquery/modals/product-recipe-modal-background-top.png) no-repeat;
    overflow: hidden;
    padding: 16px 16px 0;
    position: relative;
    width: 781px;
}

div#product-recipe-modal div.content a.close-product-modal {
    background: url(/Content/img/jquery/modals/product-recipe-modal-close-btn.gif) no-repeat;
    position: absolute;
    height: 13px;
    right: 20px;
    top: 20px;
    width: 13px;
}

div#product-recipe-modal div.content a.close-product-modal:hover { background: url(/Content/img/jquery/modals/product-recipe-modal-close-btn.gif) no-repeat 0 -13px; }

div#product-recipe-modal div.grid, div#product-recipe-modal div.left, div#product-recipe-modal div.right {
    display: inline;
    float: left;
}

div#product-recipe-modal div.grid img { display: block; }

div#product-recipe-modal div.grid h1 {
    color: #F00;
    font-family: "Georgia", "Times", Serif;
}

div#product-recipe-modal div.left { width: 432px; }

div#product-recipe-modal div.right {
    margin: 0 0 0 22px;
    padding: 50px 0 0;
    width: 310px;
}

div#product-recipe-modal div.bottom {
    background: url(/Content/img/jquery/modals/product-recipe-modal-background.png) no-repeat;
    height: 16px;
    overflow: hidden;
}

/* - Calendar Type Modal - */

div.modal-popup div.ui-dialog-titlebar {
    height: 13px;
    overflow: hidden;
    position: relative;
    width: 255px;
}

div.modal-popup div.ui-dialog-titlebar a {
    background: url(/Content/img/jquery/modals/modal-close-btn.gif) no-repeat;
    display: block;
    height: 13px;
    position: absolute;
    right: 0;
    top: 0;
    width: 13px;
}

div.modal-popup div.ui-dialog-titlebar a:hover { background: url(/Content/img/jquery/modals/modal-close-btn.gif) no-repeat 0 -13px; }
div.modal-popup div.ui-dialog-titlebar a span { display: none; }

div#welcome-plan-modal {
    display: none;
    padding: 10px 0 0;
}

div#welcome-plan-modal p.title, div#welcome-plan-modal p.description {
    line-height: 0;
    margin: 0 auto;
    text-indent: -10000px;
}

div#welcome-plan-modal p.title { margin: 0 auto 20px; }

div#welcome-plan-modal p.description {
    background: url(/Content/img/jquery/modals/dyp-description-welcome.gif) no-repeat;
    height: 113px;
    width: 193px;
}

div#welcome-plan-modal p.disclosure {
	height: 7px;
	margin: 0 auto;
	text-indent: -10000px;
	width: 206px;
}

div.classic-plan span.hr {
    background: url(/Content/img/jquery/modals/red-border.gif) no-repeat center top;
    display: block;
    height: 1px;
    margin: 20px 0;
}

div.classic-plan span.hr hr { display:none; }

div.classic-plan p.title {
    background: url(/Content/img/jquery/modals/dyp-classic-welcome.gif) no-repeat;
    height: 34px;
    width: 187px;
}

div.classic-plan p.disclosure { background: url(/Content/img/jquery/modals/classic-more-info.gif) no-repeat; }

div.mix-it-up-plan span.hr {
    background: url(/Content/img/jquery/modals/purple-border.gif) no-repeat center top;
    display: block;
    height: 1px;
    margin: 20px 0;
}

div.mix-it-up-plan span.hr hr { display:none; }

div.mix-it-up-plan p.title {
    background: url(/Content/img/jquery/modals/dyp-mix-up-welcome.gif) no-repeat;
    height: 34px;
    width: 187px;
}

div.mix-it-up-plan p.disclosure { background: url(/Content/img/jquery/modals/mix-it-up-more-info.gif) no-repeat; }

div.on-the-go-plan span.hr {
    background: url(/Content/img/jquery/modals/green-border.gif) no-repeat center top;
    display: block;
    height: 1px;
    margin: 20px 0;
}

div.on-the-go-plan span.hr hr { display:none; }

div.on-the-go-plan p.title {
    background: url(/Content/img/jquery/modals/dyp-on-the-go-welcome.gif) no-repeat;
    height: 34px;
    width: 187px;
}

div.on-the-go-plan p.disclosure { background: url(/Content/img/jquery/modals/on-the-go-more-info.gif) no-repeat; }

div.chocolate-love-plan span.hr {
    background: url(/Content/img/jquery/modals/brown-border.gif) no-repeat center top;
    display: block;
    height: 1px;
    margin: 20px 0;
}

div.chocolate-love-plan span.hr hr { display:none; }

div.chocolate-love-plan p.title {
    background: url(/Content/img/jquery/modals/dyp-choc-lover-welcome.gif) no-repeat;
    height: 34px;
    width: 250px;
}

div.chocolate-love-plan p.disclosure { background: url(/Content/img/jquery/modals/choc-lover-more-info.gif) no-repeat; }

/* - Save Plan Reminder Modal - */

div#save-reminder-modal { display: none; }

div#save-reminder-modal span.hr {
    background: url(/Content/img/jquery/modals/blue-border.gif) no-repeat center top;
    display: block;
    height: 1px;
    margin: 20px 0;
}

div#save-reminder-modal span.hr hr { display:none; }

p#save-reminder-header {
	background: url(/Content/img/jquery/modals/save-plan-header.gif) no-repeat;
	height: 35px;
	margin: 0 auto 20px;
	text-indent: -10000px;
	width: 202px;
}

p#save-reminder-copy {
	background: url(/Content/img/jquery/modals/save-plan-copy.gif) no-repeat;
	height: 34px;
	margin: 0 auto 20px;
	text-indent: -10000px;
	width: 214px;
}

button#save-reminder-button {
	background: url(/Content/img/jquery/modals/save-plan-reminder-button.gif) no-repeat;
	border: none;
	display: block;
	height: 31px;
	text-indent: -10000px;
	width: 200px;
}

button#save-reminder-button:hover {
	background: url(/Content/img/jquery/modals/save-plan-reminder-button.gif) no-repeat 0 -31px;
	cursor: pointer;
}

div#save-reminder-modal a {
	color: #333;
	text-decoration: underline;
}

div#save-reminder-modal a:hover { color: #F03; }

/*----- Date Picker / Calendar -----*/

div.ui-datepicker {
    width: 182px;
    z-index: 10002;
}

iframe.ui-datepicker-cover { display: none; }

div.ui-datepicker-header {
    background: url(../i/design-your-plan/calendar-header.gif) no-repeat;
    border-bottom: 2px solid #FFF;
    height: 33px;
    position: relative;
    width: 182px;
}

a.ui-datepicker-prev, a.ui-datepicker-next {
    height: 33px;
    position: absolute;
    width: 21px;
}

a.ui-datepicker-prev { left: 0px; }
a.ui-datepicker-next { right: 0px; }

a.ui-datepicker-prev span, a.ui-datepicker-next span {
    display: block;
    height: 33px;
    text-indent: -10000px;
    width: 21px;
}

a.ui-datepicker-prev span { background: url(../i/design-your-plan/calendar-left-arrow.gif) no-repeat; }
a.ui-datepicker-next span { background: url(../i/design-your-plan/calendar-right-arrow.gif) no-repeat; }
a.ui-datepicker-prev:hover span { background: url(../i/design-your-plan/calendar-left-arrow.gif) no-repeat 0 -33px; }
a.ui-datepicker-next:hover span { background: url(../i/design-your-plan/calendar-right-arrow.gif) no-repeat 0 -33px; }

div.ui-datepicker-title {
    color: #FFF;
    margin: 0 31px;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
}

table.ui-datepicker-calendar {
    border-bottom: 1px solid #7BA0C0;
    border-right: 1px solid #7BA0C0;
    width: 182px;
}

table.ui-datepicker-calendar tr th {
    background: url(../i/design-your-plan/calendar-table-header.gif) repeat-x;
    color: #FFF;
    padding: 2px 0;
}

table.ui-datepicker-calendar tr td {
    background: url(../i/design-your-plan/calendar-cell-background.gif) no-repeat;
    border: none;
    color: #7BA0C0;
    padding: 6px 0 5px;
    text-align: center;
}

table.ui-datepicker-calendar tr td a {
    color: #000;
    display: block;
    font-weight: bold;
}

table.ui-datepicker-calendar tr td a:hover { color: #F03; }