/* CSS for My Money Woney */
/* Author Liz Jamieson of Purple Parasol Ltd */

/* General Layout  */

div.spacer{
	clear:both;
	font-size:0;
	line-height:0;
}

body{
  background-color:#B4F84D;
  width:100%;
  text-align:center;
  margin:0;
  padding:0;
  color:#444444;
  font-family: Arial;
  font-size: 100%;
}


/* whole page backgrounds */

div#outerheader{
  width:100%;
  text-align:left;
  height:210px;
  background-image: url(../site-images/header-back1.jpg);
}

div#outermainmenu{
  width:100%;
  text-align:left;
  background-image: url(../site-images/menu-back1.jpg);
  background-repeat: repeat-x;
  height:50px;
  border-top:1px #9E9E9E solid;
  border-bottom:1px #FFFFFF solid;
}

div#outertopcontent{
  width: 100%;
  background-image: url(../site-images/topmain-back1.jpg);
  background-repeat: repeat-x;
  text-align:left;
  background-color:#D6D3FE;
  border-bottom:5px #C9C9FE solid;
}

div#outerbottomcontent{
  width: 100%;
  background-color:white;
  text-align:left;
  border-bottom:1px #727272 solid;
}

div#outermain-blue{
  width: 100%;
  background-image: url(../site-images/topmain-back-blue.jpg);
  background-repeat: repeat-x;
  text-align:left;
  background-color:#D6D3FE;
  border-bottom:5px #C9C9FE solid;
}

div#outermain-pink{
  width: 100%;
  background-image: url(../site-images/topmain-back-pink.jpg);
  background-repeat: repeat-x;
  text-align:left;
  background-color:#F8EAFB;
  border-bottom:5px #FDC0F2 solid;
}

div#outermain-white{
  width: 100%;
  background-image: url(../site-images/topmain-back-white.jpg);
  background-repeat: repeat-x;
  text-align:left;
  background-color:#FFFFFF;
  border-bottom:5px #DADADA solid;
}

div#outerfooter{
  width:100%;
  text-align:left;
  height:100px;
  background-image: url(../site-images/footer-back2.jpg);
  background-repeat: repeat-x;
  background-color: #b4f84d;
  padding:0;
  margin:0;
  height:110px;
}



/* individual page layouts */

div#header{
  background-color: transparent;
  width:950px;
  margin: 0 auto;
  height:210px;
}

div#mainmenu{
  background-color: transparent;
  width:950px;
  margin: 0 auto;
  height:50px;
}

div#topcontent{
  width: 950px;
  margin: 0 auto;
  padding: 0;
  background-color: transparent;
  padding: 10px 10px 10px 10px;
}

div#bottomcontent{
  width: 950px;
  margin: 0 auto;
  background-color: transparent;
  padding: 10px 10px 10px 10px;
  padding-bottom:20px;
}

div#footer{
  background-color: transparent;
  width:950px;
  height:100px;
  margin: 0 auto;
  padding:0;
  padding-top: 10px;
  text-align:center;
}







div#maincolumns{
  width: 950px;
  background-color: transparent;
  margin: 0 auto;
  padding-top:10px;
}

div#mainplain{
  width: 950px;
  background-color: transparent;
  margin: 0 auto;
  padding-top:20px;
  padding-bottom:10px;
}

div#lefthalf{
  width: 455px;
  padding: 0;
  background-color: transparent;
  padding: 10px 10px 10px 10px;
  float: left;
}

div#righthalf{
  width: 455px;
  padding: 0;
  background-color: transparent;
  padding: 10px 10px 10px 10px;
  float: right;
}






div#leftheader{
  background-color: transparent;
  float:left;
  width:670px;
  height:200px;
  background-image: url(../site-images/logo.jpg);
  background-repeat: no-repeat;
}

div#headertext{
  background-color: transparent;
  width:500px;
  margin-top:165px;
  margin-left:108px;
}

div#rightheader{
  float:right;
  width:250px;
}

div#topmenu{
  width:185px;
  float:right;
  padding-top:10px;
}





/* Styling Elements */

a.nav, a.nav:link, a.nav:visited {
    display:block;
    outline:none;
    float:right;
    width:75px;
    height:22px;
    background:#ECEAFF;
    border:2px outset #C9C9C9;
    margin-top:1px;
    margin-left:5px;
    text-align:center;
    text-decoration:none;
    font-family:verdana, arial, sans-serif;
    font-size:12px;
    color:#5F5F5F;
    line-height:20px;
    overflow:hidden;}
a.nav:hover {color:#000000; background:#DCFCAB;   }
a.nav:active {color:#000000; background:#FCC5CB; border:2px inset #C9C9C9; outline:none;}

a.footer, a.footer:link, a.footer:visited {
    display:inline;
    outline:none;
    margin:auto 0;
    width:75px;
    height:22px;
    margin-top:1px;
    margin-left:15px;
    text-align:center;
    font-family:verdana, arial, sans-serif;
    font-size:12px;
    color:#525252;
    line-height:20px;
    overflow:hidden;}
a.footer:hover {color:#000000;    }
a.footer:active {color:#000000;  outline:none;}


p{
  font-size: 80%;
}


div.xsnazzy{
  margin:5px 0px 10px 0px;
  padding:0;
}

.xsnazzy h1, .xsnazzy h2, .xsnazzy p {margin:0 10px; letter-spacing:1px;}
.xsnazzy h1 {font-size:140%; color:#252525; padding-left: 20px;}
.xsnazzy h2 {font-size:120%; color:#FFFFFF; border:0; }
.xsnazzy p {padding-bottom:0.5em; padding-left:10px; color:#000000;}
.xsnazzy h2 {padding-top:5px; padding-bottom:3px; padding-left:10px;}
.xsnazzy {background: transparent; margin:1em;}

.xsnazzy em {display:block; width:0; height:0; color:#d8d8ee; overflow:hidden; border-top:12px solid #fff; border-left:12px dotted transparent; border-right:12px dotted transparent; margin-left:50px;}
/* hack for IE5.5 */
* html .xsnazzy em {width:24px; height:12px; w\idth:0; hei\ght:0;}
/* bubble background  - next line*/
.xsnazzy span {display:block; width:0; height:0; color:#fff; overflow:hidden; border-top:10px solid #C655EF; border-left:10px dotted transparent; border-right:10px dotted transparent; margin-left:52px; margin-top:-15px;}
* html .xsnazzy span {width:20px; height:10px; w\idth:0; hei\ght:0;}

.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {display:block; overflow:hidden; font-size:0;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {height:1px;}
.xb4, .xb5, .xb6, .xb7 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #fff;}

.xb1 {margin:0 8px; background:#fff;}
.xb2 {margin:0 6px; background:#fff;}
.xb3 {margin:0 4px; background:#fff;}

.xb4 {margin:0 3px; background:#C655EF; border-width:0 5px;}               /* bubble background  */
.xb5 {margin:0 2px; background:#C655EF; border-width:0 4px;}               /* bubble background  */
.xb6 {margin:0 2px; background:#C655EF; border-width:0 3px;}               /* bubble background  */
.xb7 {margin:0 1px; background:#C655EF; border-width:0 3px; height:2px;}   /* bubble background  */
.xboxcontent {display:block; background:#C655EF; border:3px solid #fff; border-width:0 3px;} /* bubble background  */

div#headertext h2{
  color: #FFFFFF;
  font-size: 100%;
}
div#footer span.company{
  color:#404040;
  font-size: 70%;
  padding-top:40px;
  display: block;
}

#topcontent a.link2{
	background:url(../site-images/left_link_bg.gif) 0 0 no-repeat #F0FFFF;
	padding:0 0 0 54px;
	font:bold 18px/39px Georgia, "Times New Roman", Times, serif;
	color:#144848;
	width:390px;
	height:41px;
	display:block;
	text-decoration:none;
}
#topcontent a.link2:hover{
	background:url(../site-images/left_link_bg_hover.gif) 0 0 no-repeat;
}

#mainmenu ul.nav{
	width:730px;
	height:40px;
    list-style-type: none;
    margin-top: 6px;
    margin-left:0px;
    padding-left:0px;
}
#mainmenu ul.nav li{
	float:left;
	margin:0;
	padding:0;
}
#mainmenu ul.nav li a{
	display:block;
	margin:0 25px 0px  0px;
    padding:5px;
	font-weight:bold;
    font-size:13px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    line-height: 35px;
	color:#fff;
	background-color:inherit;
	text-decoration:none;
    outline:none;
}
#mainmenu ul.nav li a:hover{
	color:#CCFF00;
    text-decoration: underline;
    outline:none;
    text-shadow: #6374AB 20px -12px 2px;
}

#outertopcontent h1{
    margin:0px;

}






a.ovalbutton{
background: transparent url('../site-images/oval-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}

a.ovalbutton span{
background: transparent url('../site-images/oval-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

a.ovalbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden;
width: 100%;
}