@charset "UTF-8";
/* •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
   ••  MobileTail CSS 			                                    ••
   •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••   
   
    1. CSS Reset
	2. Main Design
	   2.1 Basics
	   2.2 Header
	   2.3 Navigation
	      2.3.1 Menu
	      2.3.2 Tabs
	   2.4 Rounded boxes
	   2.5 Hover box
	   2.6 Modem and operator box
	   2.7 Latest blog post
	   2.8 Footer
	3. Mobile Broadband
	   3.1 Search Options
	   3.2 Important terms
	4. Product List
	   4.1 Header
	   4.2 Body
	5. Detailed view
	   5.1 General
	   5.2 Modem and operator main view
	   5.3 Operator main view
	   5.4 Modem main view
	   5.5 Operator details
	      5.5.1 For the boxes to work
	   5.6 Modem details
	   5.7 Laptop index
	6. Info
	7. Welcome
	8. Blog
	   8.1 Main
	   8.2 Newsletter
	   8.3 Blog post
	      8.3.1 Header
	      8.3.2 Body
	      8.3.3 Footer
	      8.3.4 Comments
	      8.3.5 Error messages
	   8.4 Follow button
	
---------------------------------------------------------------------- */

/* 1. CSS 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,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 2. Main Design
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/*	2.1 Basics
---------------------------------------------------------------------- */
html {
	background-color:	#f3f4fb;
}

body {
	background:			#f9faff url("/images/mobile-broadband/background-tile.png") repeat-x scroll left top;
	font-family:		"Helvetica Neue", Helvetica, "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size:			small;
}

body p, body li, body td, body th {
	line-height:	1.6em;
}

h1, h2, h3 {
	line-height: 		1.2em;
}

h1 {
	font-size:			190%;
}

h2 {
	font-size:			150%;
}

h3 {
	font-size:			120%;
}

a, a:visited {
	text-decoration:	none;
	color:				black;
}

a:hover {
	text-decoration: 	underline;
}

.content {
	padding-top:		10px;
	width:				960px;
	margin-left:		auto;
	margin-right:		auto;
	clear:				both;
	position:			relative;
}

/*	2.2 Header
---------------------------------------------------------------------- */
#header {
	width: 				960px;
	height:				100px;
	margin: 			0px auto;
	position:			relative; /* So that all other divs with absolute position refers to this element */
}

#logotype {
	padding-top:		15px;
	height:				85px;
}

#logotype a {
	text-decoration:	none;
	float:				left;
}

#logotype a {
	line-height:		0px;
}

#partners p {
	color:								#54595F;
	padding-left:						3px;
	font-size:							80%;
}

#partners p a {
	color:								#54595F;
}

#partners {
	float:								right;
	padding-top:						15px;
}

#partners img {
		margin-top:						5px;
}
/*	2.3 Navigation
---------------------------------------------------------------------- */
#tabs, #menu {
	margin: 						0px auto 0px auto;
	padding-top:					15px;
	clear:							left;
}

#tabs a:hover, #menu a:hover {
	text-decoration:				none;
}

/*	2.3.1 Menu
---------------------------------------------------------------------- */
#menu li {
	float:							left;
	margin-right:					10px;
	text-align:						center;
}

#menu li a:hover span.left_image {
	background:						transparent url(/images/shared/menu_selector_left.png) no-repeat scroll left top;	
}

#menu li a:hover span.right_image {
	background:						transparent url(/images/shared/menu_selector_right.png) no-repeat scroll left top;	
}

#menu li a:hover span {
	color:							black;
}

#menu li span.left_image {
	float:							left;
	height:							16px;
	padding: 						1px 0px 5px 10px;
}

#menu li.selected span.left_image {
	background:transparent url(/images/shared/menu_selector_left.png) no-repeat scroll left top;		
}

#menu li span.right_image {
	float:							left;
	height:							22px;
	width:							10px;
}

#menu li.selected span.right_image {
	background:transparent url(/images/shared/menu_selector_right.png) no-repeat scroll right top;
}

#menu li a, #menu li a:visited {
	color:							white;
}

#menu li.selected a, #menu li.selected a:visited {
	color:							black;
}

#menu {
	clear:							both;
	height:							22px;
	padding-top:					5px;
	padding-bottom:					7px;
	width:							960px;
}

/*	2.3.2 Tabs
---------------------------------------------------------------------- */
#tabs {
	width:							960px;
}

#tabs li {
	font-size:						125%;
	float:							left;
	height:							18px;
	margin-right:					4px;
	padding:						10px;
}

#tabs li a:hover {
	text-decoration:				none;
}

#tabs #welcome_tab {
	background:						url("/images/shared/welcome-tab.png") no-repeat top left;
	width:							26px;
	background-position:			0px 0px;
}

#tabs #welcome_tab.selected {
	height:							23px;
	margin-top:						-3px;
	background-position:			-92px 0px;
}

#tabs #welcome_tab.hover {
	background-position:			-46px 0px;
	cursor:							pointer;
}

  #tabs #mobile_broadband_tab {
	width:							130px;
	padding:						11px 10px 9px 10px;
	background:						url("/images/shared/mbb-tab.png") no-repeat top left;
	text-align:						center;
}

#tabs #mobile_broadband_tab.hover {
	background-position:			-150px 0px;
	cursor:							pointer;
}

#tabs #mobile_broadband_tab.selected {
	background-position:			-300px 0px;
	border-bottom:					1px solid #375cbc;
	height:							23px;
	margin-top:						-3px;
}

#info_tab.selected {
	background-color:				#00B625;
	border:							1px solid #00831B;	
	border-bottom:					1px solid #00B625;
}

#info_tab {
	border:							1px solid #77a274;
	border-bottom:					0px;
	background-color:				#99d095;
}

#tabs li a, #tabs li a:visited {
	color:							white;
}

#tabs li {
	color:							white;
}

#tabs ul .selected a, #tabs ul .selected a:visited {
	color:							white;
}

#tabs ul li {
	display:						inline;
}

/*	2.4 Rounded boxes
---------------------------------------------------------------------- */
div.box_top {
	height:							10px;
}

div.box_top_left {
	background:						url("/images/shared/rounded-box/rounded-box-top-left.png") no-repeat top left;
	height:							10px;
	float:							left;
}

div.box_top_right {
	background:						url("/images/shared/rounded-box/rounded-box-top-right.png") no-repeat top left;
	height:							10px;
	width:							10px;
	float:							right;
}

div.box_content {
	border-left:					1px solid #b6b6b6;
	border-right: 					1px solid #b6b6b6;
	background-color:				white;
	padding: 						0px 10px;
}

div.box_bottom_left {
	background:						url("/images/shared/rounded-box/rounded-box-bottom-left.png") no-repeat top left;
	height:							18px;
	float:							left;
}

div.box_bottom_right {
	background:						url("/images/shared/rounded-box/rounded-box-bottom-right.png") no-repeat top left;
	height:							18px;
	width:							10px;	
	float:							right;
}

/* Main shortcuts & important terms design to avoid collision with footer */
#shortcuts, #important_terms {
	margin-bottom:				40px;
}

/*	2.5 Hover box
---------------------------------------------------------------------- */
.hover_box {
       position:						relative;
       float:							left;
       width:							280px;
       height:							170px;
       background:						url("/images/mobile-broadband/main-details-box.png");
       margin-right:					10px;
	   margin-bottom:					30px;
       padding:							15px;
}

.hover_box a:hover {
	text-decoration:				none;
}

.hover_box.hover {
       text-decoration:				none;
       background-position:			0px -200px;
       cursor:						pointer;
}

/*	2.6 Modem and operator box
---------------------------------------------------------------------- */
#mobile_operators li, #usb_modems li  {
	float:							left;
}

#mobile_operators li, #usb_modems li {
	width:							313px;
	font-size:						92%;
}

#mobile_operators li {
	padding-top:					12px;
	height:							48px;
}

#usb_modems li.hover, #mobile_operators li.hover {
	background-color:				#e6e8ee;
	cursor:							pointer;
}

#usb_modems li a:hover, #mobile_operators li a:hover {
	text-decoration:				none;
}

#mobile_operators h2, #usb_modems h2 {
	margin-bottom:					15px;
}

#mobile_operators li span.text {
	padding-top:					8px;
	padding-left:					15px;
	float:							left;
}

#usb_modems li span.text {
	padding-top:					20px;
	padding-left:					15px;
	float:							left;
}

#usb_modems div.box_bottom_left {
	margin-bottom:					25px;
}

#mobile_operators li span.icon, #usb_modems li span.icon {
	float:							left;
}

#mobile_operators li span.icon {
	width:							120px;
	text-align:						center;
}

/* Take the total width minus the right top corner's width */
#mobile_operators div.box_top_left, #mobile_operators div.box_bottom_left {
	width:							325px;
}

#mobile_operators {
	width:							335px;
	clear:							both;
}

/* So that we can float other objects within */
#mobile_operators .box_content, #usb_modems .box_content {
	float:							left;
	width:							313px;
}

/* Take the total width minus the right top corner's width */
 #usb_modems div.box_bottom_left, #usb_modems div.box_top_left {
	width:							325px;
}

#usb_modems {
	padding-top:					20px;
	margin-top:						10px;
	clear:							both;
	width:							335px;
}

#shortcuts {
	float:							right;
}

#products {
	margin-bottom:					20px;
	float:							left;
}

#products th a:hover {
	text-decoration:				none;
}

/*	2.7 Latest blog post
---------------------------------------------------------------------- */
/* Take the total width minus the right top corner's width */
#latest_blog_posts div.box_top_left, #latest_blog_posts div.box_bottom_left {
	width:							325px;
}

/* So that we can float other objects within */
#latest_blog_posts .box_content {
	float:							left;
	width:							313px;
}

#latest_blog_posts  {
	clear:							both;
	width:							335px;
}

#latest_blog_posts h2 {
	margin-bottom:					10px;
	margin-left:					10px;
}

#latest_blog_posts li {
	padding:						10px;
}

#latest_blog_posts span.text {
	padding-left:					5px;
	padding-top:					3px;
	display: 						block;
}

#latest_blog_posts li.hover {
	background-color:				#e6e8ee;
	cursor:							pointer;
}

#latest_blog_posts a:hover {
	text-decoration:				none;
}

/* To create a distance between this box and the one below */
#latest_blog_posts .box_bottom_left {
	margin-bottom:					20px;
}

.date_posted {
	background:	 				url("/images/blog/calendar.png") no-repeat;
	width:						55px;
	height:						49px;
	float:						left;
	clear:						both;
	margin-top:					1px;
	margin-right:				5px;
}

.date_posted p {
	text-align:					center;
	line-height:				1em;
}

.month_posted p {
	color:						white;
	height:						15px;
	padding-top:				3px;
	font-size:					95%;
}

.day_posted p {
	font-size:					140%;
	height:						28px;
	padding-top:				3px;
}

/*	2.8 Footer
---------------------------------------------------------------------- */
#footer {
	margin-top:			40px;
	border-top:			1px solid #a8a9ae; /* #02397F; */ /* Darker version of color */
	clear:				both;
	width:				100%;
	color:				#444446;
	background:			#f3f4fb url("/images/shared/footer-gradient.png") repeat-x;
	padding-top:		20px;
}

#footer a:visited, #footer a {
	color:				#363638;
}

#footer_box {
	margin-left:		auto;
	margin-right:		auto;
	margin-bottom:		15px;
	width:				960px;
}

#footer_terms_of_service {
	float:				left;
	width:				360px;
}

#footer_terms_of_service p  {
	font-size:			80%;
}

#footer_terms_of_service p span {
	font-weight:		bold;
}

#footer_navigation {
	padding-bottom:		15px;
	margin-left:		480px;
}

#footer_navigation li {
	margin-bottom:		5px;
	margin-left:		5px;
}

#footer_navigation_left {
	float:				left;	
}

#footer_navigation_left p, #footer_navigation_right p {
	font-weight:		bold;
	margin-bottom:		5px;
}

#footer_navigation span.text {
	position:			relative;
	top:				-10px;
	left:				5px;
}

#footer_navigation_right {
	margin-left:		240px;
}

#footer_navigation_right a:hover {
	text-decoration:	none;
}

#footer_navigation_right a:hover span {
	text-decoration:	underline;
}

#footer_bottom {
	padding-top:		10px;
	background:			#f3f4fb url("/images/shared/footer-divider.png") top center no-repeat;
	text-align:			center;
	clear:				both;
	margin-bottom:		10px;
}

#footer_bottom p {
	font-size:			80%;
}

/* 3. Mobile broadband
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/** For the search result h2 title **/
#search_h2 { 
	font-weight:			normal;
	font-size:				14px;
}

/*	3.1 Search Options
---------------------------------------------------------------------- */
#product_search_form {
	margin-top:			15px;
	margin-left:		40px;
}

div.hidden {
	display: 			none;
}

/* styling for the green submit button div */
#product_search_form div.submit {
	float:right;
	clear:both;
	margin-top:15px;
	margin-right:-10px;
}

#search_options {
	color:				white;
	line-height:		0;
	float:				left;
	margin-bottom:		35px;
}

/* So that the laptops appears further down than the rest of the search results */
#laptops h2.title {
	margin-bottom:		45px;
	font-size:			14px;
	clear:				both;
	font-weight:		normal;
	color:				#404040;
}

#laptops #search_options {
	margin-bottom:		25px;
}

#search_options p {
	color:				white;
}

#search_options h1 {
	font-size:			200%;
	color:				white;
}

fieldset>p {
	font-size:			14px;
	margin-bottom:		0px;
}

fieldset.js>p {
	margin-left:		5px;
}

fieldset {
	float:				left;
	margin-right:		50px;
}

fieldset select {
	float:				left;
}

fieldset div.checker {
	margin-right:		5px;
	float:				left;
}

fieldset p.checkboxes {
	margin-bottom:		0px;
}

fieldset div.selector {
	margin-bottom:		10px;
	float:				left;
	width:				188px;
}

fieldset div.checkbox {
	float:				left;
	clear:				both;
	margin-bottom:		3px;
}

fieldset div.checkbox_label {
	float:				left;
	font-size:			14px;
}

fieldset #checkboxes_left, fieldset #checkboxes_middle, fieldset #checkboxes_right {
	float:				left;
}

fieldset #checkboxes_middle, fieldset #checkboxes_right {
	margin-left:		10px;
}

img.question {
	margin-top:			4px;
	visibility:			hidden;
	float:				left;
}

img.visible {
	visibility:			visible;
}

.green_button {
	background: 			transparent url("/images/shared/buttons/green-button.png") no-repeat top left;
	color:					#263925; /* Dark gray green */
	width: 					120px;
	text-align: 			center;
	text-decoration:		none;
	height: 				40px; /* Count minus the padding top */
	margin-top:				0px;
	margin-right:			6px;
	padding-top:			8px;
	padding-bottom:			10px;
	float:					right;
	font-size:				115%;
	border:					none;
	cursor:					pointer;
	clear:					both;
}

.green_button:hover {
	color:					black;
	background-position:	0px -40px;
}

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url("/images/shared/tooltip/white_arrow.png");
	font-size:12px;
	height:80px;
	width:170px;
	padding:20px 20px 20px 20px;
	color:black;
	line-height: 1.4em;
}

.tooltip h2 {
	font-size:120%;
	padding-bottom: 3px;
}

/*	3.2 Important terms
---------------------------------------------------------------------- */
/* Take the total width minus the right top corner's width */
#important_terms div.box_top_left, #important_terms div.box_bottom_left {
	width:							590px;
}

#important_terms {
	width:							600px;
	float:							left;
	clear:							left;
}

#important_terms a {
	text-decoration:				underline;
	color:							#333333;
}

#important_terms span {
	font-weight:					bold;
}

#important_terms h2 {
	padding-bottom:					10px;
}

#important_terms div.box_content {
	padding: 						0px 20px;
}

#important_terms p {
	padding-bottom:					15px;
}

/* 4. Product list
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
#products {
	clear:					both;
}

/** For the admin interface **/
#products div.item {
	position:				relative;
}

/** For the admin interface **/	
#products div.admin_box {
	position:				absolute;
	left:					980px;
	top:					45px;
	font-weight:			bold;
}

/*	4.1 Header
---------------------------------------------------------------------- */
#products div.header {
	margin-bottom:			8px;
	font-weight:			bold;
	float:					left;
	margin-left:			1px; /* so that is aligns correctly with the content after the 1px border */
}

#products div.body {
	float:					left;
}

#products div.header a, #products div.header a:hover {
	color:					white;
	text-decoration:		none;
}

div.header div.download_speed, div.header div.included_traffic, div.header div.binding_period, div.header div.monthly_cost, div.header div.daily_price, div.header div.weekly_price, div.header div.monthly_price, div.header div.startup_cost {
	float:					left;
	height:					30px;
	width:					116px;
	margin:					2px;
	text-align:				center;
}

div.search_result {
	width:					358px;
	padding-top:			5px;
	float:					left;
}

/* Small information is used by the prepaid broadband display, since we
have 5 factors to sort by and therefore and have to make it smaller */
div.small_search_result {
	width:					238px;
	padding-top:			5px;
	float:					left;
}

div.small_search_result h2 {
	font-size:				95%;
}

div.header div p a {
	line-height:			1em;
	padding-top:			6px;
	display:				block;
	width:					116px;
	height:					24px;
}

div.header div.download_speed {
	background:				url("/images/shared/title-box/title-box-pink.png") no-repeat top left;
}

div.header div.download_speed.hover {
	background-position:	-116px 0px;
}

div.header div.included_traffic, div.header div.daily_price {
	background:				url("/images/shared/title-box/title-box-green.png") no-repeat top left;
}

div.header div.included_traffic.hover, div.header div.daily_price.hover {
	background-position:	-116px 0px;
}

div.header div.binding_period, div.header div.weekly_price  {
	background:				url("/images/shared/title-box/title-box-orange.png") no-repeat top left;
}

div.header div.binding_period.hover, div.header div.weekly_price.hover  {
	background-position:	-116px 0px;
}

div.header div.monthly_cost, div.header div.monthly_price  {
	background:				url("/images/shared/title-box/title-box-blue.png") no-repeat top left;
}

div.header div.monthly_cost.hover, div.header div.monthly_price.hover {
	background-position:	-116px 0px;
}

div.header div.startup_cost {
	background:				url("/images/shared/title-box/title-box-pink.png") no-repeat top left;
}

div.header div.startup_cost.hover {
	background-position:	-116px 0px;
}

/*	4.2 Body
---------------------------------------------------------------------- */
#products #not_found {
	padding-top:				15px;
	font-weight:				bold;
	font-style:					italic;
	text-align:					left;
	clear:						both;
}

div.body a.information_link {
	text-decoration:			underline;
	font-weight:				normal;
}

div.body div {
	float:						left;
}

div.body div.item {
	border-top:				1px solid #B2B2B2;
	border-left:			1px solid #B2B2B2;
	border-right:			1px solid #B2B2B2;
	background-color:		white;
}

div.body div.first_item {
	background:				url("/images/mobile-broadband/rounded-table-top.png") top left no-repeat;
	border:					none;
	padding-left:			1px; /* so that it is equal the size of the item with a border left and right of 1px */
	padding-right:			1px;
}

div.body div.last_item {
	background:				url("/images/mobile-broadband/rounded-table-bottom.png") top left no-repeat;
	height:					139px;
	border:					none;
	padding-left:			1px; /* so that it is equal the size of the item with a border left and right of 1px */
	padding-right:			1px;
	margin-bottom:			20px; /* make some space so it doens overlap following items on the page */
}
		
div.body div.download_speed, div.body div.included_traffic, div.body div.startup_cost, div.body div.binding_period, div.body div.monthly_cost, div.body div.amount_saved, div.body div.daily_price, div.body div.weekly_price, div.body div.monthly_price, div.body div.startup_cost {
	float:					left;
	width:					120px;
	font-weight:			bold;
	vertical-align:			top;
	text-align:				center;
	height:					130px;
}

div.body span.top, div.body span.middle, div.body span.bottom, div.body span.startup_cost, div.body span.maximum_traffic {
	float:					left;
	width:					120px;
}

div.body span.top {
	height:					15px;
	padding-top:			25px;	
	font-weight:			normal;
	line-height:			1em;
}

div.body span.middle {
	height:					auto;
	font-size:				250%;
	padding-top:			5px;
	line-height:			1em;
}

div.body span.bottom {
	padding-top:			10px;
	height:					auto;
	line-height:			1em;
}

div.body span.startup_cost, div.body span.maximum_traffic {
	font-weight:			normal;
	font-size:				90%;
}

div.body div.amount_saved span.top {
	font-weight:			bold;
	line-height:			1em;
}

div.body div.amount_saved span.middle {
	float:					left;
	font-size:				250%;
	padding-top:			5px;
	margin-left:			20px;
	width:					auto;
	line-height:			1em;
}

div.body div.amount_saved span.currency {
	padding-top:			22px;
	padding-left:			3px;
	font-weight:			bold;
	font-size:				80%;
	float:					left;
	width:					auto;
	line-height:			1em;
}

div.body div.information {
	float:					left;
	width:					258px;
	padding:				10px 0px 10px 10px;
	text-align:				left;
	height:					110px;
	font-weight:			bold;
}

/* Small information is used by the prepaid broadband display, since we
have 5 factors to sort by and therefore and have to make it smaller */
div.body div.small_information {
	float:					left;
	width:					138px;
	padding:				10px 0px 10px 10px;
	text-align:				left;
	height:					110px;
	font-weight:			bold;
	font-size:				85%;
}

div.body div.product_photo {
	float:					left;
	width:					90px;
	height:					130px;
}

div.body div.product_photo span {
	color:					#5D595F;
	font-size:				85%;
	text-align:				center;
	padding-left:			10px;
	float:					left;
	margin-top:				-3px;
}

div.body div.product_photo span.laptop {
	padding:				5px;
	line-height:			1.2em;
}

div.body div.product_photo img {
	margin-top:				5px;
	margin-left:			7px;
	margin-right:			7px;
}

div.body div.product_photo img.laptop {
	margin-top:				15px;
}

div.body .download_speed p {
	color: 					#FF0084; /* Web 2.0 bold & web 2.0 muted */
}

div.body .included_traffic p, div.body .daily_price p {
	color: 					#008C00;
}

div.body .binding_period p, div.body .weekly_price p {
	color:					#FF7400;
}

div.body .monthly_cost p, div.body .monthly_price p {
	color:					#4096EE;
}

div.body .startup_cost p {
	color:					#FF0084;
}

div.body .amount_saved p {
	color:					#FF1A00;
}

/* for the popup to work properly */
div.body .amount_saved {
	position:				relative;
}

div.body div.hover {
	background-color:		#d8ebff;
	cursor:					pointer;
	background-position:	-960px 0px;
}

div.body div.hover div.savings_popup {
	visibility:				visible;
}

div.body div.savings_popup {
	background-image:		url("/images/shared/savings-popup.png");
	width:					115px;
	height:					75px;
	position:				absolute;
	top:					-50px;
	left:					0px;
	visibility:				hidden; 
}

/* So that the last and first item in the list has it aligned correctly (since they do not have borders) */
div.body div.last_item div.savings_popup, div.body div.first_item div.savings_popup {
	top:					-49px;
}

div.body div.savings_popup p {
	color:					white;
	text-align:				left;
	padding-left:			13px;
	padding-top:			3px;
	font-weight:			normal;
	font-size:				90%;
	line-height:			1.25em;
}

div.body div.hover .yellow_button {
	color:					black;
	background-position:	0px -35px;
	text-decoration:		underline;	
}

.yellow_button:hover {
	color:					black;
	background-position:	0px -35px;
	text-decoration:		underline;
}

.yellow_button {
	background: 			transparent url("/images/shared/buttons/yellow-button.png") no-repeat top left;
	color:					#3f3520; /* Dark gray orange */
	width: 					90px;
	margin-left:			15px;
	margin-top:				5px;
	text-align: 			center;
	text-decoration:		none;
	height: 				26px; /* Count minus the padding top */
	padding-top: 			5px;
	float: 					left;
	font-size:				120%;
}

/* 5. Detailed view
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* CSS for the detialed view on mobile broadband apart from the first page */

/*	5.1 General
---------------------------------------------------------------------- */
body.blue_minimal {
	background-image:			url("/images/mobile-broadband/minimal-background-tile.png");
}

h2,h3 {
	color:							#404040;
}

h1 {
	color:							#011024;
}

p, li, th {
	color:							#333333;
}

/*	5.2 Modem and operator main view
---------------------------------------------------------------------- */
div.operator h2 {
	padding-left:					5px;
	padding-bottom:					3px;
}

div.operator p {
	text-align:						center;
}

div.operator {
	margin-bottom:					10px;
}

div.modem div.button, div.laptop div.button {
	position:						absolute;
	bottom:							15px;
	right:							15px;
}

div.operator div.button {
	position:						absolute;
	bottom:							15px;
	right:							10px;
}

div.modem .blue_button, div.laptop .blue_button, div.operator .blue_button  {
	color:					white;
	text-align: 			center;
	text-decoration:		none;
	height: 				26px; /* Count minus the padding top */
	margin-top:				0px;
	padding-top:			10px;
	float: 					right;
	border:					none;
	cursor:					pointer;
}

div.modem .blue_button, div.laptop .blue_button {
	background: 			transparent url("/images/shared/buttons/blue-button.png") no-repeat top left;
	width: 					90px;
	font-size:				110%;
}

div.operator .blue_button {
	background: 			transparent url("/images/shared/buttons/blue-button-large.png") no-repeat top left;
	width: 					290px;
	font-size:				105%;
}

div.modem .blue_button:hover, div.laptop .blue_button:hover, div.operator .blue_button:hover {
	background-position:	0px -37px;
}

/* So that is works even when javascript on-hover is used */
#modems div.hover .blue_button, #laptops div.hover .blue_button, #operators div.hover .blue_button {
	background-position:	0px -37px;
}

.prices_from {
	position:				absolute;
	bottom:					15px;
	left:					22px;
	font-size:				100%;
	font-weight:			bold;
}

.prices_from span {
	font-size:				150%;
	color:					#E51800;
}

/*	5.3 Operator main view
---------------------------------------------------------------------- */
div.operator img {
	margin-top:						10px;
}

#operators.content {
	padding-top:					20px;
}

#operators h1 {
	margin-bottom:					20px;
}

#operators a:hover {
	text-decoration:				none;
}

#operators {
	margin-bottom:					20px;
}

/*	5.4 Modem main view
---------------------------------------------------------------------- */
div.modem img.product, div.laptop img.product {
	position:						absolute;
	top:							-20px;
	right:							10px;
}

div.modem h2, div.modem ul, div.laptop h2, div.laptop ul {
	width:							160px;
}

div.laptop h2 {
	font-size:						125%;
	width:							140px;
}

div.modem li {
	padding-bottom:					3px;
}

div.laptop li {
	padding-bottom:					0px;
}

div.modem ul {
	margin-top:						8px;
	margin-left:					5px;
}

div.laptop ul {
	margin-top:						10px;
	margin-left:					5px;
}

#modems h1 {
	margin-bottom:					40px;
}

#modems.content {
	padding-top:					20px;
}

/*	5.5 Operator details
---------------------------------------------------------------------- */
#subscriptions {
	clear:					both;
	padding-top:			10px;
}

#subscriptions div.logo {
	float:					left;
}

#subscriptions div.h1 {
	float:					left;
	margin-top:				23px;
	margin-left:			30px;
}

#contact h2 {
	margin-bottom:					15px;
	font-size:						130%;
}

#about p {
	padding-bottom:					10px;
}

#about p a, #about li a {
	text-decoration:				underline;
	color:							#333333;
}

#contact p {
	padding-bottom:					5px;
}

#about h2 {
	padding-bottom:					10px;
	padding-top:					10px;
}

#about h3 {
	padding-bottom:					5px;
}

#about li {
	padding-bottom:					5px;
}

#about ul {
	list-style-type:				disc;
	list-style-position:			inside;
	padding-left:					10px;
}

#about div.box_content {
	padding:						0px 10px 0px 25px;
}

#about div.box_content div.scroll {
	height:							250px;
	overflow:						auto;
}

#about {
	margin-bottom:					50px;
}

#contact div.box_content {
	padding:						0px 10px 0px 15px;
}

#contact div.box_content div.scroll {
	height:							139px;
	overflow:						auto;
}

/*	5.5.1 For the boxes to work
---------------------------------------------------------------------- */
#contact {
	clear:							left;
	float:							left;
	width:							252px;
	font-size:						90%;
}

#contact div.box_top_left, #contact div.box_bottom_left {
	width:							242px;
}

#about {
	float:							right;
	width:							680px;
}

#about div.box_top_left, #about div.box_bottom_left {
	width:							670px;
}

/*	5.6 Modem details
---------------------------------------------------------------------- */
#modem_details {
	margin-top:						20px;
}

#laptop_details {
	padding-top:					30px;
}

#specifications_left {
	float:							left;
	width:							200px;
	text-align:						center;
}

#modem_details #specifications_left img {
	margin-top:						22px;
}

#modem_details #specifications_left img {
	height:							175px;
}

#laptop_details #subscriptions, #modem_details #subscriptions {
	padding-top:					30px;
}

#laptop_details #product_search_form, #modem_details #product_search_form {
	margin-top:						5px;
}

#specifications_right {
	margin-left:					225px;
}

/* needs to be here for Opera to work */
#product_search_form p {
	clear:							both;
}

#specifications_right h2 {
	margin-top:						5px;
	margin-bottom:					5px;
}

table.left, table.right {
	float:							left;
}

table.right {
	margin-left:					15px;
}

#specifications_right table td {
	padding:						4px;
}

#specifications_right img {
	padding-right:					10px;
	width:							45px;
	height:							45px;
}

table tr.odd {
	background-color:				#e0e1e3;
}

table td.title {
	font-weight:					bold;
}

/*	5.7 Laptop index
---------------------------------------------------------------------- */
#laptop_filter div.submit {
	clear:				both;
	padding-top:		10px;
}

#found_laptops {
	clear:				both;
	min-height:			200px;
}

#about_computers {
	clear:				both;
	margin-bottom:		40px;
}

/* Take the total width minus the right top corner's width */
#about_computers div.box_top_left, #about_computers div.box_bottom_left {
	width:							950px;
}

#about_computers {
	width:							960px;
	float:							left;
	clear:							left;
}

#about_computers ul {
	list-style-position:			inside;
	list-style-type:				disc;
	padding-left:					10px;
	margin-bottom:					15px;
}

#about_computers p.intro {
	font-weight:					bold;
}

#about_computers a {
	text-decoration:				underline;
	color:							#333333;
}

#about_computers span {
	font-weight:					bold;
}

#about_computers h2 {
	padding-bottom:					10px;
}

#about_computers div.box_content {
	padding: 						0px 20px;
}

#about_computers p {
	padding-bottom:					15px;
}


/** AJAX loader **/
#ajax_loader {
	clear:				both;
	position:			relative;
	visibility:			hidden;
	z-index:			999;
	width:				128px;
	margin-left:		auto;
	margin-right:		auto;
	top:				110px;
}

/* 6. Info
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

body.purple_minimal .content {
	padding-top:		50px;
}

body.purple_minimal {
	background:			#f9faff url("/images/info/background-tile.png") repeat-x scroll left top;
}

#google_maps {
	float:				left;
	margin-top:			10px;
	margin-bottom:		10px;
}

#google_maps iframe {
	border:				1px solid #545977;
}

#show_large_map {
	clear:				both;
}

#contact_info {
	margin-left:		450px;
}

#contact_us p, #cookies p, #about_mobiletail p {
	margin-bottom:			7px;
	margin-left:			2px;
}

#contact_us h2 {
	margin-bottom:			5px;
	margin-top:				20px;
}

#cookies h1, #about_mobiletail h1 {
	margin-bottom:			10px;
}

#contact_us span.bold {
	font-weight:			bold;
}

#about_mobiletail p.end {
	font-style:				italic;
}

#about_mobiletail a, #contact_us a {
	text-decoration: underline;
	color:			 #333333;
}

/* 7. Welcome
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
body.welcome {
	background:						#f9faff url("/images/welcome/background-tile.png") repeat-x scroll left top;	
}

#welcome h1 {
	padding-top:					10px;
	color:							white;
	text-align:						center;
	font-size:						270%;
	text-transform:					uppercase;
	text-shadow:					1px 1px 2px black;
}

#welcome h2 {
	text-indent:					-10000px;
}

#welcome h1 span {
	border-bottom: 					5px solid white;
}

#welcome #navigation {
	margin-top:						50px;
	clear:							both;
	margin-left:					auto;
	margin-right:					auto;
	width:							960px;
}

/* For use when js is disabled */
#welcome a.click_area span {
	width:							280px;
	height:							170px;
	float:							left;
}

#welcome #mobile_broadband {
	background-image: url("/images/welcome/mobile-broadband-box.png");
}

#welcome #laptops {
	background-image: url("/images/welcome/laptop-broadband-box.png");
}

#welcome #prepaid_broadband {
	background-image: url("/images/welcome/prepaid-broadband-box.png");
}

#welcome a, #welcome a:visited {
	color: 							#404040;
}

#welcome .hover_box {
	text-align:						center;
}

#welcome .hover_box {
	padding-left:					15px;
	padding-right:					15px;
}

#welcome #laptops img {
	margin-top:						-30px;  /* because the laptop image is taller itself */
	margin-left:					-130px;
	margin-bottom:					13px;
}

#welcome .hover_box img {
	margin-top:						-30px; 
	margin-bottom:					20px;
}

/* 8. Blog
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/*	8.1 Main
---------------------------------------------------------------------- */
#blog {
	margin-bottom:				20px;
}

#blog.content {
	padding-top:				20px;
}

#blog h1 {
	margin-bottom:				20px;
}

#blog .blog_post ul {
	list-style-type:			disc;
	list-style-position:		inside;
}

#blog .blog_post ol {
	list-style-position:		inside;	
	list-style-type:			decimal;
}

#blog div.left_column {
	float:						left;
	width:						600px;
}

#blog div.right_column {
	float:						right;
}

/* Auth Info (shows when login or logout i used or updated posts) */
#auth_info {
	background-color:						#a5e0ff;
	color:									black;
	width:									300px;
	border:									1px solid #61c9ff;
	margin-bottom:							10px;
	text-align:								center;
}

/*	8.2 Newsletter
---------------------------------------------------------------------- */
#newsletter div.box_content {
	float:						left;
	width:						313px;
}

#newsletter {
	width:						335px;
	clear:						both;
}

#newsletter div.box_top_left, #newsletter div.box_bottom_left {
	width:						325px;
}

/*	8.3 Blog post
---------------------------------------------------------------------- */
.blog_post {
	width:							600px;
	float:							left;
	clear:							left;
	margin-bottom:					20px;
}

.blog_post div.box_content {
	padding: 						8px 20px 3px 20px;
}

.blog_post div.box_top_left, .blog_post div.box_bottom_left {
	width:							590px; /* Take the total width minus the right top corner's width */
}

#go_back {
	margin-top:						10px;
	margin-bottom:					10px;
	clear:							both;
}

#new_blog_post label, .edit_blog_post label {
	font-weight:					bold;
}

#new_blog_post p, .edit_blog_post p {
	margin-bottom:					15px;
}

/*	8.3.1 Header
---------------------------------------------------------------------- */
#blog_admin img {
	padding-right:				3px;
}

#blog .blog_header h1 {
	margin-bottom:				0px; 	/* So that we don't have the problem on the detailed "show" action */
}

.blog_header {
	clear:						both;
}
		
.blog_header .date_posted {
	background:	 				url("/images/blog/calendar.png") no-repeat;
	width:						55px;
	height:						49px;
	float:						left;
	clear:						both;
	margin-top:					2px;
}

.blog_header .date_posted p {
	text-align:					center;
	line-height:				1em;
}

.blog_header .month_posted p {
	color:						white;
	height:						15px;
	padding-top:				3px;
	font-size:					95%;
}

.blog_header .day_posted p {
	font-size:					140%;
	height:						28px;
	padding-top:				3px;
}

.blog_header .blog_title {
	margin-left:				60px;
}

.blog_header p.author {
	font-style:					italic;
}

.blog_header h2 {
	font-size:					180%;
}

/*	8.3.2 Body
---------------------------------------------------------------------- */
.blog_body {
	clear:							both;
	padding:						10px 6px 0px 6px;
}

.blog_body a {
	text-decoration:				underline;
	color:							#333333;
}

.blog_body p {
	padding-bottom:					10px;
}

.blog_body .read_more {
	font-size:						110%;
}

/*	8.3.3 Footer
---------------------------------------------------------------------- */
.blog_footer {
	padding-left:						6px;
	float:								left;
}

.blog_footer .facebook_like {
	padding-top:						5px;
}

.blog_footer .blog_comments {
	padding-top:						5px;
	float:								left;
}

.blog_footer .comments {
	float:								left;
}

.blog_footer .new_comment {
	padding-left:						15px;
	float:								left;
}

.top_comments {
	font-size:							105%;
}

/* So that it displays correctly and shows borders all way. TOFIX: Add to standard box-model */
.blog_post div.box_content {
	float:								left;
	width:								558px;
}

/*	8.3.4 Comments
---------------------------------------------------------------------- */
.blog_comment .header .name {
       font-weight:							bold;
}

.blog_comment .header .date {
       font-style:								italic;
}

.blog_comment {
	padding:								5px 10px 5px 10px;
}

#all_blog_comments .odd {
       background-color:						#f3f4fa;
}

#new_blog_comment label.newsletter {
	font-weight:							normal;
	font-size:								95%;
}

#all_blog_comments h2 {
	margin-top:								5px;
}

#all_blog_comments {
	margin-bottom:							15px;
}

p.recaptcha_info {
	font-style:								italic;
	font-size:								90%;
	padding-left:							5px;
	padding-bottom:							10px;
}

#recaptcha_widget_div {
	margin-top:								5px;
}

.blog_footer hr {
	border:									1px solid #DFDFE6;
	margin-top:								3px;
}

/*	8.3.5 Error messages
---------------------------------------------------------------------- */
.fieldWithErrors {
  padding: 2px;
  background-color: #c00;
  color: white;
  display: table;
}

#errorExplanation {
  width: 400px;
  border: 2px solid #c00;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
  list-style-position:inside;
}

/*	8.4 Follow Button
---------------------------------------------------------------------- */
#follow_blog {
	background:				url("/images/blog/follow-our-blog.png");
	height:					75px;
	width:					335px;
	margin-bottom:			20px;
	float:					left;
}

a:hover #follow_blog {
	background-position:	0px -75px;
	cursor:					pointer;
}