/*
 * This stylesheet is the core stylesheet for layout level elements.  This
 * stylesheet will be included on all pages and is appropriate for all
 * destination media.
 */
@import url(media.css);
@import url(inlines.css);

/*For IE*/
html {
	border: none;
}

/*main layout */
body {
	background: url(../images/common/bgr.gif) #e6e6e6 repeat-x top;
	color: #s0000;
	font-family:Arial,Verdana,Helvetica,Sans-Serif;
	line-height:1.5em;
	font-size: 0.75em;
}

a {
	color:black;
	text-decoration:underline;
}

a:hover {
	text-decoration:none;
}

#page {
	margin: 10px auto 10px auto;
	background-color:white;
	width: 950px;
}

div.right {
	float: right;
	margin: 0 0 0.5em 1em;
	clear: right;
}
div.left {
	float: left;
	margin: 0 0 0.5em 1em;
	clear: right;
}

/* Top Banner Image */
#topbanner img {
	border: none;
	display: block;
}

#topbanner {
	background-color: #ed1c24;
}

#topbanner #bannerad {
	float: right;
}

#topbanner #myswapslogin{
    float:right;
    width:138px;
    height:63px;
    padding:0 5px 0 10px;
    margin:25px 0;
    background: url(../images/common/myswapslogin.png) no-repeat top left;
}

#topbanner #myswapslogin h2{
    font-size:1.2em;
    margin-bottom:5px;
}

/* The top level which contains the top level navigation and search box */
#toplevel {
	padding: 0;
	margin: 0;
	background: url(../images/common/nav1-bgr.gif) repeat-x top;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
}

#toplevel li {
	line-height: 34px;
	list-style: none;
	white-space: nowrap;
	display: inline;
	float: left;
	color: white;
}

#toplevel li a{
	display: block;
	float: left;
	padding: 0 15px;
	text-decoration: none;
	color: white;
}

#toplevel li a:hover {
	background: url(../images/common/nav1-hover.gif) repeat-x top;
}

#toplevel li span.selected {
	float: left;
	background: url(../images/common/nav1-hover.gif) repeat-x top;
	color: white;
	padding: 0 15px;
}

#toplevelnav a.onpath {
	background-color: #FFCCFF;
	color: #000000;
}

#toprightnav {
	padding: 0;
	margin: 0;
	float: right;
}

#topleftnav {
	padding: 0;
	margin: 0;
	float: left;
}

/* top nav drop down boxes*/
#topleftnav li ul {
	position: absolute;
	width: 12em;
	left: -999em;
	padding: 0 ;
	font-weight: normal;
	font-size: 100%;
	margin: 34px 0 0 0; /*ie attatches to the bottom of the element, everything else to the top, set to 0 and it works in ie, but nothing else*/
	clear: both;
	background: transparent url(../images/common/rounded/droptop.gif) no-repeat top left;
	z-index: 2000;
	top: 123px;
	padding: 10px 0 0 0;
}

#topleftnav li ul li .dropbottomleft {
	height: 10px;
	background: transparent url(../images/common/rounded/dropbl-trans.gif) no-repeat top left;
	margin-right: 10px;
	font-size: 2px;
}

#topleftnav li ul li .dropbottomright {
	height: 10px;
	width: 10px;
	background: transparent url(../images/common/rounded/dropbr-trans.gif) no-repeat top right;
	float: right;
	margin-top: -10px;
	font-size: 2px;
}

#topleftnav li ul li.end {
	height: 10px;
	background-color: transparent;	
}

#topleftnav li ul li{
	position: relative;
	display: block;
	white-space: normal;
	float: left;
	margin: 0;
	width: 100%;
	padding: 0;
	height: 100%;
	line-height: normal;
	background-image: none;
	background-color: #999999;
}
 
#topleftnav li ul li .seltl,
#topleftnav li ul li .seltr,
#topleftnav li ul li .selbl,
#topleftnav li ul li .selbr {
	height: 5px;
	overflow: hidden;
	background-image: none;
}

#topleftnav li:hover ul, #topleftnav li.sfhover ul {
	left: auto;
}

#topleftnav li ul li:hover .seltl,
#topleftnav ul.dropdown li.sfhover  .seltl {
	background: #8e8a8c url(../images/common/rounded/dropseltl.gif) no-repeat top left;
	margin: 0 7px;
	padding: 0 0 0 10px;
}

#topleftnav li ul li:hover .seltr,
#topleftnav ul.dropdown li.sfhover .seltr {
	background: #8e8a8c url(../images/common/rounded/dropseltr.gif) no-repeat top right;
}

#topleftnav li ul li:hover .selbl,
#topleftnav ul.dropdown li.sfhover  .selbl {
	background: #8e8a8c url(../images/common/rounded/dropselbl.gif) no-repeat top left;	
	margin: 0 7px;
	padding: 0 0 0 10px;
}

#topleftnav li ul li:hover .selbr,
#topleftnav ul.dropdown li.sfhover .selbr {
	background: #8e8a8c url(../images/common/rounded/dropselbr.gif) no-repeat top right;
}

#topleftnav li ul li:hover a,
#topleftnav ul.dropdown li.sfhover a {
	color: #fcaf17;
	background-image: none;
	background-color: #8e8a8c;
}

#topleftnav li ul li a,
#topleftnav li ul li span.selected {
	text-transform: none;
	color: black;
	float: none;
	padding: 0 0 0 10px;
	margin: 0 7px;
	display: block;
}

/*override span.selected on dropdowns so its obvious which page the user is on*/
#topleftnav li ul li span.selected {
	background-image: none;
	font-weight: bold;
}

#topleftnav li ul li:hover span.selected,
#topleftnav ul.dropdown li.sfhover span.selected {
	background: #999999;
}

#topleftnav li ul.dropdown li.selected .seltl,
#topleftnav li ul.dropdown li.selected .seltr,
#topleftnav li ul.dropdown li.selected .selbl,
#topleftnav li ul.dropdown li.selected .selbr {
	background-image: none;
	background: #999999;
}

/* The main table used to split the left, central and right hand columns */
#maintable {
	clear: both;
	width: 100%;
	border: none;
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	height: 500px;
}

/* The left hand column which contains navigational elements */
#lefthandcolumn {
	/*width: 180px;*/
	vertical-align: top;
	background-color: #FFCCFF;
	padding: 0;
	margin: 0;
}

/* The central column which contains the main article contents */
#centralcolumn {
	/*min-width: 600px;*/
	vertical-align: top;
	margin: 0;
	padding: 0 1em 0 1em;
}

/* The right hand column which contains content related to an article */
#righthandcolumn {
	width: 250px; /*was 225*/
	vertical-align: top;
	padding: 0 15px;;
	margin: 0;
	float: right;
}

/**
 * The intro text (although it's just a paragraph normally it will be
 * emphasised in some fashion)
 */
.intro {
	font-weight: bold;
}

/* The right hand column (related bits and pieces) */

/*if the right hand sidebar makes graphic weirdness in ie6, reenable this*/ 
.righthandside .hd {
	width: 100%; /*145px; any bigger and ie6 borks, depending on the width of #righthandcolumn*/
	/* setting .hd left and right margin also works, but behaves differently in ie6 to firefox*/
}

.righthandside {
	/*line-height:normal;*/
	font-size: 0.9em;
}


.righthandside p {
	margin: 5px 0 5px 0;
	overflow: hidden;
}

.righthandside hr {
	/*ie uses color, FF and opera use background-color*/
	color: #aaa;
	background-color: #aaa;
	width: 90%;
	margin: 0 auto;
}

.righthandside .bordered .cl li a {
	color: black;
	list-style: none outside none !important;
}

.righthandside img {
	vertical-align: top;
	padding: 10px 0;
}

.righthandside a {
	vertical-align: top;
	padding: 0 5px;
	text-decoration: none;
}

.righthandside a:hover {
	text-decoration: underline;
}

.righthandside strong {
	font-weight: bold;
}

.righthandside em {
	font-style: italic;
}

/* The footer area (and its navigation) */
#footer {
	background: url(../images/common/footer-bgr.gif) repeat-x top;
	color: #ffffff;
	font-size: 10px;
	height: 45px;
	line-height: 45px;
	padding: 0 20px;
	margin: 10px 0 0 0;
}

#footerutilnav {
	list-style: none outside none;
	margin: 0;
	float: left;
}

#footerutilnav li {
	display: inline;
	color: white;
	padding: 0 0 0 0.2em;
}

#footerutilnav a,
#footerright a {
	color: #ffffff;
	padding: 0 3px;
	text-decoration: underline;
}

#footerutilnav a:hover,
#footerright a:hover {
	text-decoration: none;
}

#footerutilnav span.selected {
	color:white;
	text-decoration:none;
}

#footerright {
	list-style: none outside none;
	float: right;
	margin: 0;	
}

/* titles etc.*/
h1 {
	color: #ff6600;
	font-size: 1.5em;
	margin-bottom: 0.5em;
}

h2 {
	font-size: 1em;
	margin-bottom: 1em;	
	
}

h3 {
	color: #410155;
	font-size: 1.2em;
}

p {
	font-size: 1em;
}

/*rounded boxes */
/* needs a <div style="clear:both;"></div> at the bottom of the containing element if floated elements are
used inside it*/

.bordered {
	margin: 35px 0 0px 0;
	list-style: none outside none;
}

.hd {
	background: #ffda00;
	float: left;
	margin: -25px 0 11px;
	position: relative;
}

.tr h3,
.tr h1  {
	font-size: 14px;
	line-height: 20px;
}

.top, .top-,
.bot, .bot- {
	background: url(../images/common/box-top.gif) no-repeat left top;
	height: 6px;
	overflow: hidden;
}

.top- {
	background: url(../images/common/box-top-.gif) no-repeat right top;
}

.bot {
	background: url(../images/common/box-bot.gif) no-repeat left top;
}

.bot- {
	background: url(../images/common/box-bot-.gif) no-repeat right top;
}

.bordered .content {
	border-left: 6px solid #ff9900;
	border-right: 6px solid #ff9900;
	height: 1%;
	padding: 0 15px 15px;
}

/* rounded corners*/

/*puts a in background image at each corner, then repeats an image along the top, bottom etc.
to do the border 
position: relative is needed on these to make ie6 not randomly hide bits...
height:100%; is needed so ie7 doesn't randomly hide other bits...
*/

.t, .b, .l, .r, .bl, .br, .tl, .tr {
	/*display: inline;
	width: 0px;*/
	position: relative;
	/*height: 100%;*/
}

.t {
	background-image: url(../images/common/rounded/dot.gif);
	background-position: top;
	background-repeat: repeat-x;
	/*width: 0;
	white-space: pre;*/
}

.b {
	background: url(../images/common/rounded/dot.gif) ;
	background-position: bottom ;
	background-repeat: repeat-x;
}

.l {
	background: url(../images/common/rounded/dot.gif);
	background-position:  left;
	background-repeat:  repeat-y;
}

.r {
	background: url(../images/common/rounded/dot.gif) ;
	background-position: right;
	background-repeat:  repeat-y;
}

.bl {
	background: url(../images/common/rounded/bl.gif) ;
	background-position: bottom left;
	background-repeat:  no-repeat;	 
}

.br {
	background: url(../images/common/rounded/br.gif) ;
	background-position: bottom right;
	background-repeat:  no-repeat;
}

.tl {
	background: url(../images/common/rounded/tl.gif) ;
	background-position: top left;
	background-repeat:  no-repeat;
}

.tr {
	background: url(../images/common/rounded/tr.gif) ;
	background-position: top right;
	background-repeat:  no-repeat;
	padding: 10px;
}

/*=== Styling Forms ===*/
input.btn {
	background: none;
	border: 0;
	margin: 0;
	padding: 0
}

select {
	padding: 1px
}

/*rollover buttons*/

a.rollover,
.selected a.rollover:hover {
	background: url(../images/common/buttons/button-left-off.png) no-repeat top left;
	height: 32px;
	display: block;
	text-decoration: none;
	padding-top: 8px;
	margin: 5px 0 0;
	padding-bottom: 5px;
}

a.rollover:hover {
	background: url(../images/common/buttons/button-left-on.png) no-repeat 0 0;
	text-decoration: none;
	cursor:pointer;
}

a.rollover:hover span.rollovercontent {
	background: url(../images/common/buttons/button-right-on.png) no-repeat top right;
}

span.rollovercontent {
	background: url(../images/common/buttons/button-right-off.png) no-repeat top right;
	color: white;
	font-size: 14px;
	font-weight: bold;
	line-height: 27px;
	margin-top: 12px;
	float: left;
	padding: 3px 10px 15px 0;
	margin: -8px 0 0 10px;
	text-align: center;
}

.selected .rollover,
.selected .rollover:hover {
	background: url(../../../images/common/buttons/button-left-grey.png) no-repeat top left ;
}

.selected span.rollovercontent,
.selected span.rollovercontent:hover {
	background: url(../../../images/common/buttons/button-right-grey.png) no-repeat top right;
}

#logindialog .rollovercontent {
	width: 104px;
}

/*contact agent buttons takes wrong width on ie6 without a fixed width */
.contactagent {
    width:11em;
 }

/* modal dialog boxes */

.modal {
}

.modal hr {
	border: none 0;
	border-top: 2px dashed #aaa;/*the border*/
	height: 2px;/*whatever the total width of the border-top and border-bottom equal*/
}

.modal .title a {
	font-weight: bold;
}

.modal .content {
	padding: 5px 25px;
}

.modal .logo {
	float: left;
}
.modal .closebutton img {
	float: right;
	cursor: pointer;
}


.modal form .inputboxes {
	padding: 15px 0;
}

.modal .title {
	clear: both;
}

.modal .left {
	float: left;
}

.modal .right {
	float: right
}

.modal .rememberme label {
	float: none;
	display: inline;
}

.modal input.column {
	width: 280px;
	height: 18px;
}

.modal input.full {
	width: 624px;
	height: 18px;
}

label.x-form-item-label {
	margin: 0;
}

/*errors*/
ul.errors li{
	font-weight: bold;
	color: #ff0000;	
}

/*misc*/
.cl {
	clear: both;
}

.cl ul {
	padding-left: 0px;
}