﻿/**********************************************************************************************

	CSS on Sails
	Title: Website
	Author: XHTMLized
	Date: March 2008 

***********************************************************************************************

		
	1. BASE
			1.1 Reset
			1.2 Default styles
			1.3 Basic styles
	
	2. LAYOUT
			2.1 Header
			2.2 Navigation
			2.3 Content
			2.4 Sidebar
			2.5 Footer
		

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	



/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	


	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	
	body {
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	:focus {
		outline: 0;
	}
	
	ins {
		text-decoration: none;
	}
	
	del {
		text-decoration: line-through;
	}
	
	table {
		border-collapse: collapse;
	}


/* 1.2	Default styles
-----------------------------------------------------------------------------------------------*/	

	body {
		background: #fff;
		font: 62.5% Verdana, Arial, sans-serif;
		}

	hr { 
		display: none;
	}
			
	strong {
		font-weight: bold;
	}
			
	em {
		font-style: italic;
	}
		
	abbr, acronym {
		border-bottom: 1px dotted #999; 
		cursor: help;
	}
	
	input, textarea, select {
		font: 1.2em Arial, Helvetica, sans-serif;
	}

	a {
		color: #0ca7e1;
		text-decoration: none;
	}
	
	a:hover, 
	a:active {
		color: #0ca7e1;
		text-decoration: underline;
	}
	

/* 1.3	Basic styles
-----------------------------------------------------------------------------------------------*/	

	.hide {
		display: none;
	}
	

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	
	.container {
		width: 1000px;
		position: relative;
		/*margin: 0 auto;*/
		text-align: left;
	}
	
	.left {
		width: 720px;
		padding-left: 20px;
		float: left;
	}
		
	.right {
		width: 223px;
		padding-right: 20px;
		float: right; 
	}
	
	.main{
		overflow: hidden;
		margin-left: 22px;
		margin-right: 22px;
	}
	
	.nosidebar #content{
		width: 960px;
		padding: 0 20px
	}
	
	.box{
		border: 1px solid #e0e0e0;
	}
	
		

/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	

	#header{
		background-color: #fff;
		background: url(img_header_bg.gif) repeat-x 50% bottom;
		overflow: hidden;
		padding-bottom: 0px;
		position: relative;
		width: 100%;
		height: 190px;
	}
	
	.top{
		overflow: hidden;
		padding-bottom: 11px;
	}

	#header h1, 
	#header h1 span,
	#header .logo a,
	#header .logo span {
		display: block;
		width: 348px;
		height: 56px;
		overflow: hidden;
		cursor: pointer;
		text-indent: -1000px;
	}
	#header h1 a, 
	#header .logo a{
		line-height: 2em;
		text-decoration: none;
		color: #21a0d3;
	}
	
	#header h1,
	#header .logo {
		position: absolute;
		top: 25px;
		left: 20px;
	}
		
	#header h1 span,
	#header .logo span {	
		position: absolute; 
		top: 0;
		left: 0;
		z-index: 10;
		background: url(img_logo.png) no-repeat;
	}
	
	#accessibility-links {
		position: absolute;
		left: -1000em;
		text-align: left;
	}
	
	#header .left p{
		position: absolute;
		width: 455px;
		line-height: 22px;
		top: 35px;
		left: 408px;
		font-size: 1.9em;
		font-style: italic;
		font-weight: bold;
	}
	
	#header .left p.logo{
		left: 20px;
		top: 25px; 
		font-size: 2.3em;
	}
	
	#header .right { 
		margin-top: 20px;
		background: url(../images/ver-line.gif) top left no-repeat; 
	}
	
	#header .right ul{
		background: url(../images/ver-line.gif) top right no-repeat; 
	}
	
	#header .right li{ 
		padding: 0 10px;
		line-height: 22px;
		color: #0ca7e1; 
		font-size: 1.5em; 
		font-weight: bold; 
		font-family: "Trebuchet MS", arial, verdana; 
	}
	
	#header .right li.rate{ 
		font-size:1.7em; }
		
	#header .right li.rate img{ 
		margin: 0 0 0 7px; }
	

/* 2.2	Navigation
-----------------------------------------------------------------------------------------------*/	

	#navigation{
		padding-top: 15px;
		padding-left: 35px;
		background: #000;
	}
	#navigation .container{
		overflow: hidden;
	}
	
	#navigation li{
		float: left;
		border-left: 1px solid #333;
		padding: 0 4px;
	}
	
	#navigation li.first{
		border: none;
		padding-left: 0;
	}
	
	#navigation .main-nav li a{
		display: block;
		/*width: 115px;*/
		font-size: 1.3em;
		line-height: 1em;
		color: #fff;
		font-weight: bold;
		text-decoration: none;
		padding: 10px 13px 5px;
	}
		#navigation .main-nav li a.active,
		#navigation .main-nav li a:hover{
			/*background: #333;*/
			background: url(/images/headerHighLight.gif) repeat-x top;
			height:16px;
		}
	
	.sub-nav{
		position: absolute;
		bottom: 0;
		left: 0;
		overflow: hidden;
		width: 100%;
	}
		.sub-nav ul{
			overflow: hidden;
			width: 960px;
		}
		.sub-nav li{
			float: left;
			border-left: 1px solid #5a5b5d;
			padding: 0 4px;
		}
		.sub-nav li.first{
			border: none;
			padding-left: 0;
		}
		.sub-nav a{
			font-size: 11px;
			color: #5a5b5d;
		}
	
	#header #navigation .right{
		margin-top: 0;
	}
	
	#header #navigation .right,
	#header #navigation .right ul{
		background: none;
	}
	
	#navigation .right ul{
		float: right;
		padding-top: 13px;
	}
	
	#header #navigation .right li{
		font-size: 1.1em;
		line-height: 18px;
	}
	
	#header #navigation .right li a{
		color: #fff;
		text-decoration: none;
	}
	#header #navigation .right li a:hover{color: #0ca7e1}

/* 2.3	Content
-----------------------------------------------------------------------------------------------*/	

	.home h1{
		font-size: 2.2em;
		line-height: 1em;
		padding-bottom: 10px;
	}
	.home h2,
	.generic h2{
		font-size: 2.1em;
		line-height: 1em;
		padding-bottom: 3px;
	}
	
	.home p{
		font-size: 1.2em;
		line-height: 15px;
	}
	
	.module{
		width: 100%;
		overflow: hidden;
		padding: 20px 0;
	}
		.module li{
			float: left;
			width: 216px;
			height: 217px;
			margin-left: 36px;
			background: #ebebeb;
			position: relative;
		}	
		.module li.first{
			margin: 0;
		}
		.module h2{
			font-size: 2.5em;
			line-height: 1em;
			color: #5a5b5d;
			text-align: center;
			padding: 10px 14px;
		}
		.module p{
			padding: 62px 18px 0;
			line-height: 1em;
		}
		
		.module a{
			position: absolute;
			left: 65px;
			bottom: 12px;
		}
		
		.module .idontknow{
			background: url(../images/bg_mod_idontknow.gif) no-repeat;
		}
		.module .iknow{
			background: url(../images/bg_mod_iknow.gif) no-repeat;
		}
		.module .imlooking{
			background: url(../images/bg_mod_imlooking.gif) no-repeat;
		}
		
		
	.connectiontype{
		width: 100%;
		overflow: hidden;
		padding-bottom: 20px;
		border-bottom: 1px solid #e0e0e0;
	}
		.connectiontype li{
			border: 1px solid #e0e0e0;
			padding: 7px;
			width: 150px;
			height: 66px;
			float: left;
			margin-left: 16px;
		}
		.connectiontype li.first{
			margin-left: 0;
		}
		.connectiontype li.second{
			margin-right: 8px;
		}
		.connectiontype h3{
			font-size: 15px;
		}
		.connectiontype p{
			font-size: 1.1em;
			line-height: 1em;
			padding-top: 3px;
		}
		.connectiontype p a{
			float: left;
			padding-top: 3px;
		}
		.connectiontype img{
			float: right;
		}
		
	
	.wrapper_speed{
		padding: 20px 0 30px;
		width: 100%;
		overflow: hidden;
	}
		.wrapper_speed .box{
			float: left;
			width: 332px;
			height: 102px;
			margin-left: 23px;
			padding: 7px;
		}
		.wrapper_speed .first{
			margin: 0;
		}
		.wrapper_speed h2{
			font-size: 21px;
		}
		.wrapper_speed p{
			font-size: 1.1em;
		}
		.wrapper_speed img{
			float: right;
		}


	/* generic page */
	
	.generic #content{
		padding-top: 15px;
	}
	.generic h1{
		font-size: 1.8em;
		line-height: 1em;
		font-weight: bold;
		padding-bottom: 15px;
	}
	.generic h2{
		font-size: 1.3em;
		line-height: 1em;
		font-weight: bold;
	}
	.generic p{
		font-size: 1.2em;
		line-height: 13px;
		padding-bottom: 15px;
	}
	
	.image_wrapper{
		width: 100%;
		overflow: hidden;
	}
	.image_left,
	.image_right{
		padding: 3px;
		border: 1px solid #e0e0e0;
	}
	.image_left{
		float: left;
	}
	.image_right{
		float: right;
	}
	.small{
		font-size: 11px;
	}
	
	/* selected plan */
	
	.two_column{
		width: 100%;
		overflow: hidden;

	}
		.col_left{
			float: left;
			/*width: 334px;*/
			padding-right: 25px;
		}
		.col_right{
			float: right;
			width: 337px;
		}
		.two_column .separator{border-right: 1px solid #e0e0e0;min-height:240px;}
		
	.product_info .col_left{float: left;}
		.product_info .col_left img{
			float: left;
			margin-right: 12px;
		}
		.product_info .col_left p{
			font-size: 14px;
			line-height: 1em;
			padding-top: 18px;
			padding-bottom: 0;
			font-weight: bold;
		}
		.large{
			font-size: 29px;
			line-height: 1em;
		}
		.medium_offer{font-size: 18px;}
		.price_offer{background: url(/images/pricebox.gif) no-repeat;color:White;text-align:center;width:119px;height:63px;padding-top:10px;line-height:0.6em;}
		.price_offer_s{background: url(/images/pricebox-small.gif) no-repeat;color:White;text-align:center;width:89px;height:53px;padding-top:10px;line-height:0.7em;font-size:24px;margin-left: auto;margin-right: auto;}
		.price_offer a{color:White;}
		.price_offer a:hover{text-decoration:none;}
		.product_info .col_right{
			padding-top: 5px;
		}
		.product_info .col_right p{
			float: left;
			font-size: 1.6em;
			line-height: 1em;
			padding-top:10px;
			font-size:20px;
		}
		.product_info .col_right a{
			float: right;
			padding-top:15px;
		}
	
	.inbox_offer{padding-left:25px;width:260px;padding-right:15px;}
	.inbox_offer2{padding-left:25px;width:400px;padding-right:15px;}
	.inbox_offer h2 {display:inline;font-size: 17px;}
	.inbox_desc {padding-right:45px;width:480px;}
	.inbox_more {padding-right:15px;width:380px;font-size:11px;line-height:1.5em;}
	.inbox_more2 {padding-right:45px;width:480px;font-size:11px;line-height:1.5em;}
	.product_list{
		padding-top: 10px;
		padding-bottom: 18px;
		border:solid 1px #e0e0e0;
		background: url(/images/offer-plan-detail-bkg.gif) repeat-x top;
	}
		.list_type{
			border: none;
			width:300px;
		}
			.list_type td{
				padding: 0;
				border: none;
				color: #5a5b5d;
				font-size: 1.2em;
				line-height: 15px;
			}
			.list_type td.col1{
				font-weight: bold;
				width: 280px;
			}
			
		.product_list .col_right h2{
			font-size: 20px;
			padding-bottom:10px;
			display:inline;
		}
		.product_list .col_right li{
			font-size: 1.2em;
			line-height: 15px;
			padding-left: 15px;
			background: url(/_ui/images/bullet_arrow.gif) 0 3px no-repeat;
		}
		.more_box{width:100%;text-align:right;padding-top:5px;}
	.product_action p{
		padding-bottom: 5px;
		font-size: 1.1em;
	}
		.product_action .col_right{
			text-align: right;
		}
	
	.bottom_line{
		border-bottom: 1px solid #e0e0e0;
		margin-bottom: 15px;
		padding-top:10px;
	}
	
	.plan_details{
		padding-right: 225px;
	}
		.plan_details h1{
			font-size: 21px;
			padding-bottom: 8px;
		}
		.selected_plan h2{
		    display:inline;
			padding-bottom:10px;
			font-size:20px;
		}
		.selected_plan h3{
			font-size: 13px;
		}
	
	
	/* search result */
	
	.nosidebar #content{
		padding-top: 15px;
	}
	.nosidebar h1{
		font-size: 18px;
		padding-bottom: 10px;
	}
	.nosidebar h2{
		font-size: 18px;
		padding-bottom: 10px;
	}
	
	.search_result_wrap{
		width: 100%;
		overflow: hidden;
	}
		.search_left{
			float: left;
			width: 472px;
			height: 192px;
			padding: 20px 25px 15px;
			background: url(../images/bg_search_left.gif) no-repeat;
			font-size:14px;
		}
		.search_right{
			float: right;
			width: 362px;
			height: 192px;
			padding: 20px 25px 15px;
			background: url(../images/bg_search_right.gif) no-repeat;
		}
		.search_top{
			width: 100%;
			height: 155px;
			padding: 20px 25px 15px;
			background: url(../images/bg_search_top.gif) no-repeat;
		}
		.search_result_wrap{
			padding-bottom: 25px;
			margin-bottom: 15px;
			border-bottom: 1px solid #c3c3c3;
		}
		.search_result_wrap h2{
			font-size: 15px;
			padding-bottom: 8px;
		}
		.search_result_wrap p{
			font-size: 12px;
		}
		.search_result_wrap img{
			border: none;
		}
		.search_result_wrap ul{
			padding: 10px 0 7px 0;
		}
		.search_result_wrap li{
			font-size: 1.2em;
			line-height: 18px;
			padding-left: 15px;
			background: url(../images/bullet_star.gif) no-repeat 0 3px;
		}
		.search_left p{
			padding-right: 120px;
		}
		.search_left .small{
			margin-left: 15px;
		}
		.search_right .wrapper{
			width: 100%;
			overflow: hidden;
			padding-bottom: 7px;
		}
		.search_right .wrapper img{
			float: left;
			margin-right: 12px;
		}
		.search_right .wrapper p{
			font-size: 1.4em;
			font-weight: bold;
			padding-top: 18px;
		}
		.search_right h3{
			font-size: 1.4em;
			line-height: 18px;
			padding-bottom: 5px;
		}
		.search_right p{
			font-size: 1.1em;
		}
		.search_right .signup{
			font-weight: bold;
		}
		.search_right .signup{
			padding-top: 10px;
			font-size: 1.6em;
		}
		.search_right .signup img{
			float: left;
			margin-right: 15px;
		}
		.search_right .signup strong{
			padding-left: 10px;
		}
		.search_right .signup span{
			float: left;
			padding-top: 15px;
		}
		
		.search_sort{
			padding-bottom: 3px;
		}
		.search_sort label{
			float: left;
			padding-top: 5px;
			padding-right: 20px;
			font-size: 1.2em;
			color: #5a5b5d;
		}
		.search_sort select{
			width: 141px;
			font-size: 12px;
			color: #5a5b5d;
		}
	
	.refine_search{
		border: 3px solid #e0e0e0;
		padding: 5px;
		margin: 15px 0;
	}
		.refine_search_header{
			width: 100%;
			overflow: hidden;
			background: #e0e0e0;
		}
		.refine_search_header h2{
			font-size: 15px;
			line-height: 1em;
			float: left;
			padding: 4px 20px;
		}
		.refine_search_header a{
			float: right;
			font-size: 11px;
			line-height:14px;
			padding-right: 20px;
			color: #000;
			margin: 4px 10px 0 0;
			background: url(../images/ico_close.gif) right 0 no-repeat;
		}
		
		.refine_search_content{
			color: #5a5b5d;
			width: 904px;
			overflow: hidden;
			padding: 10px 20px;
		}
			.refine_col1{
				float: left;
				width: 540px;
			}
				.refine_col1 .slider_wrapper{
					padding-bottom: 3px;
				}
				
			.refine_col2{
				float: left;
				width: 145px !important;
				padding-left: 35px;
			}
				.refine_col2 select{
					margin-bottom: 20px;
				}
				
			.refine_col3{
				float: left;
				width: 160px;
				padding-left: 20px;
			}
			
			.extra_header_slider h3{
				float: left;
				line-height: 20px;
				width: 100px;
			}
			.extra_header_slider fieldset{
				float: left;
				width: 320px;
				font-size: 11px;
				line-height: 18px;
			}
			.extra_header_slider fieldset p{
				float: left;
				padding-right: 10px;
			}
			.extra_header_slider fieldset label{
				float: left;
				width: 65px;
			}
			.extra_header_slider fieldset label input{
				float: right;
			}
			.extra_header_slider fieldset label.radio_last{
				width: 70px;
				padding-left: 5px;
			}
	
		.refine_col3 .options{
			width: 100%;
			padding-bottom: 10px;
		}
		.refine_col3 .options p{
			font-size: 12px;
		}
		.refine_col3 .options div{
			float: left;
			width: 82px;
		}
			.refine_col3 .options_hardware a{
				float: left;
				margin: 30px 0 0 5px;
			}
			.refine_col3 .options_bundle a{
				float: left;
				margin: 48px 0 0 5px;
			}
			
		
	/* module */
	
	.module_small{
		width: 100%;
		overflow: hidden;
		padding: 10px 0 15px;
	}
	.module_small li{
		float: left;
	}
	.module_small a{
		position: relative;
		display: block;
		height: 39px;
	}
	.module_small a span{
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}
	.module_small .idontknow a{width: 225px;}
	.module_small .idontknow a span{
		background: url(../images/bg_modsmall_idontknow.gif) no-repeat top;
	}
	.module_small .iknow{
		padding-left: 13px;
	}
	.module_small .iknow a{width: 215px;}
	.module_small .iknow a span{
		background: url(../images/bg_modsmall_iknow.gif) no-repeat top;
	}
	.module_small .imlooking{
		float: right;
	}
	.module_small .imlooking a{width: 255px;}
	.module_small .imlooking a span{
		background: url(../images/bg_modsmall_imlooking.gif) no-repeat top;
	}
	.module_small a.active span,
	.module_small a:hover span{
		background-position: bottom !important;
	}
	
	/* plan */
	.plan h1{
		font-size: 18px;
		padding-bottom: 10px;
	}
	.plan h2{
		font-size: 21px;
	}
	.plan p{
		font-size:12px;
		padding-bottom: 10px;
	}
	
	.details{
		width: 100%;
		overflow: hidden;
		color: #5a5b5d;
		padding-bottom: 20px;
		margin-bottom: 10px;
	}
		.plan_imlooking .details{
			border-bottom: 1px solid #67a9cb;
		}
		.plan_iknow .details{
			border-bottom: 1px solid #acc26d;
		}
		.plan_idontknow .details{
			border-bottom: 1px solid #e2772b;
		}
		.details_left{
			float: left;
			width: 540px;
		}
		.details_right{
			float: right;
			width: 160px;
		}
		
		.slider_wrapper{
			width: 100%;
			overflow: hidden;
		}
		.slider_wrapper h3{
			font-size: 12px;
		}
		.slider{
			position: relative;
			float: left;
			width: 471px;
			height: 44px;
			background: url(../images/bg_slider.gif) no-repeat;
		}
			.slider ul{
				width: 445px;
				padding-top: 5px;
				margin: 0 auto;
				overflow: hidden;
			}
				.slider li{
					float: left;
					width: 89px;
					font-size: 11px;
					text-align: center;
				}
				.slider li.point1{width: 40px;padding-left:15px;text-align:left;}
				.slider li.point2{width:123px;padding-right:16px;}
				.slider li.point3{width: 73px;padding-left:16px;}
				.slider li.point4{width: 73px;padding-left:89px;}
				.slider li.point5{text-align:right; }
				
				.slider li.download1{width: 40px;padding-left:15px;text-align:left;}
				.slider li.download2{width: 63px;padding-right:16px;}
				.slider li.download3{width: 73px;padding-left:5px;}
				.slider li.download4{width: 73px;padding-left:159px;}
				.slider li.download5{text-align:right; }
				
			.slider_bg{
				display: block;
				width: 445px;
				height: 6px;
				line-height: 6px;
				font-size: 6px;
				margin: 0 auto;
				border: 1px solid #a8a8a6;
				position: relative;
				margin-top: 8px;
			}
			#slider_progress{
				display: block;
				width: 44px;
				line-height: 6px;
				font-size: 6px;
				height: 6px;
			}
			.plan_imlooking #slider_progress{
				background: blue url(../images/bg_sliderprogress_blue.gif) repeat-x top;
			}
			.plan_iknow #slider_progress{
				background: green url(../images/bg_sliderprogress_green.gif) repeat-x top;
			}
			.plan_idontknow #slider_progress{
				background: red url(../images/bg_sliderprogress_red.gif) repeat-x top;
			}
			
			#slider_box{
				position: absolute;
				width: 13px;
				height: 12px;
				top: -3px;
				left: 44px;
				background: #000 url(../images/bullet_slider.gif) no-repeat;
			}
			
		.slider_wrapper .info{
			float: right;
			text-align: center;
			width: 64px;
			height: 40px;
			padding-top: 4px;
			background: url(../images/bg_sliderinfo.gif) no-repeat;
			font-size: 11px;
		}
		.slider_wrapper .info strong{
			font-size: 15px;
			line-height: 23px;
			display: block;
		}
		
		
		.slider_wrapper .single_line{
			background: url(../images/bg_sliderinfo_single.gif) no-repeat;
		}
		.slider_wrapper .single_line strong{
			line-height: 35px;
		}
	
		
		.slidersmall_wrapper{
			float: right;
			width: 378px;
			overflow: hidden;
			background: url(../images/bg_slider_small.gif) no-repeat;
		}
			.slidersmall_wrapper .slider_bg{
				float: left;
				margin: 9px 10px 0;
				width: 283px;
			}
			.slidersmall_wrapper .info{
				float: right;
				text-align: center;
				width: 66px;
				padding-top: 5px;
			}
			.slidersmall_wrapper .info strong{
				font-size: 15px;
			}
			
	
	
		.selects{
			float: left;
			width: 455px;
		}
		.selects label{
			float: left;
			width: 141px;
			padding: 0 10px 10px 0;
			font-size: 12px;
			color: #5a5b5d;
		}
		.selects select{
			width: 141px;
			font-size: 12px;
			color: #5a5b5d;
		}
		.options{
			float: right;
			width: 82px;
		}
		.options p{
			padding-bottom: 2px;
		}
		.options div{
			border: 1px solid #cdcdcd;
		}
		.options div label{
			display: block;
			font-size: 11px;
			width: 60px;
			padding: 0 5px;
			overflow: hidden;
		}
		.options div label span{
			float: left;
			line-height: 18px;
		}
		.options div label input{
			float: right;
		}
		.options a{
			font-size: 11px;
		}
	
	.details_right{
		padding-top: 15px;
	}
	.details_right .notebox{
		width: 146px;
		height: 123px;
		padding: 5px;
		background: url(../images/bg_notebox.gif) no-repeat;
	}
	.details_right .notebox p{
		font-size: 11px;
		line-height: 12px;
		padding-bottom:5px;
		margin-bottom: 5px;
		border-bottom: 1px solid #c3c3c3;
	}
	.details_right a.button{
		margin-top: 30px;
		float: right;
	}
	
	.idontknow_wrapper{
		width: 100%;
		overflow: hidden;
	}
		.idontknow_left{
			float: left;
			width: 450px;
		}
		.idontknow_right{
			float: right;
			width: 255px;
		}
	
	.monthlyusage h3{
		font-size: 13px;
		line-height: 20px;
		color: #5a5b5d;
	}
		.monthlyusage p{
			width: 244px;
			height: 40px;
			background: url(../images/bg_monthlyusage.gif) no-repeat;
		}
		.monthlyusage p strong{
			float: left;
			width: 124px;
			text-align: center;
			font-size: 21px;
			line-height: 40px;
			color: #e2772b;
		}
		.monthlyusage p span{
			float: left;
			width: 120px;
			text-align: center;
			font-size: 13px;
			line-height: 40px;
			font-weight: bold;
			color: #5a5b5d;
		}
	
	.hour_options{
		width: 100%;
		overflow: hidden;
		line-height: 18px;
	}
		.hour_options label{
			float: left;
			border-right: 2px solid #e2772b;
			padding-right: 10px;
			margin-right: 10px;
		}
		.hour_options label span{
			float: left;
			font-size: 12px;
		}
		.hour_options label input{
			float:left;
			margin: 5px 0 0 5px;
		}
		* html .hour_options label input{
			margin-top: 2px;
		}
		*:first-child+html label input{
			margin-top: 2px;
		}
		.hour_options span{
			line-height: 22px;
			font-size: 11px;
		}
	
	
	.lists_with_slider{
		padding: 10px 0;
	}
		.lists_with_slider li{
			width: 100%;
			overflow: hidden;
		}
		.lists_with_slider li span.question{
			float: left;
			font-size: 12px;
			line-height: 26px;
		}
	
	.selectsbutton .selects{
		width: 455px;
	}
	.selectsbutton .idontknow_right{
		padding-top: 5px;
		text-align: right;
	}
	
	.strong{
		color: #000;
	}
	.plan_idontknow p.strong{
		padding-top: 10px;
	}
		

/* 2.4	Sidebar
-----------------------------------------------------------------------------------------------*/	

	#sidebar .box{
		margin-bottom: 10px;
		/*background: #f9f9f9;*/
		background:transparent url(/images/offer-plan-detail-bkg.gif) repeat-x scroll center top;
		padding: 20px 9px 12px 10px;
	}
		#sidebar .box img{
			float: right;
		}
		
	#sidebar .box a.btn_go img{
		float: none;
	}
		
	#sidebar h2{
		font-size: 1.8em;
		line-height: 1em;
		padding-bottom: 7px;
	}
	#sidebar a{
		font-weight: bold;
		font-size: 1.2em;
	}
	#sidebar p{
		padding-bottom: 5px;
	}
	
	.postcode{
		padding: 5px 0;
	}
		.postcode label{
			font-size: 1.2em;
			font-weight: bold;
			display: block;
		}
		.postcode input{
			float: left;
			margin-right: 6px;
			padding-top:4px;
		}
		#postcode{
			width: 120px;
			margin-top: 2px;
			background: #fff;
			border: 1px solid #e0e0e0;
		}
	
	.connectiontype_small{
		width: 100%;
		overflow: hidden;
		padding-bottom: 11px;
	}
		.connectiontype_small li{
			float: left;
			width: 97px;
			height: 46px;
			border: 1px solid #e0e0e0;
			padding: 7px 0 7px 7px;
			margin: 0 0 11px 11px;
		}
		.connectiontype_small li.adsl,
		.connectiontype_small li.cable{
			margin-left: 0;
		}
		.connectiontype_small h3{
			float: left;
			font-size: 13px;
			width: 55px;
		}
		#sidebar .connectiontype_small li a{
			font-weight: normal;
			font-size: 11px;
		}
		.connectiontype_small li.connectiontype_small_bottom{
			margin-bottom: 0;
		}
	
	

/* 2.5	Footer
-----------------------------------------------------------------------------------------------*/	
    #above_footer{background: url(footer_city.jpg) repeat-x bottom; height:153px;}
    
	#footer{
		/*border-top: 12px solid #3c3934;*/
		padding-top: 20px;
		background: url(footer_content.gif) repeat-x top;
	}
	
	#footer h3{
		font-size: 12px;
		font-weight: bold;
		padding-bottom: 10px;
	}

	#footer .vitem{
		width: 100%;
		overflow: hidden;
		padding-bottom: 10px;
	}
	
	
	#footer .vitem li{
		float: left;
		width: 142px;
	}
	
	#footer .vitem li ul li{
		float: none;
		width: auto;
	}
	
	#footer .vitem li ul li a{
		color: #989898;
		text-decoration: none;
		font-size: 11px;
		line-height: 13px;
	}
	#footer .vitem li ul li a:hover{
		text-decoration: underline;
	}
	
	.copyright{
		width: 100%;
		overflow: hidden;
		clear: both;
		border-top: 1px solid #3b3a38;
		padding: 25px 0 50px;
		width:1000px;
		margin:0 auto;
	}
	
	.copyright p{
		font-size: 12px;
		color: #989898;
		text-align: center;
	}
	.copyright p a{
		color: #989898;
		text-decoration: none;
	}

	#footer a:hover{
		text-decoration: underline;
	}
	.tdBar {height:21px;width:124px;background: url(/images/bar-grey-bgk.gif);}
	.tdBar1{height:21px;width:124px;background: url(/images/bar-grey-bgk.gif);}
	.txtBar {position:absolute;margin-left:5px;margin-top:1px;color:#34312e;}
	.txtBar1{position:absolute;margin-left:5px;margin-top:1px;color:#34312e;}
    .oBar {background:url(/images/progressIndic.gif) repeat-x;margin-left:3px;padding-left:3px;color:White;margin-top:1px;}
    .oBar1{background:url(/images/progressIndic.gif) repeat-x;margin-left:3px;padding-left:3px;color:White;margin-top:1px;}
    .extPanel{height:0;overflow:hidden;}
    .openMore{text-align:right;}
    .openMore a {cursor:pointer;}
    .content1 {padding:10px 10px 3px 10px;width:700px;}
    .noback{background-image:none;margin-bottom:20px;}
    .paging{width:100%}
    .paging table {border:none;}
    .paging td {border:none;}
    .paging .square {font-size:16px;font-weight:bold;color:white;background:url(/images/pagingSquare.gif) no-repeat;padding:3px 10px 4px;display:inline}
    .paging .squareTwoDigit {font-size:16px;font-weight:bold;color:white;background:url(/images/pagingSquare.gif) no-repeat;padding:3px 4px 4px 6px;display:inline}
    .articles-sidebar {border-top:solid 1px #e0e0e0;padding-top:5px;}
    
    
    
   /* LIGHTBOX */
   /**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}



/*******************************/
/********* bubbletip ***********/
/*******************************/
.bubbletip
{
	position: absolute;
	z-index: 50;
	border-collapse: collapse;
}
.bubbletip td.bt-topleft
{
	background: transparent url(BubbleTip/bubbletip.png) no-repeat scroll 0px 0px;
	height: 33px;
	width: 33px;
}
.bubbletip td.bt-top
{
	background: transparent url(BubbleTip/bubbletip-T-B.png) repeat-x scroll 0px 0px;
	height: 33px;
}
.bubbletip td.bt-topright
{
	background: transparent url(BubbleTip/bubbletip.png) no-repeat scroll -73px 0px;
	height: 33px;
	width: 33px;
}
.bubbletip td.bt-left-tail div.bt-left, .bubbletip td.bt-left
{
	background: transparent url(BubbleTip/bubbletip-L-R.png) repeat-y scroll 0px 0px;
	width: 33px;
}
.bubbletip td.bt-left-tail div.bt-left-tail
{
	background: transparent url(BubbleTip/bubbletip.png) no-repeat scroll 0px -33px;
	width: 33px;
	height: 40px;
}
.bubbletip td.bt-right-tail div.bt-right, .bubbletip td.bt-right
{
	background: transparent url(BubbleTip/bubbletip-L-R.png) repeat-y scroll -33px 0px;
	width: 33px;
}
.bubbletip td.bt-right-tail div.bt-right-tail
{
	background: transparent url(BubbleTip/bubbletip.png) no-repeat scroll -73px -33px;
	width: 33px;
	height: 40px;
}
.bubbletip td.bt-bottomleft
{
	background: transparent url(BubbleTip/bubbletip.png) no-repeat scroll 0px -73px;
	height: 33px;
	width: 33px;
}
.bubbletip td.bt-bottom
{
	background: transparent url(BubbleTip/bubbletip-T-B.png) repeat-x scroll 0px -33px;
	height: 33px;
}
.bubbletip td.bt-bottomright
{
	background: transparent url(BubbleTip/bubbletip.png) no-repeat scroll -73px -73px;
	height: 33px;
	width: 33px;
}
.bubbletip table.bt-top, .bubbletip table.bt-bottom
{
	width: 100%;
}
.bubbletip table.bt-top th
{
	width: 50%;
	background: transparent url(BubbleTip/bubbletip-T-B.png) repeat-x scroll 0px 0px;
}
.bubbletip table.bt-bottom th
{
	width: 50%;
	background: transparent url(BubbleTip/bubbletip-T-B.png) repeat-x scroll 0px -33px;
}
.bubbletip table.bt-top td div
{
	background: transparent url(BubbleTip/bubbletip.png) no-repeat scroll -33px 0px;
	width: 40px;
	height: 33px;
}
.bubbletip table.bt-bottom td div
{
	background: transparent url(BubbleTip/bubbletip.png) no-repeat scroll -33px -73px;
	width: 40px;
	height: 33px;
}
.bubbletip td.bt-content
{
	background-color: #fff;
}
/*******************************/


    .table { display: table; } 
    .row  { display: table-row; }
    .LT, .MT, .MB, .RT, .L, .M, .R, .RT, .LB, .RB { display: table-cell; }
    .LT, .RT, .LB, .RB { }
    .L, .R, .MT, .MB { }
    .M { }