/*------------------------------------------------------------------------------------------------*/
/*-                                            STLYES.CSS                                        -*/
/*-                     THIS IS USED TO DECLARE TEXT STYLES AND CONTENT STYLES ONLY              -*/
/*-                                   IT DOES NOT DECLARE LAYOUT.                                -*/
/*------------------------------------------------------------------------------------------------*/

/*set overall body text colour, set a base font size of 62.5% which is 10px and a 
  base line height for the whole document, the percentage of 62.5% which is a 10px 
  line-height is aleady set in the reset style sheet*/
body {
 color: #3a3939;
 font: 62.5%/1.6em Arial, Verdana, Sans-Serif
}
/*################################################### COPY STYLES ####################*/

/*Set website wide styles for everything swirl can out put*/
/*anything that is outside of the base styles can be redeclared after to override the 
  base style, quoteboxes for example*/
#maincontainer {
 font-size: 1.3em;
 line-height: 1.6em
}

#maincontainer h1, #dialog h1 {
 color: #c358b8;
 font-size: 2.1em;
 line-height: 1.2em;
 margin: 0px 0px 15px 0px;
 padding: 0px 0px 0px 0px
}

#maincontainer h2 {
 color: #c358b8;
 font-size: 1.4em;
 margin: 0px 0px 20px 0px
}

#maincontainer .store-cont h2 {
 color: #c358b8;
 font-size: 1.3em;
 margin: 0px 0px 0px 0px;
font-weight:bold;
}

#maincontainer h3 {
 color: #333;
 font-weight: bold;
 margin: 0px 0px 0px 0px
}

#maincontainer h4 {
 color: #003579;
 font-size: 1.0em;
 font-weight: bold;
 margin: 0px 0px 0px 0px
}

#maincontainer p {
 margin: 0px 0px 20px 0px
}

#maincontainer a {
 color: #c358b8;
 font-weight: bold;
 text-decoration: none
}

#maincontainer a:hover {
 text-decoration: underline
}

#maincontainer strong {
 font-weight: bold
}

#maincontainer em {
 font-style: italic
}

#maincontainer ul {
 list-style: url(../images/bullet.gif);
 margin: 0px 0px 10px 20px;
 padding: 0px 0px 0px 0px
}

#maincontainer ul li {
 list-style: url(../images/bullet.gif);
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 10px 10px
}

#maincontainer ol {
 list-style: decimal;
 margin: 0px 0px 10px 20px;
 padding: 0px 0px 0px 0px
}

#maincontainer ol li {
 list-style: decimal;
 padding: 0px 0px 10px 10px
}

/* start to declare more specific stylings if required if they are slightly different to the base styles*/
/* a linked h2 needs to redeclared as the browser will use defaults for example*/
#maincontainer h2 a {
 color: #003579;
 font-size: 1.4em;
 margin: 0px 0px 20px 0px
}

#maincontainer ul.SiteMap {
 list-style: none
}

#maincontainer ul.SiteMap li {
 list-style: none
}


/*Page styles*/


#maincontainer #homeContent p {
text-shadow: 0px 1px #dcdcdc;
text-align:center;
color:#000;
font-weight:bold;
font-size:1em;
}

/*dialog styles*/

#dialog {
padding: 20px 40px 30px 40px;
}

#dialog p {
color:#6e6e6e;
 font-family:Arial , Verdana, Sans-Serif;
font-size:1.2em;
padding-bottom:10px
}

#dialog p.di-intro {
padding: 18px 0 18px 0;
margin:0 0 10px 0;
border-top:solid 1px #cfcfcf;
border-bottom:solid 1px #cfcfcf;
}

/*Stores page*/


#maincontainer .store-cont p {
margin:0;
}

#maincontainer .store-cont p.offer {
color:#b322a4;
}



/* ############################################# QUOTE BOXES ###################################*/

/*styling for the quoteboxes and contents if that looks different to the base styling of swirl output*/
/*for example lists maybe different in the quote boxes than the main document*/
.quotes {
 color: #0e3465;
 font-size: 0.9em;
 line-height: 1.4em
}

.quotestop {
 color: #fff
}

.quotes p {
 margin: 0px 0px 10px 0px
}

#maincontainer .quotes h4 {
 color: #7b7b7b;
 font-size: 0.9em;
 font-weight: normal;
 margin: 0px 0px 10px 0px
}
/*############################################## .NET PAGER STYLING ###############################*/

/*used for gridviews if used*/
#maincontainer tr.pager a {
 color: #696969;
 height: 35px;
 padding: 0px 0px 0px 3px;
 text-decoration: underline;
 width: 11px
}

#maincontainer tr.pager span {
 color: #005983
}

/*######################################FOOTER STYLES###############################*/

/* base footer styles, different footer elements maybe require extra declaration if different*/
#footer {
 color: #91207d;
}

#footer a {
 color: #91207d;
 text-decoration: none
}

#footer a:hover {
 text-decoration: underline
}

ul.ft {
float:left;
}

ul.ft img {
margin:5px 0 5px 0;
}

ul.ft li {
font-size:1.35em;
}

ul.ft li.ft-head {
color:#cbcbcb;
font-size:1.9em;
padding: 0 0 10px 0;
font-family: "Myriad Pro", Myriad, Helvetica, Arial, sans serif;}

ul.ft li a{
margin: 3px 0 3px 0;
}

ul#b1 {
border-right: solid 1px #514d4d;
padding-right:70px;
margin-right:70px;
}

ul#b3 {
border-left: solid 1px #514d4d;
padding-left:70px;
margin-left:70px;
}






/*################################################################################################
########################### FORM ELEMENTS STYLING ###############################################*/

#dialog div.form_element{
 clear: both;
margin: 10px 0px 0px 0px;
 width: 100%;
float:left;
height:auto;
overflow:hidden;}

.form_element label{
 color: #616161;
 float: left;
 font-size: 14px;
 font-weight: bold;
 line-height: 15px;
 margin: 0px;
 padding: 6px 5px 0px 0px;
 text-align: left;
 width: 135px/*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.form_element span label{
 float: none;
 font-weight: normal
}

.textboxes {
 background: #fff;
 border: solid 1px #b2b2b2;
 color: #5e5e5e;
 font-size: 14px;
 height: 21px;
 margin: 0px 0px 0px 0px;
 padding: 3px 3px 3px 3px;
 vertical-align: top;
 width: 270px;
 float:right;
}

#dialog select {
 border: solid 1px #b2b2b2;
height:27px;
width:279px;
 padding: 3px 3px 3px 3px;
float:right;
}

/*Required field asterix*/
.asterix {
 color: #b74cb4
}
/*used on a label if you need to display an error with a form, login for example*/
span.error {
 color: #FF0000;
float:right;
clear:both;
padding: 1px 0 3px 0;
display:block;
}

#btn-cont {
clear:both;
width:100%;
text-align:right;
overflow:hidden;
height:auto;
padding: 15px 0 0;
}

#btn-cont input {
float:right;
margin-bottom:5px;
}

#btn-cont a {
float:right;
clear:both;
color: #b74cb4
}

/* ############################################### EXPANDABLE BOXES ###############################*/

/*Styling for the things you click on*/
#maincontainer a.MenuTop {
 background: url('../images/expand2.gif') no-repeat;
 border-bottom: none;
 color: #fff;
 cursor: pointer;
 display: block;
 font-weight: bold;
 padding: 5px 0px 6px 30px;
 width: 625px;
}
/*by default a link underlines on hover, turn it off*/
#maincontainer a.MenuTop:hover {
 text-decoration: none
}
/*class to change too when clicked*/
#maincontainer a.MenuTopon {
 background: url('../images/expand.gif')
}
/*container for the expandable content*/
.expandable_box {
 padding: 10px;
 width: 635px;
}