/*******************************************
COLOURS
Yellow:         #ffc702
Brihgt Pink:    #f0447c
Bright Pink 2   #ED0F67
EE447C
Pale Pink:      #ffc1c1
Purple          #743F88
*******************************************/
/*******************************************
DEFAULT STYLES
*******************************************/

html {/* Stops flickering of background images in IE6*/
  filter: expression(document.execCommand("BackgroundImageCache", false, true));}

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, a {
    margin: 0;
    padding: 0;
    border: 0;} 

body, p, div, td, li {
    color: #222;
    font: 12px/18px Verdana, sans-serif;}

h1, h2, h3, h4, h5, h6 {
    color: #EE447C;
    margin-bottom: 18px;
    line-height: 24px;
    font-weight: normal;}

h1 {font-size: 24px;}
h2 {font-size: 22px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}

a:link,
a:visited {
    color: #f0447c;
    text-decoration: none;}

a:focus,
a:hover,
a:active {
    color: #ffc702;
    text-decoration: underline;}

/*******************************************
ELEMENT MARGINS
*******************************************/

p,
table {margin-bottom: 18px;}
    
ul,
ol {margin: 0 0 18px 36px;}

ul ul,
ol ol,
ul ol,
ol ul {margin-bottom: 0;}

blockquote {
    color: #EE447C;
    margin: 18px;
    font-style: italic;}


/*******************************************
LAYOUT
*******************************************/
html {
    background: url("../images/swirl.gif") 100% 256px no-repeat;}
    
body {}

#banner {
    position: relative;
    top: 20px;
    left: 35px;
    width: 501px;
    margin-bottom: -256px;
    z-index: 3;}
    
    #banner img {
        z-index: 3;}
       
    #layout {
        position: relative;
        top: 18px;
        width: 98%;
        margin:auto;
        z-index: 1;}
    
        #header {
            background-color: #FCD5E0;
            color: #208AE3;
            border-bottom: 10px solid #f0447c}
            
            #actionArea {
                float: right;
                color: #208AE3;
                width: 480px;
                height: 225px;
                background: url(../images/butterfly.gif) 375px 200px no-repeat #FCD5E0;}
                
                #donateButton {
                    font-family: Verdana,sans-serif; 
                    clear: both;
                    float: right;
                    margin: 5px 10px 5px 5px;
                    padding: 0;
                    height: 28px;
                    width: 100px;
                    color: #fff;
                    font-weight: bold;
                    border: 0;
                    background: url(../images/donate.gif) 0 1px no-repeat;
                    cursor: pointer;}
                
                #loginButton {
                    font-family: Verdana, sans-serif; 
                    float: right;
                    clear: both;
                    padding: 0;
                    margin: 5px 10px 5px 5px;
                    height: 28px;
                    width: 100px;
                    color: #fff;
                    font-weight: bold;
                    border: 0;
                    background: url(../images/login.gif) 0 1px no-repeat;
                    cursor: pointer;}
                    
                    
                #joinButton {
                    font-family: Verdana, sans-serif; 
                    float: right;
                    clear: both;
                    margin: 64px 10px 5px 5px;
                    padding: 0;
                    height: 28px;
                    width: 100px;
                    color: #fff;
                    font-weight: bold;
                    border: 0;
                    background: url(../images/login.gif) 0 1px no-repeat;
                    cursor: pointer;}
                    
                    #external #joinButton {visibility: hidden;}
                    
                #actionArea p {
                    text-align: right;
                    clear: both;
                    margin: 5px 10px 0 0;
                    color: #743F88;
                    font-weight: bold;
                    font-size: 14px;}
        
        #topNav {
            background-color: #f0447c;
            height: 3px;
            border-bottom: 18px solid #fff;}
                   
        #leftPanel,
        #content {vertical-align: top;}
        
        #leftPanel {
            padding: 0;
            width: 210px;
            background:  #f0447c;}
        
        #home #content p {color: #EE447C;}
        
        #content {padding: 24px 9px 18px 0;}
            
            #default #content {width: 100%;}
            
            #content h1 {margin: 0 0 18px 24px;}
            
            #minigenBody,
            #youtube_player {
                margin: 0 24px 18px 24px;}
                
                #minigenBody h1 {margin-left: 0;}
                
                #linksPanel {
                    float: right;
                    width: 200px;
                    padding: 5px;
                    margin-left: 18px;
                    position: relative;
                    top: -48px;
                    color: #743F88;}
                    
                    #facebook_div {
                        height: 150px;}
                    
                        #facebook_widget {
                            color: #743F88;}
                    
                    #twitter_div,
                    #facebook_div {
                        margin-bottom: 18px;}
                    
                    #linksPanel h2 {
                        color: #743F88;
                        margin: 0;
                        font-size: 14px;
                        font-weight: bold;}
                    
                    #linksPanel ul {
                        margin: 0;
                        padding: 0;
                        list-style: none;}
                        
                        #linksPanel li {
                        color: #743F88;
                        margin-bottom: 9px;
                        font-size: 11px;}
       
       
        #buttonPanelContainer {
            /*clear: both;*/
            margin: 36px 0 0 18px;}
        
        #buttonPanel {
            margin: 0;
            position: relative;
            height: 185px;
            float: left;
            background: url(../images/pictureButtonBg.png) top left;}
        
        .pictureButton {
            width: 200px;
            height: 150px;
            float: left;
            margin: 18px 9px;
            font-size: 14px;
            vertical-align: bottom;}
            
            #ie6only #buttonPanel {padding-bottom: 0;}
            
            .pictureButton img {
                margin: 0;
                border: 0;}
            
            .pictureButton a:link,
            .pictureButton a:visited {
                margin: 9px 0 9px 0;
                color: #fff;
                font-weight: bold;}
                
            .pictureButton .buttonLink {
                position: relative;
                top: -28px;
                left: 9px;
                z-index: 2;}
                
             #button1 {
                margin-left: 0;
                background: url(../minigen/resources/picture_box_1.jpg) 3px 3px no-repeat;}   
                
             #button2 {
                background: url(../minigen/resources/picture_box_2.jpg) 3px 3px no-repeat;}   
                
             #button3 {
                margin-right: 0;
                background: url(../minigen/resources/picture_box_3.jpg) 3px 3px no-repeat;}   
            
   
        #bottomNav {
            height: 24px;
            text-align: center;
            background: url(../images/footer-end.gif) bottom right no-repeat #f0447c ;}
            
            #supportersTagline {
                color: #fff;
                text-align: right;
                font-weight: bold;
                padding-right: 18px;}
                
            #supportersTagline a:link,
            #supportersTagline a:visited {
                color: #FFF;
                z-index: 5;}

            
/*******************************************
ARTICLES
*******************************************/
#articleContainer {}

.utilityArticleCategory {}
.utilityArticleCategory h1 {}
.utilityArticleCategory h2 {}

.secondaryArticleCategory {margin-left: 30px;}
.secondaryArticleCategory h1 {}
.secondaryArticleCategory h2 {}

.articleItem {margin-left: 10px;}
.articleBody {margin-left: 10px;}

/*******************************************
NEWS
*******************************************/
 #newsCornerBox {
    width: 190px;
    margin: 24px 10px 0 10px;
    padding: 0 0 25px 0;
    background: url("../images/news-top-left.gif") top left no-repeat #f6aebc;}
    
    .isIE #newsCornerBox {
        padding: 0;}

#newsPanel {
    padding-top: 10px;
    margin: 18px 9px;
    color: #743F88;}

    .isIE #newsPanel {
        padding-top: 0;
        margin: 9px 9px 0 9px;}    
    
#newsPanel h2 {
    color: #743F88;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 0 5px;
    line-height: 18px;}    
    
#newsPanel ul {
    padding:0;
    margin:0;
    list-style-type:none;}
        
#newsPanel ul li ul li {
    margin: 0 0 9px 0;
    padding: 0;}
    
    .isIE #newsPanel ul li ul li {margin: 0;}
    
    .primaryNewsCategoryTitle {
        display: none;
        padding: 0;}
     
    .secondaryNewsCategoryTitle {
        font-weight:bold;
        font-size:120%;
        color:#AAA33B; 
        padding-bottom:10px;}
        
    .newsItemTitle {
        font-size: 11px;
        color: #EE447C;
        font-weight:bold;
        clear: both;
        margin-left: 5px;}
                
    .newsItemDate {
        font-size: 11px;
        color: #EE447C;
        font-weight: bold;
        margin-left: 5px;}
    
    .newsItemSummary {
        color: #743F88;
        padding-bottom:0;
        margin-left: 5px;
        padding-right: 9px;
        font-size: 11px;}
        
    .newsItemLink {
        font-size: 11px;
        float: right;
        padding-right: 9px;}
        
    .newsItemLink a:hover,
    .newsItemLink a:active,
    .newsItemLink a:focus {color: #743F88;}

    
/*******************************************
SEARCH BOX
******************************************
#search {
    width: 190px;
    float: left;
    margin: 5px 9px 0 9px;
    font-weight: bold;
    font-size: 14px;
    color: #fff;}


#search form {
    float: right;
    margin-top: -22px;}

.searchField {
    width:100px;}

.searchButton {
    color:blue;}
    

/*******************************************
SEARCH Results
*******************************************/
.searchResultHeader { 
    font-size:14px;
    font-weight:bold;}

.searchResultAbstract {
    font-style : italic;
    padding-bottom:15px;}

.docHeadings {
    font-weight:bold;}

.searchSubHeader {
    font-size:14px;}

    
/*******************************************
CUSTOM DIV VERTICAL MENU
*******************************************/
div.sdmenu {
    margin: 0;
    position: relative;
	width: 210px;
    font: 11px/18px Verdana, sans-serif;
	color: #fff;}
    
    div.sdmenu div {
    	overflow: hidden;}
        
        div.sdmenu div:first-child {}
        
        div.sdmenu div span,
        div.sdmenu a {
            font-weight: bold;
        	cursor: pointer;
            display: block !important; /*For GOOD browsers*/
            background:  #f0447c;
            color: #FFF;
            font:  11px/24px Verdana, sans-serif;
            height: auto !important;
            height: 1%; /*For IE*/
            text-decoration: none;
            padding-left: 5px;
            text-align: left;}
        
        div.sdmenu div span {
            background: url(../images/sortup.gif) 98% 10px no-repeat #f0447c;}

            
            div.sdmenu div span:hover,
            div.sdmenu a:hover {text-decoration: underline;}
    
    div.sdmenu div.collapsed {height: 24px;}
           
        div.sdmenu div.collapsed span {
            background: url(../images/sortdown.gif) 98% 10px no-repeat #f0447c;}
        
    div.sdmenu div a:link,
    div.sdmenu div a:visited {
        display: block !important; /*For GOOD browsers*/
        background: #fcd5e0;
        color: #f0447c;
        font:  11px/18px Verdana, sans-serif;
        height: auto !important;
        height: 1%; /*For IE*/
        text-decoration: none;
        padding: 4px 4px 4px 10px;
        text-indent: 0;
        text-align: left;}
        
        
        
    div.sdmenu div a:hover,
    div.sdmenu div a:active,
    div.sdmenu div a:focus {
    	text-decoration: underline;
        background: #fcd5e0;
        color: #f0447c;}

    div.sdmenu a.current,
    div.sdmenu div a.current {
        font-weight: bold;}
    
/*******************************************
MEMBERS NAVIGATION
*******************************************/ 
  
#membersNav {
    font-size: 10px;
    width: auto;
    position: relative;
    top: -24px;
    color:white; 
    margin: 0 0 0 18px; 
    height: 48px;
    z-index: 99;}
    
#memNavLeft {
    width: 30px;
    background: url(../images/picture-bar-start.png) bottom right no-repeat;}  

#memNav {
    background: url(../images/pictureButtonBg.png);}
    
#memberNameDisp {
    font-size: 10px;
    color: #f0447c; 
    text-align: right;
    line-height: 24px;
    height: 48px;
    padding-right: 10px;
    background: url(../images/pictureButtonBg.png);}
    
    #memNavRight {
    width: 30px;
    background: url(../images/picture-bar-end.png) bottom right no-repeat;}

ul#membersNavigation {
    width: 100%;
    margin: 0;
    list-style: none;
    text-align: center;} 
    
    ul#membersNavigation li {
    font-size: 10px;
        float: left;
        display: inline;
        padding: 0 4px;
        text-align: center;
        border-right: 1px solid #fdf3f2;
        line-height: 14px;
        color: #f0447c; }
        
     ul#membersNavigation li.lastLi {border: 0;}
        
        ul#membersNavigation a:link,
        ul#membersNavigation a:visited {
           color:#f0447c;  }
        
        ul#membersNavigation a:hover,
        ul#membersNavigation li:hover,
        ul#membersNavigation li:hover a,
        ul#membersNavigation li.iehover,
        ul#membersNavigation li.iehover a {
            color: #f0447c;
            text-decoration: underline;}

/*******************************************
LOGIN BOX
*******************************************/


#loginForm .inputBox {
    font-family: Verdana, sans-serif; 
    font-size: 11px; 
    width: 95px; 
    border: solid rgb(200,200,200) 1; 
    text-align: left;}
    
#loginSubmit {
    padding: 0;
    height: 28px;
    width: 100px;
    color: #fff;
    font-weight: bold;
    font-family: Verdana, sans-serif; 
    border: 0;
    background: url(../images/login.gif) 0 1px no-repeat;
    text-align: center;
    cursor: pointer;}    

#submitBox {text-align: center;}   

/*******************************************
Thirdgen forms
*******************************************/
.generalForm {
    background: url(../images/pictureButtonBg.png) top left;
    border-collapse:collapse;}

    .generalForm td {
        border:2px solid #ffffff; 
        padding:3px; 
        vertical-align:top}

.formPromptStyle {
    color:#f0447c; 
    font-weight:bold;}
    
    .formSubPromptStyle {
        font-size: 10px;
        font-weight: normal;}

.formInputStyle {width:200px;}

.formLabelStyle {
    background-color:#ee447c; 
    color:#ffffff; 
    font-weight:bold;}

.formErrorStyle { 
    color:#ff0000; 
    font-weight:bold;}

.formMultiListHeading { 
    font-weight:bold;}

.tabLink {
    width: 130px;
    cursor: pointer;
    background-color:#e0e0e0;
    font-weight:bold;}

.tabDisable {
    width:130px;
    background-color:#e0e0e0;
    font-weight:bold;}

.tabhead {
    background-color:#e0e0e0;
    height:25px;
    font-weight:bold;}

.tabButton	{
    background-color:#e0e0e0;
    height:25px;
    text-align:right;}

.formDataScrollingDiv {
    scrollbar-arrow-color:blue;
    scrollbar-face-color:#e7e7e7;
    scrollbar-3dlight-color:#a0a0a0;
    scrollbar-darkshadow-color:#888888;
    border:1px solid gray;}