/*
	Plan Widget Rules. Shared across NBN and Fibre.
	Broadband plans have their own rules.
*/


#plan-widget {
	border:1px solid #c0c8d1;
	margin-top:15px;
	margin-bottom:20px;
	padding:0 30px;
	-moz-border-radius: 4px;
	     border-radius: 4px;
}


/* section header */
.widget-header {
	color:#606a74;
	font-size:18px;
}

/* ul for plan, speed etc... */
.widget-option {
	list-style:none;
	margin:15px 0 20px;
	padding:0;
	line-height:0;
/*	height:74px;*/
}

.widget-option li {
	margin:0 !important;
	padding:18px 0 0 0 !important;
	float:left;
	display:block;
	line-height:0;
	cursor:pointer;
	color:#606a74;
	font-weight:bold;
	list-style-type:none;
	text-align:center;
	border:1px solid #b1b8be;
	border-right:none;
	background:url(/img/plan-widget/option-bgd.png) repeat-x;
	font-size:16px;
	height:54px;
}

.widget-option li:hover {
	color:#7a838c;
}

.widget-option em {
	font-style:normal;
	display:block;
	margin-top:5px;
}

/* set widths for options. these can be overwrote if needed */
#widget-option-plan li {
	width:33%;
}

#widget-option-speed li {
	width:24.7%;
}

/* active option label */
.widget-option .active {
	color:#fff;
	cursor:default;
	background:url(/img/plan-widget/option-active-bgd.png) repeat-x;
}

.widget-option .active:hover {
	color:#fff;
}

/* add corners to start and end of list items */
.first-option {
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.last-option {
	border-right:1px solid #b1b8be !important;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

/* widget controls (total cost, call us etc...) */
#widget-controls {
	position:relative;
/*	min-height:50px;*/
}

#widget-cost {
	font-size:22px;
	font-weight:bold;
}

#widget-cost sup {
	/*vertical-align: text-top;*/
	line-height:0;
	font-size:18px;
}

/* actual dollar value of plan */
#widget-plan-cost {
	font-size:24px;
	padding:0 2px;
}

/* sign up call to action */
#widget-cta h3{
	float: right;
	color:#D52B1E;
	margin: 0;
}

/* fine print, terms and conditions, total cost etc... */
#widget-fine-print {
	color: #878787;
    font-size: 12px;
    margin-top:20px;
}

/* fix floats */
.cf:before, .cf:after {
	content:"";
	display:table;
}

.cf:after {
	clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }