/* Loho screen.css */

html, body {
	height: 100%;
	/* Don't add any vertical margin/padding to html/body, as you'll push
	   the footer off the bottom of the page. */
	min-width: 900px;
}

body {
	background: #fff url(../img/bg_smile.png) bottom right fixed no-repeat;
}

/* Generic styles */

h2, h3 {
	color: #444;
}

abbr, acronym {
	border-bottom: none;
}

a:link, a:visited {
	font-weight: bold;
	color: #40596a;
}

a:hover, a:active {
	font-weight: bold;
	color: #789fab;
}

ul {
	padding-left: 0;
}

ul li {
	list-style: none;
	padding-left: 2em;
	background: transparent url(../img/bull_blue.png) 1em 0.5em no-repeat;
}

ul ul li {
	background-image: url(../img/bull_red.png);
}

/* Helper classes */

h2.replace {
	color: #e01b51;
	background-repeat: no-repeat;
	height: 0; 
	overflow: hidden;
	padding-top: 35px; 
}

h2.howcanwehelp          { background-image: url(../img/headings/howcanwehelp.png); }
h2.support               { background-image: url(../img/headings/support.png); }
h2.services              { background-image: url(../img/headings/services.png); }
h2.aboutus               { background-image: url(../img/headings/aboutus.png); }
h2.careers               { background-image: url(../img/headings/careers.png); }
h2.directdebit           { background-image: url(../img/headings/directdebit.png); }
h2.domainrenewal         { background-image: url(../img/headings/domainrenewal.png); }
h2.contactus             { background-image: url(../img/headings/contactus.png); }
h2.telecoms              { background-image: url(../img/headings/telecoms.png); }
h2.consultancy         { background-image: url(../img/headings/consultancy.png); }
h2.virtualmachinehosting { background-image: url(../img/headings/virtualmachinehosting.png); }
h2.webandemailhosting    { background-image: url(../img/headings/webandemailhosting.png); }
h2.numberlookuptool    { background-image: url(../img/headings/numberlookuptool.png); }
h2.supportcalendar    { background-image: url(../img/headings/supportcalendar.png); }

.twocol {
	background: #fff url(../img/line_grey.png) 50% 0 repeat-y;
	background-color: rgba(255, 255, 255, 0.6); /* IE will ignore this */
	border: 1px solid #ccc;
	border-bottom-color: #f0f0f0;
	border-right-color: #f0f0f0;
}

.twocol > div {
	position: relative;
	width: 48%;
	min-height: 10em;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: top;
	padding: 0 0 1.2em 0.5em;
	zoom: 1;
	*display: inline;
}

.twocol h3 {
	color: #e01b51;
	margin-top: 0;
	margin-bottom: 0.5em;
	padding-top: 0.66em;
}

.twocol hr {
	height: 1px ! important;
	margin: 0;
}

.twocol div p {
	margin-bottom: 1em;
}

.twocol div p.lm {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 1.1em;
	margin: 0 0.8em 0.8em 0;
}

.logos {
	horizontal-align: center;
}
.logos img {
	margin: 10px;
	border-style: none;
	vertical-align: middle;
}

.newsflash {
	margin: 0 auto;
	background: #fdf5d8;
	border: 1px solid #e1be94;
	padding: 1em 1em 0.4em 1em;
}

.newsflash h3 {
	color: #e01b51;
	margin-bottom: 0.5em;
}

.newsflash dt {
	font-weight: normal;
	color: #AC9171;
	border-top: 1px solid #e1be94;
	padding: 0.5em 0 0 0;
}

.newsflash dt:first-child, .newsflash dt.first {
	border-top: none;
	padding: 0;
}

.newsflash dd {
	margin: 0 0 0.5em 0;
}

/* These are separate rules to please IE8's overzealous
 * ignoring of the technically-not-valid :last-child */
.newsflash dd.last {
	margin: 0;
}
.newsflash dd:last-child {
	margin: 0;
}

#stripe-left, #stripe-right {
	background: #40596a;
	position: fixed;
	top: 0; bottom: 0;
	width: 2em;
	z-index: 99;
}

#stripe-left { left: 0; }
#stripe-right { right: 0; }

/* Header */

#head {
	margin: 1em 0;
}

h1#logo {
	font-family: sans-serif;
	margin: 0;
	width: 200px;
	height: 110px;
	position: relative;
}

h1#logo span {
	background: url(../img/logo.png) left top no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

h1#logo:hover span {
	background-position: left -110px;
}

h1#logo-control {
	font-family: sans-serif;
	margin: 0;
	width: 100px;
	height: 55px;
	position: relative;
}

h1#logo-control span {
	background: url(../img/logo-control.png) left top no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

h1#logo-control:hover span {
	background-position: left -55px;
}

/* Navigation */

#nav {
	position: relative;
	height: 110px;
	margin: 1em 0;
}

#nav ul {
	float: right;
	display: none;
	list-style: none;
	padding: 0;
}

#nav ul li {
	background: none;
	margin: 0;
	padding: 0;
	float: left;
	display: block;
}

#nav a {
	outline: none ! important;
	font-weight: normal;
	text-decoration: none;
	margin: 0;
}

#nav > ul {
	display: inline-block;
	font-size: 1.3em;
	height: 50px;
	line-height: 50px;
	margin: 30px 0 0 0;
	background: #fff url(../img/bg_shadow_reverse.png) right bottom no-repeat;
	border: 1px solid #ccc;
}

#nav li.active > ul {
	position: absolute;
	top: 82px;
	right: 0;
	margin: 0 auto;
	font-size: 0.9em;
	height: 28px;
	line-height: 28px;
	display: inline-block;
}

#nav li.active.noshowsub > ul {
	display: none;
}

#nav > ul > li {
	background: none;
	border-right: 1px solid #ccc;
}

#nav > ul > li.last {
	border-right: 0;
}
#nav > ul > li:last-child {
	border-right: 0;
}

/* Style for <a> of top-level active <li> */
#nav li.active > a {
	font-weight: bold;
	color: #000;
	cursor: default;
}

#nav li.active.nopage > a {
	font-weight: normal;
	color: #40596a;
	cursor: pointer;
}

/* Add generous padding per default. */
#nav > ul > li > a {
	padding: 10px 0.6em;
}

/* Wipe out the button shading for <li class="active">. */
#nav > ul > li.active > a {
	background: #fff;
	padding-top: 15px;
	padding-bottom: 15px;
}

#nav > ul > li.active.nopage > a {
	background: transparent;
}

/* Subnav styling */
#nav ul ul li a {
	padding: 0 0 0 0.3em;
}

#nav ul ul li a:after {
	font-weight: bold;
	color: #aaa;
	content: " \00B7";
}

#nav ul ul li.last a:after {
	content: '';
}
#nav ul ul li:last-child a:after {
	content: '';
}

#main {
	font-size: 1.1em;
	margin: 0 0 1em 0;
}

#intro {
	font-size: 1.8em;
	color: #888;
	margin-bottom: 1em;
}

#intro strong {
	font-weight: normal;
	color: #333;
}

/* Sticky footer */

.container {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -55px;
}

#foot, #foot-push {
	clear: both;
	height: 55px;
}

#foot {
	width: 809px; /* same as .container from blueprint/screen.css */
	margin: 0 auto;
	padding: 0;
	text-align: left;
}

#foot p {
	margin: 0;
	padding: 0;
	line-height: 18px;
}

#foot-wrap {
	display: inline-block;
	padding: 9px 0.8em;
	background: #fff url(../img/bg_shadow.png) left top no-repeat;
	border: 1px solid #ccc;
	border-bottom: none;
}

/* Rounded corners */

.newsflash, #nav > ul, .twocol {
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}

#foot-wrap, #nav > ul > li.active > a {
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-topright: 7px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

#nav > ul > li.active:first-child > a, #nav > ul > li.active.first > a {
	-webkit-border-bottom-left-radius: 7px;
	-moz-border-radius-bottomleft: 7px;
	border-bottom-left-radius: 7px;
}

#nav > ul > li.active.last > a {
	-webkit-border-bottom-right-radius: 7px;
	-moz-border-radius-bottomright: 7px;
	border-bottom-right-radius: 7px;
}
#nav > ul > li.active:last-child > a {
	-webkit-border-bottom-right-radius: 7px;
	-moz-border-radius-bottomright: 7px;
	border-bottom-right-radius: 7px;
}

#main h3 {
  color: #E01B51;
}

#main h4 {
  color: #E01B51;
}

#main h5 {
  color: #40596A;
}

#main table {
  margin-left: 50px;
  margin-right: auto;
}

#main table.nowrap td {
  white-space: nowrap;
}

#main b.red {
  color: #E01B51;
  font-weight: bold;
}

#support {
  display: block;
}

#managed {
  display: block;
}

span#showsupportlink {
  display: none;
}

span#supportfirstpara {
  display: inline;
}

span#showmanagedlink {
  display: none;
}

span#managedfirstpara {
  display: inline;
}

#main table.heading {
  margin-left: 0px; 
  width: 400px; 
}

#main table.heading td {
  padding: 0px 0px 0px 0px;
}

div#searchresults {
  width: 500px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: hidden; /* Gets replaced in JS when needed */
}

div#searchresults table {
  margin-left: 0px;
}

#main .trademark-attribution {
  text-align: right;
  font-size: 6pt;
}

#main span[title] {
  color: #557788;
  border-bottom:1px dashed #557788;
}