@import url('reset.css');

/* styles here */
.clearer { clear: both; height: 0; overflow: hidden; }
.noborder { border: none !important; }
.nomargin { margin: 0 !important; }
.nounderline { text-decoration: none; }
.hr { height: 0; clear: both; overflow: hidden; border-top: 1px solid #ccc; padding: 0 0 10px 0; margin: 15px 0 0 0; }
a.popup_img 			{max-width:229px; display:block;}
a.popup_img img			{max-width:100%; height: auto;}
#icon-links				{position:absolute; bottom:0; right: 0;}
.icon-link				{background:url(images/social-icons.png) no-repeat left top; width:32px; height:32px; margin-right:1em; display:inline-block;}
.icon-link span			{display: none;}
.reseller-award			{ margin-left: 20px; margin-bottom:14px;}
#footer p		{text-align: left !important;}
#cookie-bar {background:#555; height:auto; line-height:24px; color:#eeeeee; text-align:center; padding:3px 0; z-index:10;}
#cookie-bar.fixed {position:fixed; top:0; left:0; width:100%;}
#cookie-bar.fixed.bottom {bottom:0; top:auto;}
#cookie-bar p {margin:0; padding:0; color: #FFF;}
#cookie-bar a {color:#ffffff; display:inline-block; border-radius:3px; text-decoration:none; padding:4px 6px; margin-left:8px;}
#cookie-bar .cb-enable {background:#C02484;}
#cookie-bar .cb-enable:hover {background:#009900;}
#cookie-bar .cb-disable {background:#990000;}
#cookie-bar .cb-disable:hover {background:#bb0000;}
#cookie-bar .cb-policy {background:#0033bb;}
#cookie-bar .cb-policy:hover {background:#0055dd;}

body, p, li, a, input, select, textarea, button, h1, h2, h3, h4, h5, h6 { font-family: Tahoma, Geneva, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.3em; color: #000; }
p, h1, h2, h3, h4, h5, h6 { margin: 0 0 1em 0; }
p.first, p.first a { font-size: 14px; }
.small, .small a { font-size: 10px; }
h1 { color: #09527D; font-size: 21px; line-height: 1em; }
h1 a,
h2 a	{ color: inherit; font-size: inherit; text-decoration: none; font-weight:inherit;}
h2, h2 * { color: #09527D; font-size: 17px; line-height: 1em; margin-bottom: 1.3em; }
h3, h3 * {font-size:14px; font-weight:bold;}
#menu a, #submenu a { text-decoration: none; }


.pink, .col a { color: #C02484; }
.blue { color: #055F8F !important; }

.pink-btn {background: #C02484; color: #fff; padding:10px; line-height: 4em;}


.col { float: left; width: 45%; margin-right: 5%; }

table.table { border-collapse: collapse; margin-bottom: 1em; }
table.table th { font-weight: bold; }
table.table td, table.table th { border: 1px solid #ccc; padding: 5px 10px 5px 5px; }

ul.bullet { list-style: disc; padding: 0 0 0 20px; margin: 0 0 1em 0; }
ul.spaced li {  margin: 0 0 1em 0; }
ul.bullet ul li {  margin: 0 0 0 0; }
ul.bullet ul { margin: 0.5em 0 0 0; }
ul.check-list { margin-left:1em;}
ul.check-list li	{list-style:url(images/green-tick.png) inside;}

#header { position: relative; }
#logo { margin: 45px 0 15px 30px; }
#customer-login-link { position: absolute; top: 0; right: 0; }
#telephone-number { position: absolute; top: 42px; right: 0; }
#slides { width: 900px; height: auto; margin: 5px 0; position: relative;}

#page { width: 900px; margin: 10px auto 60px; }

#lhc { width: 612px; float: left; padding: 20px 20px 0 30px; } 
#rhc { width: 238px; float: left; position: relative; left: 12px; margin-top: 10px; } 

#slideshow { position: relative; width: 900px; height: 269px; }
#slideshow img { display: block; float: left; }
#innertrack, #outertrack { height: 269px; }
#outertrack { background: none; width: 900px; overflow: hidden; position: absolute; left: 0; bottom: 0; }
#innertrack { position: absolute; left: 0; top: 0; }
#slides_arrow_left, #slides_arrow_right { position: absolute; top: 0; width: 30px; height: 269px; cursor: pointer; z-index: 200; }
#slides_arrow_left { background: url(images/arrow-left.png); left: 0; }
#slides_arrow_right { background: url(images/arrow-right.png); right: 0; }

.slide.video		{ position: relative; width: 100%; height: 100%; display: block;}
.slide.video video	{ position: absolute; right: 20px; bottom: -8px; }



#news, #basket{ width: 178px; min-height: 400px; background: url(images/news-bg.png) 0 0 no-repeat;  padding: 30px 30px 20px 30px; }
#rightSlider{}
#news h3, #basket h3 { font-size: 20px; margin: 0 0 10px 0; }
.news-item { border-bottom: 2px solid #e7e7e7; margin: 0; padding: 16px 0; }
.news-item img { width: 60px; height: 50px; background: #333; float: left; margin: 0 10px 0 0; }
.news-item a { font-size: 11px; }

.news-item-large { border-bottom: 2px solid #e7e7e7; margin: 0; padding: 16px 0; }
.news-item:last-of-type	{ margin-bottom:60px; }

#menu { width: 900px; height: 38px; background: url(images/menu-bg.png) }
#menu ul { margin-left: 25px; }
#menu li { float: left; margin: 7px 15px 0 0; position: relative;}
#menu a { display: block; height: 23px; background: url(images/menu-out.png) 0 0 no-repeat; }
#menu a:hover, #menu a.selected { background-image: url(images/menu-over.png); }
#menu #menu-home { width: 68px; background-position: 0 0; }
#menu #menu-numbers { width: 88px; background-position: -68px 0; }
#menu #menu-call-solutions { width: 118px; background-position: -156px 0; }
#menu #menu-outbound-landlines { width: 162px; background-position: -274px 0; }
#menu #menu-business-services { width: 139px; background-position: -436px 0; }
#menu #menu-sim { width: 90px; background-position: -677px 0; }
#menu #menu-contact-us { width: 102px; background-position: -575px 0; }

#menu .submenu 				{ display: block; position: absolute; top: 100%; padding-top: 10px; left: 0; width: 110%; background:#096291; z-index: 500; margin: 0;
border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;}
#menu .submenu li			{ display: block; padding:5% 2%; width: 96%; margin:0; }
.submenu a,
.submenu a:visited	{ color: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px; text-indent:0 !important; background: none !important; height: auto !important;}
.submenu a:hover		{ background: #89a618 !important;}


#submenu { width: 900px; height: 29px; background: url(images/submenu-out.png); margin: 0 0 10px 0; }
#submenu ul { margin-left: 190px; }
#submenu li { float: left; }
#submenu a { display: block; height: 29px; background: 0 0 no-repeat; }
#submenu a:hover, #submenu a.selected { background-image: url(images/submenu-over.png); }
#submenu #submenu-local-01-02 { width: 114px; background-position: -190px 0; }
#submenu #submenu-0800 { width: 64px; background-position: -304px 0; }
#submenu #submenu-0845 { width: 65px; background-position: -368px 0; }
#submenu #submenu-0844 { width: 64px; background-position: -433px 0; }
#submenu #submenu-0871 { width: 69px; background-position: -497px 0; }
#submenu #submenu-03 { width: 50px; background-position: -566px 0; }
#submenu #submenu-0207-0208-london { width: 157px; background-position: -616px 0; }
#submenu #submenu-international { width: 127px; background-position: -773px 0; }

#rightSlider { position: relative; }
#basket #basketTotals { color: #09527D; font-size: 12px; margin: 15px 0 0 0; }
#basket #basketTotals label { display: block; width: 100px; float: left; clear: left; }
#basket #basketTotals span { text-align: right; display: block; width: 75px; float: left; }
#basket .basketheader { font-size: 10px; margin: 0 0 15px 0; }
#basket .basketitem { padding: 0 0 10px 0; margin: 0 0 10px 0; border-bottom: 1px solid #ccc; }
#basket .basketitem, #basket .basketitem a { font-size: 10px; }
#basket .b_number, #basket .b_option, #basket .b_setup, #basket .b_monthly { float: left; margin: 0; }
#basket .b_number, #basket .b_option {  width: 85px; }
#basket .b_number { color: #C02484; }
#basket .b_setup, #basket .b_monthly { width: 45px; text-align: right; }
#checkoutBtn { margin: 20px 0 10px 0;}
#basket .basketLinks { margin: 5px 0 0 0; }
#basket .basketLinks a { line-height: 1.5em; }

table.checkout { margin: 0 0 0 0; border-spacing: 0; border-collapse: collapse; width: 97%; }
table.checkout td, table.checkout th { padding: 10px 25px 10px 5px; text-align: left; font-size: 12px; font-weight: normal; }
table.checkout tr.number td { border-top: 1px solid #ccc; }
table.checkout td.number, table.checkout td.option { text-align: left; }
table.checkout .price { text-align: right; }
table.checkout td.number { color: #C02484; }
table.checkout th, table.checkout tr.totals td { color: #055F8F; font-size: 13px; }
table.checkout tr.option td { padding: 3px 25px 3px 5px; font-size: 10px; }
table.checkout tr.option-last td { padding-bottom: 15px; }
table.checkout tr.totals td { text-align: right; border-top: 2px solid #ccc; }

#footer { text-align: center; border-top: 1px solid #D9D9D9; padding: 20px 0 0 0; margin: 40px 0; position:relative;}
#footer, #footer a { font-size: 9px; text-decoration: none; }
#footer span { font-size: 11px; }
#footer img { margin: 30px auto 15px auto; }

#waffle { margin: 30px 0 0 0; }

#icons { margin: 20px 0 ; }
#icons td { vertical-align: top; padding: 5px 5px 10px 0; font-size: 11px; width: 240px }
#icons td.hover { font-size: 13px; }
#icons td span { font-weight: bold; }
#icons td.icon { padding: 0 5px; width: 86px; }

#boxes { width: 900px; height: 200px; margin: 20px 0 0 0; }
#boxes div { background: url(images/home-box-bg.png); width: 212px; height: 200px; float: left; margin-right: 17px; position: relative; }
#boxes div * { color: #fff; }
#boxes h4 { font-size: 16px; margin: 23px 0 0 32px; }
#boxes p { font-size: 11px; margin: 22px 36px 0 32px; }
#boxes a { display: block; position: absolute; bottom: 16px; left: 30px; width: 120px; height: 30px; }

#contact-form { margin: 0 0 1em 0; position: relative; }
#contact-form label { display: block; float: left; width: 100px; clear: left; }
#contact-form input.text, #contact-form select, #contact-form textarea { width: 250px; border: 1px solid #666; padding: 2px; }
#contact-form label, #contact-form input, #contact-form select, #contact-form textarea { margin: 0 0 1em 0; }
#form-loading { position: absolute; left: 0; top: 0; background: #fff; width: 400px; height: 470px;}

#checkout-form { margin: 0 0 1em 0; position: relative; }
#checkout-form label { display: block; float: left; width: 130px; padding-right: 10px; clear: left; }
#checkout-form input.text, #checkout-form select, #checkout-form textarea { width: 250px; border: 1px solid #666; padding: 2px; }
#checkout-form label, #checkout-form input, #checkout-form select, #checkout-form textarea { margin: 0 0 1em 0; }
#form-loading2 { position: absolute; left: 0; top: 0; background: #fff; width: 600px; height: 750px;}

#terms-of-sale ul { margin: 0 0 0 1em; list-style: disc; }
#terms-of-sale ul li { margin: 0 0 1em 0; }
#terms-of-sale ul li ul { margin: 1em 0 1em 1em; list-style: circle; }

div.number { display: block; float: left; margin: 0 45px 10px -7px; width: 116px; height: 30px; padding: 5px 0px 5px 10px; cursor: pointer; }
div.endrow { margin-right: 0; }
div.number .number { display: block; }
div.number .price { color: #09527D; font-size: 10px;}
div.number:hover { background: url(images/number-bg.png); }
div.number:hover * { color: #fff; }
div.number-added, div.number-added:hover { background: #fff; }
div.number-added *, div.number-added:hover * { color: #ccc !important; }

#plan-box { width: 280px; padding: 10px; background: #fff; border: 1px solid #ddd; position: absolute; z-index: 10; }
#plan-box select, #plan-box input { display: block; margin: 0 0 15px 0; padding: 2px; border: 1px solid #ccc; width: 130px; }
#plan-box a { cursor: pointer; }
#plan-box p { margin-bottom: 5px; }

#solutions-box { width: 400px; height:100%; padding: 10px; font-size: 10px; background: #fff; border: 1px solid #ddd; position: fixed; z-index: 20; left:50%; margin-left:-200px; top:0; overflow-y: scroll;}
#solutions-box #cp { font-size:1.2em; }
#solutions-box #cp imput	{margin-right:2em;}
#solutions-box #cp br		{display:none;}
#solutions-box a { cursor: pointer; }
#solutions-box p { font-size: 12px; }
#solutions-box p.small { font-size: 10px; }

#table_info { position: absolute; background: #fff; border: 1px solid #ddd; position: absolute; z-index: 10; padding: 20px 20px 30px 20px; width: 200px; top: 150px; right: 480px; }
#table_info p { font-size: 11px; }
#table_info a { text-decoration: none; position: absolute; left: 20px; bottom: 10px; }
#table_info_sb { position: absolute; top: 30px; right: -14px; height: 16px; width: 14px; background: url(images/infoBox-SB.png); }

.greybox { margin: 1.5em 0 2em 0; background: #ECECEC; border: 1px solid #ddd; padding: 10px 10px 10px 10px; }
.greybox img { margin: 0 0 1em 0; display: block; }

/* css text replace */
.imgreplace, #menu a, #submenu a, #boxes a { text-indent: -999px; overflow: hidden; }

/* javascript hide/show */
.js { display: none; }
.nonjs { display: block; }

#theNumber2{display: inline-block;}

.bg-green {background: #7da11a; padding:10px; }
.bg-green * {color: #fff !important;}
.bg-green p {font-size:14px !important;}
.bg-green h2 {font-size: 30px;}

/*	CALL RATE TABLE STYLES
----------------------------------------------------------*/
div.pricing-table									{ width: 900px; 
													  height: auto; 
													  background: url(images/pricing-table-bg.jpg) repeat-y center; 
													  border-radius: 5px;
													  -moz-border-radius: 5px;
													  -webkit-border-radius: 5px;
													  margin: 0px auto;
													  border: 1px solid c2c2c2;
													  padding-bottom: 20px;
													  border: 1px solid #ccc;
													}

table.callRates{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;	
	text-align:left;
	width: 835px;
	border: 0px;
	background-color: #f5f5f5;
	color: #444;
	margin: 0px auto;
}

	.callRates th									{ font-weight: normal;	}
		.callRates th h2 							{ margin: 20px 0px 10px;	font-size: 30px; color: #C02484; float: left; width: 780px;}
		
		.callRates th p								{ margin: 0px 0px 10px;	font-size: 10px; font-weight: bold; float: left; width: 780px;}

		.callRates th a:link 						{ position: relative; float: left; right: 10px; top: -45px; }
		
		.callRates a.single 						{ top: 10px !important;}
	.callRates td									{ padding: 3px 10px; border-right: 1px solid #ccc;	}
	.callRates tr.even								{ background: #e9e9e9; }
	
	.callRates .columnHeading						{ background-color: #09527D; color: #f0f0f0; font-weight: bold; }
	.callRates .subColumnHeading					{ font-weight: bold; color: #09527D; background: #dcdced; vertical-align: top; }
	
	.callRates .smallPrint							{ font-size: 9px; }
	.callRates .lastColumn							{ border-right: none; }
	
	.callRates a:link, .callRates a:visited 		{ color: #C02484; font-weight: bold; text-decoration: none;}
	.callRates a:hover								{ color: #09527D; }
	
	
#bottomSlide, #topSlide{ position: absolute; top:0px;left:0px;}
#topSlide { z-index: 5; width: 900px;}
#mySlider{ height: 269px; overflow: hidden;}
.myButton{ position: absolute; bottom: 25px; left: 65px; width: 350px; height: 30px; }
.myButton span	{ display: none; }

.smallerH1	{ font-size: 19px; line-height: 1.1em;}
.roundedCorners	{ border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.floatLeft	{ float: left; margin-right: 20px !important; margin-bottom: 0px !important;}
.greenBox label	{ font-size: 1.4em;  color: #FFF; line-height:1.6em; margin-right: 15px; }
.greenBox { margin: 0px 0 2em 0; border: 2px solid #9ec679; padding: 10px 10px 10px 10px; background: #7da11a;}
.greenBox a:link, .greenBox a:visited {
	background:url(images/white-arrow.png) no-repeat 230px center;
	color: #FFF;
	text-decoration: none;
	font-size: 1.8em;
	padding: 5px 10px;
	width: 255px;
	display: inline-block;
	border: 1px solid #9ec679;
	border-radius: 7px;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}
.greenBox a:hover { background-color: #9ec679; border-color: #FFF;}
#MakingCalls, #incomingCalls { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ccc; } 

#emailformopen {display:none;}


#email-box			{display: none; background:#09527D; border-radius:20px; padding:20px;width:500px;}
#email-box > h2		{line-height: 1.2em; margin-bottom: 10px;color: #fff;}
#email-box > h2:first-child	{font-weight: 900; font-size: 36px;}
#email-box a		{text-decoration:none; color:#fff;}
#requestedEmail		{width: 96%; padding: 2%;font-size: 20px; margin-bottom:20px;}
#requestedEmailSetup{margin-bottom:20px;}

#emailUpdate		{padding:7px; color: #fff; background:#C02484; border-radius:5px; font-size:16px; cursor:pointer;}
#emailinfobutton	{margin-left:10px; border-radius:50%; width:1.2em; padding:0.33em; text-align:center;line-height:1.2em; color:#fff; background: #8ba713; display:inline-block; text-decoration:none; font-family:Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;}

#websiteinfobutton	{ font-size: 1.4em; font-weight: bold;   margin: 0 40px;}
	
#emailCancel		{float:right; margin-top:10px; color: #fff;}
#emailbadge			{background:url(images/business-emails.png) center center no-repeat; position:absolute; top:50px; right:5px; width:150px;height:150px;}
  
#emailtooltip		{display: block; width: 200px; height: auto; padding: 10px; background:#FFC; border-radius:10px; position: absolute; bottom: 10px; right:100px;}


#emailtooltip ul	{ margin-left:20px; margin-bottom: 10px;}
#emailtooltip li	{ list-style: outside disc;}
#emailtooltip a		{color:#C02484; }

#websitetooltip		{display: block;
    width: 200px;
    height: auto;
    padding: 10px;
    background: #C02484;
    border-radius: 10px;
    position: absolute;
    bottom: 50px;
    right: 80px;
	border:2px solid #fff;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

#websitetooltip p 	{color: #fff;}


/* iphone style pop-up */
.phone-overlay			{position:absolute; top:0; left:0; height:100%; width: 100%; background:rgba(0,0,0,0.8);z-index:600;}
.phone-holder			{display:none; position:fixed; left:0; right: 0; margin:2em auto;}
.phone					{background:url(images/iphone.png) top left no-repeat; background-size:contain; display:block; box-sizing:border-box;}
.phone form 			{display:block;  height: 100%; padding:0.5em}
.phone .bubble			{border-radius:0.5em; background:#8ba713; padding:0.66em; box-shadow:1px 1px 5px rgba(0,0,0,0.3);margin-bottom: 25px; position:relative;}
.phone .bubble:after	{position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: #8ba713 transparent transparent transparent;
    bottom: -20px;
    left: 30px;
	
	}
.bubble.response		{ background:#C02484;  }
.bubble.response:after	{border-color:#C02484 transparent transparent transparent;}
.phone form input		{display:block; width:98%; margin-bottom:0.66em;}
.phone .bubble h2		{font-size:2em; margin-bottom:0.5em;}
.phone .bubble h2,
.phone .bubble h2 *,
.phone .bubble strong,
.phone .bubble strong a	{color: #fff; text-decoration:none;}

#messageAlert			{display:none; position: fixed; bottom:8%; right:8%; padding:1em; border-radius:1em; background:#C02484; text-decoration:none; color:#fff;box-shadow: 4px 4px 10px rgba(0,0,0,0.8);
    border: 2px solid #fff;}	
#messageAlert:before	{content:url(images/new-message.png); margin-right:0.5em; display:block; float:left;}
.phone-holder			{display:none;}

#close-phone			{position:absolute; top:0; right:-2em; padding:0.33em; border:2px solid #fff; color: #fff; border-radius:5px; font-weight:bold; text-decoration:none;}

	.business-box-price-plan { width:100%; margin-right:0; display:inline-block; vertical-align:top;}

.business-box-price-plan h3 {text-align:center; padding: 15px 0; background:#7da11a; font-size:3em; margin-bottom:0;color:#fff;}
.business-box-price-plan.pro h3 {background:#1b70b3;}

.business-box-price-plan p.price {text-align:center; padding: 15px 0; background:#999; font-size:2em;margin-top:0; color:#fff;}

.business-box-price-plan li {padding:10px 0; border-bottom:1px solid #e5e5e5; font-size:1.2em;}
.business-box-price-plan ul.check-list { margin-left:2em;}
.business-box-price-plan ul.check-list li	{list-style:url(images/green-tick.png) outside;}

.business-box-price-plan .greenBox a:link, .greenBox a:visited {max-width:90%; background:url(images/white-arrow.png) no-repeat 95% center;}

#bus-in-box-notification {position:fixed; bottom:0px;background:url(images/bottom-strap.svg) no-repeat; width:100%; text-align:center; background-size:100% auto;}

#bus-in-box-notification p{padding:40px 0 15px;color: #fff; margin-bottom:0;}
#bus-in-box-notification p a:link,#bus-in-box-notification p a:visited{
	font-size: inherit;
    color: inherit;
    text-decoration: inherit;
    font-weight: inherit;}
#bus-in-box-notification p a:hover{
	text-decoration:underline;	
}

/* portrait tablet  */
@media screen and (min-width:30em) and (max-width:64.9999em) and (orientation: portrait) {
	.phone-holder			{width: 300px;  display:block;}
	.phone { width:300px; height: 600px; padding: 109px 28px 109px 29px;}
	.business-box-price-plan { width:47%; margin-right:5%;}
	.business-box-price-plan.pro {margin-right:0;}
	#bus-in-box-notification p{font-size:1.6em;}

}
/* landscape tablet  */
@media screen and (min-width:40em) and (orientation: landscape) {
	.phone-holder			{width: 570px; padding-bottom:100px; display:block;}
	.phone { width:309px; height: 600px; padding: 109px 25px 109px 29px;}
	.business-box-price-plan { width:47%; margin-right:5%;}
	.business-box-price-plan.pro {margin-right:0;}
	#bus-in-box-notification p{font-size:2em;}

}

/* laptop  */
@media (min-width:64.063em){
	.phone-holder			{width: 340px; display:block;}
	.phone { width:340px; height: 660px; padding: 118px 27px 116px 30px;}
	.business-box-price-plan { width:47%; margin-right:5%;}
	.business-box-price-plan.pro {margin-right:0;}
	#bus-in-box-notification p{font-size:2em;}

}
/* Desktop  */
@media (min-width:100em){
	.phone-holder			{width: 281px; display:block;}
	.phone { width:281px ; height: 546px ; padding: 97px 21px 96px 25px;}
	.business-box-price-plan { width:47%; margin-right:5%;}
	.business-box-price-plan.pro {margin-right:0;}
	#bus-in-box-notification p{font-size:2em;}

}