/* This CSS is used by the e-service launch pages [mw_jan2006] */
body {
margin: 0;
padding: 0;
font-family: arial, helvetica, sans-serif;
font-size: 0.8em;
line-height: 1.4em;
}

/* Left hand navigation */
div#leftnav {
position: absolute;
left: 0px;
top: 100px;
padding: 0px;
margin: 0px;
width: 180px;
}

div#leftnav li a { 
display: block; 
}

ul#level1 {
list-style-type: none;
margin: 0;
padding: 0;
}

ul#level1 li { display: inline; }

ul#level1 li a {
color: #639;
background: #dccaec url(/_images/arrow-bullet.gif) no-repeat 6px 10px;
padding: 5px 5px 5px 15px;
border-top: solid 1px #fff;
text-decoration: none;
}

ul#level1 li a:hover { 	
color: #333; 
background: #c2a3e0 url(/_images/arrow-bullet2.gif) no-repeat 6px 10px; 
}

ul#level1 li.selected a, ul#level1 li.selected a:hover {
color: #fff;
background: #9966cc url(/_images/arrow-bullet3.gif) no-repeat 6px 10px;
}

/* FIRST (service name) horizontal bar and bottom border */
#service {
border-bottom: 1px solid #DCCAEC;
position: absolute;
width: 100%;
top: 0;
/* for IE5 */
height: 29px;
voice-family: "\"}\""; 
voice-family: inherit;
height: 28px;
}

#service p {
margin-top: .4em;
font-size: 110%;
letter-spacing: .1em;
color: #666;
}

/* Welsh link */
#toplink {
position: absolute;
top: 0;
text-align: right;
width: 98%;
}

#toplink p {
margin-top: .5em;
font-size: 100%;
}

#toplink p a {
text-decoration: none;
color: #666;
letter-spacing: 0;
}

#toplink p a:hover {
text-decoration: underline;
color: #000;
letter-spacing: 0;
}

/* SECOND (Start here) horizontal bar and bottom border */
#benefit {
background-color: #96C;
border-bottom: 1px solid #000;
position: absolute;
width: 100%;
padding-top: 0;
top: 29px;
}

#benefit p {
margin: 0;
font-size: 110%;
color: #fff;
padding-top: 0.2em;
height: 25px;
}

/* THIRD horizontal bar */
.main {
background-color: #DCCAEC;
border-top: 1px solid #000;
border-bottom: 1px solid #9966CC;

position: absolute;
width: 100%;
top: 54px;
margin: 0;
padding: 0;

height: 26px;
voice-family: "\"}\""; 
voice-family: inherit;
height: 27px;
}

.maininside {
border-bottom: 1px solid #C2A3E0;
height: 25px;
voice-family: "\"}\""; 
voice-family: inherit;
height: 26px;
}

/* Footer links */
li.grey2 {
border-bottom: 1px solid #C2A3E0;
padding: 0;
margin: 0;
width: 100%;
float: left;
list-style: none;

height: 27px;
voice-family: "\"}\""; 
voice-family: inherit;
height: 26px;
}

li.grey2 a {
display: inline;
float: none;
text-decoration: none;
color: #666;
}

li.grey2 a:hover {
text-decoration: underline;
color: #000;
}

/* Actual footer */
.footerholder ul {
position: absolute;
top: 4em;
margin: 0;
padding: 0;
width: 100%;
}

#footer2 {
position: absolute;
margin: -2em 0 0 0;
width: 100%;
}

#footer2 ul {
border-bottom: 0;
}

#footer2 li.grey2 {
background-color: #fff;
border-top: 1px solid #000;
border-bottom: 0px;
width: 100%;
}

/* IE only */
* html ul {
padding-left: 0px;
margin-left: 16px;
}

/* Content starts here */
div#content {
float: left;
width: 76%;
position: absolute;
display: block;
top: 109px;
left: 199px;
margin: 0;
padding: 0;
}

div#content h2 {
margin-top: 0;
color: #96C;
font-size: 1.5em;
line-height: 1.4em;
}

div#content h3 {
color: #000;
font-size: 1em;
line-height: 1.4em;
margin-bottom: 0.2em;
}

div#content h4 {
color: #96C;
font-size: 1em;
line-height: 1.4em;
margin: 1em 0 .2em 0;
}

div#content p {
display: block;
width: 90%;
margin: 0 0 .4em 0;
}

div#content ul {
margin-top: -0.4em;
border-top: 0;
}

/* Launch button - border */
#but, #but-welsh, #but-survey, #but-survey-welsh {
background-color: #c2a3e0;
border: 1px solid #000;
margin-top: 0.6em;
width: 19em;
}

#but-welsh, #but-survey-welsh {
width: 23em;
}

/* Actual launch button */
#launchbutton, #launch-survey {
background-color: #E6D9F1;
color: #000;
	
border-top: 1px solid #fff;
border-right: 1px solid #96C;
border-bottom: 1px solid #96C;
border-left: 1px solid #fff;
	
display: block;
padding: 0;
text-align: center;
font-weight: bold;
text-decoration: none;
}

a#launchbutton:hover, a#launch-survey:hover{
border-top: 1px solid #DCCAEC;
border-right: 0px solid #DCCAEC;
border-bottom: 0px solid #DCCAEC;
border-left: 1px solid #DCCAEC;	
	
margin: 1px 0 0 1px;
text-decoration: none;
}

.spacebefore {
padding-top: 1.2em;
}

/* Two-columns on index page */
.leftcol {
font-weight: bold;
color: #000;
width: 40%;
position: relative;
top: 0;
margin: 0;
}

.rightcol {
position: relative;
top: -1.3em;
left: 40%;
color: #000;
width: 60%;
	
padding-top: 0.3em;
margin: 0;
margin-bottom: -0.8em;
}

.rightcol ul {
margin-bottom: 0;
}

.green, .red, .blue, .purple {
width: 80%;
padding: 0.3em;
padding-bottom: 0;

float: left;
border-top: 3px solid #fff;
margin: 0;
}

.green { background-color: #CFC; }
.red { background-color: #FCC; }
.blue { background-color: #CFF; }
.purple { background-color: #FCF; }

/* Resets from two-column content */
.onecol {
width: 90%;
padding: 0;
margin: 0;
}

/* Messages - Use this DIV for all messages. 
If a message needs to display ONLY IF THE SERVICE IS AVAILABLE, put the "message" DIV inside a "launch" DIV. The "launch" DIV is hidden when the css_nobuttons.css is activated. The css_nobuttons.css also hides the no-JavaScript NOSCRIPT message. 

If a message needs to display at all times (for example, if i explains why the ervice s currently unavailable) use the "message" DIV on its own.
*/
.message, .message-white {
display: block;
background-color: #FF0;
color: #000;
width: 80%;
	
padding: .3em;
border: 1px solid #000;
margin-top: .3em;
margin-bottom: .3em;
}


.message-white {background-color: #fff;}

div#content .message p,  
div#content .message-white p {width: 100%;}

/* Hides launch button and related content. 
Overridden by separate CSS (eservice_showlaunch) if JavaScript is enabled (because JavaScript writes the link) */
.launch {
display: none; 
position: relative;
left: 0;
top: 0;
clear:both;
}

/* From DWP styles - Remove Padding from UL */
ul {
padding-left: 20px;
margin-left: 0px;
}
/* IE only */
* html ul {
padding-left: 0px;
margin-left: 20px;
}

ul.dwp-circle li {
list-style-image: url(/_images/circle-bullet.gif);
margin-left: -4px;
}

<!-- ************************************ TABLE CSS mw Sept 2011 ************************************ -->

table, th, td{text-align:left;}

table {margin:2.5em 0 1.5em 0;}

th {text-align:left; vertical-align:top; padding:.4em .4em .3em 1em;font-size:125%;color:#fff;border-bottom:1px solid #fff;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

td {vertical-align:top;padding:.7em;border-bottom:1px solid #999;}

th.dont-use{background:#b71234;}
th.use-this{background:#008542;width:60%;}

td.dont-use{background:#f6e5ef;}
td.use-this{background:#e0f5cc;}

td ul, td ul li{margin:0; padding-top:.2em;padding-bottom:0;}

*html td ul {margin-left:1.2em;} /* for IE6 */

.message {padding-left:1em;border-color:#ccc;margin-bottom:1em;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;}

<!-- *************************************** END TABLE CSS **************************************** -->