@charset "utf-8";

/******************************************************************************/
/* GENTLE 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,
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-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
	font-variant: normal;
	letter-spacing: normal;
	word-spacing: normal;
	background-color: transparent;
	text-transform: none;
	white-space: normal;
}
/* remember to define focus styles! */
:focus
{
	outline: 0;
}
body
{
	line-height: 1;
	color: black;
	background: none transparent;
}
ol, ul
{
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table
{
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td
{
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after
{
	content: "";
}
blockquote, q
{
	quotes: "" "";
}

/******************************************************************************/
/* UTILITY STYLES                                                             */
/******************************************************************************/

.align_left
{
    text-align: left !important;
}

.align_center
{
    text-align: center !important;
}

.align_right
{
    text-align: right !important;
}

.float_left
{
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.float_right
{
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}

.clear
{
    clear: both;
}

.clear_left
{
    clear: left;
}

.clear_right
{
    clear: right;
}

.hidden
{
	display: none;
}

/******************************************************************************/
/* GENERAL TEXT STYLES                                                        */
/******************************************************************************/

body, p, th, td, label
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 165%;
	color: #333;
}

b, th b, td b { color: #555; }

p
{
	margin-bottom: 8px;
}

/* NOT YET USED */
.key b
{
	font-weight: normal;
	background-color: transparent !important;
	border-width: 1px;
	border-color: #555;
	border-style: solid;
	padding: 1px 2px;
	margin: 0px 2px;
}

/* NOT YET USED */
ul li
{
	list-style-type: disc;
	list-style-position: outside;
	margin-right: -15px;
}

small
{
	font-size: 85%;
	line-height: 150%;
}

a
{
	color: #009;
	text-decoration: none;
	border-bottom: 1px #8484A2 solid;
	white-space: nowrap;
	cursor: pointer;
}
a:hover
{
	color: #00C;
	border-bottom: 1px #009 solid;
}
a:active
{
	color: #999;
}

/* SUPPRESS FX ON IMAGE LINKS */
a.img, a.img:hover
{
	background-color: transparent !important;
	border: 0px !important;
}

pre
{
	clear: both;
	margin-top: 20px;
	white-space: pre;
}

/* HEADINGS */

h1, h2, h3
{
	border: 0px;
}

h1, h2
{
	color: #F50;
	font-size: 20px;
	font-weight: lighter;
	line-height: 130%;
	padding-top: 1.2em;
	padding-bottom: 2px;
	margin-bottom: 0.75em;
	border-width: 0 0 1px 0;
	border-color: #F60;
	border-style: dotted;
	letter-spacing: -1px;
}

h3
{
	font-size: 14px;
	font-weight: normal;
	margin-top: 15px;
	margin-bottom: 10px;
}

/******************************************************************************/
/* GENERAL COLOUR SCHEME - intense, pale and faint                            */
/******************************************************************************/

.col1i, .col1i b
{
	color: #000;
	background-color: #FFE8B2;
}

.col1p
{
	color: #000;
	background-color: #FFF8E8;
}

.col1f
{
	background-color: #FFFDFA;
}

.col2i, .col2i b
{
	color: #FFF;
	background-color: #669;
}

.col2p
{
	color: #000;
	background-color: #F3F4FF;
}

.col2f
{
	color: #000;
	background-color: #F3F4FF;
}

/* Borders and lines */
.col1i, .col1p, .col1f,
.col2i, .col2p, .col2f,
table, tr, th, td,
#DOMWindow,
ul.as-selections li.as-selection-item
{
	border-color: #8F8FB3;
}

/******************************************************************************/
/* DOM Windows                                                                    */
/******************************************************************************/

#DOMWindow
{
	width: calc(100% - 45px);
}

#DOMWindow iframe
{
	width: calc(100% - 20px) !important;
}

/******************************************************************************/
/* BUTTONS                                                                    */
/******************************************************************************/

.grabut_left, .grabut_right,
.grabut_left_forward, .grabut_right_forward,
.grabut_left_reload, .grabut_right_reload
{
	cursor: pointer;
	line-height: normal;
	height: 22px;
}

.grabut_left ul, .grabut_right ul,
.grabut_left_forward ul, .grabut_right_forward ul,
.grabut_left_reload ul, .grabut_right_reload ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	width: auto;
}

.grabut_left,
.grabut_left_forward,
.grabut_left_reload
{ float: left; }

.grabut_right,
.grabut_right_forward,
.grabut_right_reload
{ float: right; }

.grabut_left li, .grabut_right li,
.grabut_left_forward li, .grabut_right_forward li,
.grabut_left_reload li, .grabut_right_reload li
{
	margin: 0 1px;
	padding: 0 0 0 10px;
	list-style: none;
	height: 22px;
	background: url("/images/css_core/css_button_left.gif") no-repeat left top;
}

.grabut_left a, .grabut_right a,
.grabut_left_forward a, .grabut_right_forward a,
.grabut_left_reload a, .grabut_right_reload a
{
	color: #FFF;
	font-size: 12px;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	line-height: 100%;
	display: block;
	float: left;
	height: 22px;
	border: 0px !important;
	padding: 5px 16px 0px 5px;
	background: url("/images/css_core/css_button_right.gif") no-repeat right top;
}

.grabut_left_forward a, .grabut_right_forward a,
.grabut_left_reload a, .grabut_right_reload a
{
	padding: 5px 28px 0px 5px;
}

.grabut_left a:hover, .grabut_right a:hover,
.grabut_left_forward a:hover, .grabut_right_forward a:hover,
.grabut_left_reload a:hover, .grabut_right_reload a:hover
{
	color: #FFF;
	background-color: transparent !important;
}	

/* Button info-i (i) for touchscreens */

span.info-i
{
	margin-left: 0.25em;
	background-color: #EEE;
	border: 1px #999 dashed;
	border-radius: 6px;
	display: inline-block;
	width: 1.66em;
	height: 1.66em;
	text-align: center;
	line-height: 1.66em;
}

span.info-i.right
{
	margin-left: 0;
	margin-right: 0.25em;
	float: right;
}
	
span.info-i:before
{
	content: 'i';
	font-weight: bold;
	color: #999;
}

ul.overlap span.info-i
{
	margin-left: -2em;
	background-color: rgba(238, 238, 238, 0.75);
}

ul.overlap span.info-i:before
{
	color: #666;
}

/******************************************************************************/
/* FORMS                                                                      */
/******************************************************************************/

label
{
	display: block;
	clear: left;
	padding-bottom: 3px;
}

label:before
{
	content: "\0000a0";
}

label.tall
{
	min-height: 100px;
}

label.section
{
    text-align: left;
    font-weight: bold;
}

label:empty
{
	display: none;
}

input + label, select + label, textarea + label, span.help + label
{
	padding-top: 4px;	
}

input, select, textarea
{
	box-sizing: border-box;
	border: 1px #8F8FB3 solid;
	background-color: #FBFBFB;
	width: 95%;
	max-width: 100%;
}

input:focus, select:focus, textarea:focus,
ul.as-selections li:hover.as-selection-item
{
	border-color: #FF6600;
	background-color: #FFF7F2;
}

input[type=text], input[type=password], select, textarea
{
	display: block;
	float: left;
}

input.short, select.short, textarea.short,
.short input[type=text], .short input[type=password], .short select, .short textarea
{
	width: 100px;
}

input.w200, select.w200, textarea.w200,
.w200 input[type=text], .w200 input[type=password], .w200 select, .w200 textarea
{
	width: 200px;
}

input[type=radio], input[type=checkbox]
{
	float: left;
	clear: left;
	width: auto;
	padding: 0px;
	margin-bottom: 5px;
	margin-left: 0;
	margin-right: 7px;
}

fieldset
{
	display: block;
	clear: left;
	border-width: 0px;
}

fieldset.options_radio span, fieldset.options_checkbox span
{
	padding-top: 2px;
	padding-left: 2px;
	padding-right: 5px;
	float: left;
	max-width: 370px;
	line-height: 120%;
}

fieldset.options_radio span
{
	margin-bottom: 10px;
}

fieldset.options_checkbox span
{
	margin-bottom: 5px;
}

/* Form field help */

p.field_help
{
	float: left;
	margin: 0px;
	padding: 0px;
}

/* Validation error highlighting */

label.error
{
	color: #C33 !important; 
	font-weight: bold !important;
}

input.error, input[type=password].error, select.error
{
	border: 2px #C33 solid !important; 
}

@media screen and (min-width: 500px)
{
	label
	{
		float: left;
		text-align: right;
		clear: both;
		width: 120px;
		padding-right: 10px;
		margin-right: 10px;
		border-right: 1px #8F8FB3 dotted;
		padding-bottom: 10px;
	}

	label.section
	{
		width: 400px;
	}

	label:empty
	{
		display: block;
	}

	input + label, select + label, textarea + label, span.help + label
	{
		padding-top: 0;	
	}
	
	input, select, textarea
	{
		margin-right: 10px;
	}

	input[type=text], input[type=password], select, textarea
	{
		width: 300px;
	}

	input.long, select.long, textarea.long
	.long input[type=text], .long input[type=password], .long select, .long textarea
	{
		width: 450px;
	}

	fieldset
	{
		clear: unset;
	}

	fieldset.options_radio, fieldset.options_checkbox
	{
		float: left;
		display: block;
		padding: 2px;
		width: auto;
	}
}

/******************************************************************************/
/* TABLES                                                                     */
/******************************************************************************/

table
{
	border-collapse: collapse;
}

table thead th
{
	vertical-align: bottom;
	font-weight: bold;
}

td { vertical-align: top; }

/******************************************************************************/
/* ERROR MESSAGES                                                             */
/******************************************************************************/

.error
{
	color: #C33;
}

p.error
{
	border: 1px #C33 solid;
	padding: 5px;
	margin-bottom: 5px;
}

.fatal_err
{
    background-image: url("/images/css_core/fatal_err_50.png");
    background-repeat: no-repeat;
    padding-left: 60px;
}

/******************************************************************************/
/* FEEDBACK MESSAGES                                                          */
/******************************************************************************/

.feedback
{
	color: green;
}

p.feedback
{
	border: 1px green solid;
	padding: 5px;
	margin-bottom: 5px;
}

/******************************************************************************/
/* ICONS COMPRISING MULTIPLE BLOCKS                                           */
/******************************************************************************/

.icon_blocks img, .icon_blocks span
{
	float: left;
}

.icon_blocks span
{
	color: #FFF;
	background-color: #669;
	height: 26px;
	font-size: 11px;
	line-height: 90%;
	padding: 6px 4px 0px 6px;
	overflow: hidden;
}

.icon_blocks span.fullnum
{
	min-width: 65px;
}

.icon_blocks span.range
{
	font-weight: bold;
	font-size: 17px;
	letter-spacing: -1px;
	white-space: nowrap;
	min-width: 50px;
	padding-top: 8px;
	height: 24px;
	color: #E6E6FF;
}

.icon_blocks span.range span.infotext
{
	padding: 0px;
	font-size: 17px;
}

/******************************************************************************/
/* TOOLTIPS (OR 'INFOTEXT')                                                   */
/******************************************************************************/

.infotext, label i
{
	cursor: pointer;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #777;
}

label i
{
	font-style: normal;
}

img.infotext
{
	border: 0px;
}

.tip
{
	display: none;
	z-index: 66536;
	position: absolute;
	max-width: 200px;
	width: auto;
	text-align: left;
	padding: 10px;
	line-height: 140%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-size: 12px;
	border-color: #F3F4FF;
	background-color: #4F4F70;
}

.tip, .tip b, .tip th, .tip td
{
	color: #FFF;
}

.tip small
{
	font-size: 11px;
	display: block;
	color: #DDD;
}

/* Use cite for additional info ('see also'); use dfn for infotext id */
.tip cite, .tip dfn
{
	display: block;
	font-size: 8px;
	color: #EEE;
}

.tip dfn
{
	color: #cfcfe5;
	text-align: right;
}

/******************************************************************************/
/* AJAX LOADING TWIRLER                                                       */
/******************************************************************************/

.twirler
{
    background-image: url("/images/css_core/twirler.gif");
    background-repeat: no-repeat;
    background-position: center 100px;
}
.twirler128
{
    background-image: url("/images/css_core/twirler128.gif");
    background-repeat: no-repeat;
    background-position: center 100px;
}
/******************************************************************************/
/* FLOATING DOM WINDOWS                                                             */
/******************************************************************************/

.floating_window_container
{
	display: none;
}

#DOMWindow
{
	border-width: 1px !important;
	-moz-box-shadow: 5px 5px 5px #888;
	-webkit-box-shadow: 5px 5px 5px #888;
	box-shadow: 5px 5px 5px #888;
}

#DOMWindow iframe
{
	margin: 10px;
}

.dragbar
{
	padding: 3px 7px 3px 10px;
	font-size: 14px;
}

.dragbar a.close
{
	float: right;
	border-bottom: 0px;
	width: 15px;
	text-indent: -3000px;
	background-image: url("/images/css_core/close_cross.png");
	background-position: 0px 2px;
	background-repeat: no-repeat;
}

/******************************************************************************/
/* ACCORDIONS                                                                 */
/******************************************************************************/

#accordion_container
{
	width: 100%;
}

h3.acc_trigger, h3.false_acc_trigger
{
	padding: 2px 0 0 0 !important;
	margin: 1px 0 0 0;
	height: 22px;
	width: 100%;
	background-color: #669;
	font-weight: normal;
	float: left;
	border-bottom: 0px;
}

h3.active
{
	background-color: #2121A6;
}

h3.acc_trigger a, h3.false_acc_trigger a
{
	color: #D8D8D8;
	text-decoration: none;
	display: block;
	padding: 0 0 0 15px;
	border-bottom: 0px;
}

h3.acc_trigger a:hover
{
	color: #FFF;
}

h3.active a
{
	color: #FFF;
}

.acc_container
{
	margin: 0px;
	overflow: hidden;
	width: 100%;
	clear: both;
	padding: 10px 0;
}

div.acc_container h3:first-child
{
	padding-top: 0px !important;
}

@media screen and (min-width: 500px) {
	.acc_container
	{
		padding: 10px 20px;
	}
}

/******************************************************************************/
/* RIGHT-CLICK MENUS AND TOUCHSCREEN MODALS                                  */
/******************************************************************************/

.rclk_vmenu
{
	position: absolute;
	display: none;
	opacity: 0.9;
	font-size: 10px;
	font-weight: bold;
}

.rclk_vmenu li
{
	display: block;
	width: 120px;
	padding: 5px 10px;
	margin: 0;
	color: #FFF;
	background: #333;
	list-style: none;
	line-height: 100%;
	border-bottom: 1px #555 solid;
	cursor: pointer;
}

.rclk_vmenu li a
{
	display: block;
	color: #FFF;
	border-bottom: none;
}

.rclk_vmenu li:hover, .rclk_vmenu li a:hover
{
	background-color: #CC613D;
}

.rclk_vmenu li ul
{
	display: none;
}

.rclk_vmenu li:hover ul
{
	display: block;
}

.rclk_vmenu li ul
{
	margin-left: 130px;
	margin-top: -15px;
	position: absolute;
}

/* Transform richt-click menus for touchscreens */

.touchscreen .rclk_vmenu
{
	font-size: 15px;
}

.touchscreen .rclk_vmenu
{
	background-color: #FFF;
	padding: 10px;
	border-radius: 8px;
}

.touchscreen .rclk_vmenu li
{
    float: left;
	width: 74px;
	height: 74px;
	padding: 3px;
	border: 2px #FFF solid;
	margin-right: 5px;
	border-radius: 5px;
}

.touchscreen .rclk_vmenu li a
{
	width: 74px;
	height: 74px;
	line-height: 130%;
 	white-space: normal;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

/******************************************************************************/
/* NUMBERCHOOSER-SPECIFIC STYLES                                              */
/******************************************************************************/

/* Stripe */
.numberchooser .results_area table tr:nth-child(even), table.striped tbody tr:nth-child(even)
{
	background-color: #F3F3F3;
}

div.nudger
{
	background-color: #EAEAEA;
}

/* Cell hover */
.numberchooser .results_area table td:hover, .numberchooser .results_area table td:hover a,
div.nudger:hover
{
	color: #FFF;
	background-color: #CC613D;
}

/* AJAX add to trolley - interim twirler */
.numberchooser .results_area table td.req_underway, .numberchooser .results_area table td.req_underway:hover
{
	background-color: none;
	background-image: url("/images/sg_core/interface/ajax_loader_col2.gif");
	background-position: 100px 3px;
	background-repeat: no-repeat;
}

.numberchooser .results_area table td.req_underway:hover
{
	background-image: url("/images/sg_core/interface/ajax_loader_col2_rev.gif");
}

/* Number in trolley */
.numberchooser .results_area table td.trolleyed
{
	background: url("/images/sg_core/interface/green_tick_14.gif") 7px 4px no-repeat;
	padding-left: 27px;
}

.numberchooser .results_area table td.trolleyed:hover,
.numberchooser .results_area table td.trolleyed:hover a
{
	color: inherit;
	background-color: inherit;
}

/* Number in trolley - shaded rows */
.numberchooser .results_area table tr:nth-child(even) td.trolleyed,
.numberchooser .results_area table tr:nth-child(even) td.trolleyed:hover
{
	/* background-color: #99a697; */
}

/* AJAX remove from trolley - interim twirler */
.numberchooser .results_area table td.trolleyed.req_underway, .numberchooser .results_area table td.trolleyed.req_underway:hover
{
	background-image: url("/images/sg_core/interface/ajax_loader_col2.gif");
	background-position: 120px 3px;
}

/* Right-click focus */
td.rclk_focus, td.rclk_focus a,
.numberchooser .results_area table td.trolleyed.rclk_focus
{
	color: #FFF;
	background-color: #777;
}

.numberchooser .results_area table td.trolleyed.rclk_focus
{
	background-image: url("/images/sg_core/interface/green_tick_on_grey_14.gif");
}


/* LOCAL NUMBER SEARCH */
/* Local number search - list highlight */
li.as-result-item.active, li.as-result-item.active b
{
	color: #FFF;
	background-color: #CC613D;
	/* background-image: -webkit-gradient(linear, 0% 0%, 0% 64%, from(rgb(110, 129, 245)), to(rgb(62, 82, 242))); */
}

/* Local number search - matched search highlight */
li.as-result-item em
{
	background-color: #CCA066;
}

/* Local number search - selected item */
ul.as-selections li.as-selection-item
{
	background-color: #FFF;
}

/******************************************************************************/
/* SERVICE-CONFIGUTRATOR-SPECIFIC STYLES                                      */
/******************************************************************************/

.cfg_services_box > div:hover, .cfg_plans_box > div:hover
{
	background-color: #FFC;
}


.greytext {
    text-align: center;
    color: #ff4500;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom :0px;
    z-index: 50001;
    padding-top: 150px;
    font-size: 12px;
    font-weight: bold;
}

/******************************************************************************/
/* Hacks to make Universalproduct and Checkout eComs work on mobile screens   */
/******************************************************************************/

@media screen and (max-width: 600px) {

  .universalproduct div.w200 input[type="text"] {
    width: 120px;
  }

  .checkout th:nth-child(n+1), .checkout td:nth-child(n+1) {
    padding-left: 5px;
  }
  
  .checkout th:nth-child(n+4):nth-child(-n+5),
  .checkout td:nth-child(n+5):nth-child(-n+6) {
    display: none;
  }
  
  .checkout td:nth-child(7) img {
    display: none;
  }
  
  .checkout span.icon_blocks .fullnum {
    background-color: unset;
    color: #333;
    padding-left: 0;
  }
  
  .checkout span.icon_blocks img {
    display: none;
  }

  .checkout #key {
    display: none;
  }
  
  .checkout ul.grabut_right {
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }
}