/***********************************************/
/* 2col_rightNav.css                        /***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

/*** link styles****/

a:link, a:visited, a hover {
    color: #FF3333;
    text-decoration: none;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
}

a:hover {
	/*font-size: small;
	font-style: normal;*/
	color: #FF3333;
	font-weight: bolder;
}
/* overrides decoration from previous rule for hovered links */

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6
{
    margin-top: 0px; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px;
    text-align: left;
    text-indent: 4px;
}
img
{
    /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    padding: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
a img
{
    /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    padding: 5px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

a:hover, a:active, a:focus {
    /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* Devices between 480-1024px */
@media screen and (min-width:481px) and (max-width:5000px) 
{
/* ~~this fixed width container surrounds the other divs~~ */
.container {
    background-position: center top;
    width: auto;
    max-width: 960px;
    background: #F0F0F0;
    margin: 0 auto;/* the auto value on the sides, coupled with the width, centers the layout */
    text-align: left;
    position: center;    
    vertical-align: top;
    background-image: url('../Images/content_bkgd.jpg');
    background-size: auto;
    background-repeat: no-repeat;
    /*-webkit-overflow-scrolling:touch; overflow:auto;*/ /*corrects the scrolling functionality for ipad users*/
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header
{
    background-position: center top;
    background-color: #999999;
    background-image: url('../Images/background/banner_bkrd.gif');
    background-repeat: no-repeat;
    z-index: 1000;
}
/* ~~ The Navigation Bar ~~ */

.navigation
{
    width: 95%; /*Modified from fixed 960 width*/
    padding: 8px;
    margin: 0; /* the auto value on the sides, coupled with the width, centers the layout */
    text-align: left;
    background-color: #C0C0C0;
    color: #FFCC00;
    font-family: Univers 57 Condensed;
    font-size: 12;
    font-weight: bolder;
    text-transform: uppercase;
    vertical-align: middle;
    text-indent: 14px;
    border-spacing: 5px;
}

/* ~~ These are the columns for the layout. ~~ 

*/
.sidebar1 {
	float: right;
	width: 180px;
	padding-bottom: 10px;
	background-color: #CCC;
	color: #000;
}
.boxFloatRight {
    border-style: double;
    padding: 10px;
    margin: 10px;
    float: right;
}
.xFloatRight {
    margin: 10px;
    float: right;
}

.content
{
    padding: 5px 5px 5px 5px; /*top right bottom left*/
    width: 95%;
    max-width: 950px; 
    float: left;
    font-size: small;
    vertical-align: top;
    text-align: left;
    overflow: hidden;
    text-indent: 0px;
    margin: 0;
    
  
}

.content a:link, a hover {
	color: #FF3333;
	text-decoration: none;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
}

/*.content a:hover {
        font-size: small;
        font-style: normal;
        color: #FF3333;
        font-weight: bolder;
    }
.content a:visited {
        font-size: small;
        font-style: normal;
        color: #FF3333;
        font-weight: bolder;
    }*/

.contentFullScreen {
	padding: 10px 0;
	width: 100%; /*Modified from fixed 950px*/
	float: left;
	font-size: x-small;
    z-index: 1;
}
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}


/* Devices 480px & below */
 @media screen and (min-width:320px) and (max-width:480px) {

        /* ~~this fixed width container surrounds the other divs~~ */
        .container {
            background-position: center top;
            min-width: 320px;
            max-width: 480px;
            width: auto;
            background: #F0F0F0;
            margin: 0 auto;
            /* the auto value on the sides, coupled with the width, centers the layout */ text-align: left;
            position: relative;
            vertical-align: top;
            /*background-image: url('../Images/content_bkgd.jpg');*/
            /*background-size: auto;*/
            /*background-repeat: no-repeat;*/
            -webkit-overflow-scrolling: touch;
            overflow: auto; /*corrects the scrolling functionality for ipad users*/
        }

        /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
        .header {
            background-position: center top;
            background-color: #FFFFFF;
            background-image: url('../Images/Icons/Icon-1224-100x200.gif');
            background-repeat: no-repeat;
            z-index: 1000;
        }
        /* ~~ The Navigation Bar ~~ */

        .navigation {
            max-width: 480px;
            width: 100%;
            padding: 8px;
            margin: 0; /* the auto value on the sides, coupled with the width, centers the layout */
            text-align: left;
            background-color: #C0C0C0;
            color: #FFCC00;
            font-family: Univers 57 Condensed;
            font-size: medium;
            font-weight: bolder;
            text-transform: uppercase;
            vertical-align: middle;
            text-indent: 14px;
            border-spacing: 5px;
        }

        .content {
            padding: 10px 0;
            width: 98%;
            max-width: 470px;
            float: left;
            font-size: medium;
            vertical-align: top;
            text-align: left;
            overflow: hidden;
            text-indent: 0px;
        }

        .contentFullScreen {
            padding: 10px 0;
            width: auto;
            max-width: 480px;
            float: left;
            font-size: x-small;
            z-index: 1;
        }
    }

/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
	list-style: none; /* this removes the list marker */
	border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 15px; /* this creates the space between the navigation on the content below */
	background-color: #000;
	text-align: left;
}
ul.nav li {
	border-bottom: 1px solid #666; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited {
    /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 15px;
    display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
    width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
    text-decoration: none;
    background-color: #999;
    color: #CC9;
    background-image: url('../SpryAssets/navigation_up3.gif');
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	color: #FF0;
	background-color: #02529E;
	background-image: url(/SpryAssets/navigation_up3.gif);
}

/*~~ PopUpStyles~~*/

.PopupBackgroundColor
{
    background-color: #666699;
}

.PopupSizeControl
{
    min-width:200px;
    min-height:150px;
    background:white;
}


/* ~~ The footer ~~ */
.footer
{
    padding: 10px 0;
    position: relative; /* this gives IE6 hasLayout to properly clear */
    clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
    background-color: #CCC;
    background-image: url('../Images/Footer_bkgd.jpg');
    background-size: auto;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-weight: bolder;
    font-variant: normal;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
	
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.img
{
    /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    padding: 10px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

body{
	color: #333333;
	line-height: normal;
	margin: 0px;
    margin-top: 0px;
	padding: 0px;
    padding-top: 0px;
	font-size: medium;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	background-color: #999;
    text-align: center;
    font-weight: 700;
}


h1, h2, h3, h4, h5, h6 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}

h1{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #334d55;
	font-style: normal;
	font-variant: small-caps;
	font-weight: normal;
}

h2{
	font-size: medium;
	color: #009;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-variant: small-caps;
	text-align: left;
	text-indent: 10px;
}

h3{
	font-size: medium;
	color: #0000A0;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bolder;
	font-variant: normal;
	text-decoration: none;
}

h4{
	font-size: small;
	color: #0000A0;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	text-indent: 0em;
	text-align: left;
	white-space: normal;
	display: inline;
}

h5
{
    border-style: inset none outset none;
    border-color: #999999;
    font-size: medium;
    font-weight: bold;
    color: #0066CC;
    letter-spacing: normal;
    font-family: Calibri;
    border-top-width: thin;
    border-bottom-width: thin;
}

h6{
	font-size: medium;
	color: #CCC;
	font-family: Arial, Helvetica, sans-serif;
	display: inherit;
	background-color: #039;
	font-style: normal;
	letter-spacing: 0.1em;
}

h7{
	font-size: medium;
	color: #0000A0;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bolder;
}
p
{
    padding: 0px 0px 0px 10px;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}
ul
{
    list-style-type: square;
    list-style-image: url('../Images/bullet.gif');
    list-style-position: inside;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
	font: bold 100% Arial,sans-serif;
	color: #334d55;
}


/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#masthead{
	margin: 0;
	padding: 10px 0px;
	border-bottom: 1px solid #cccccc;
	width: 100%;
	background-image: none;
}

#navBar{
	margin: 0 0 0 79%;
	padding: 0px;
	background-color: #009;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

#content{
    float:left;/*forces csstable to enclose the floated rows*/
  	width: auto;/*floats always need a width - modified from original 75%*/
	margin: 0;
	padding: 0 3% 0 0;
}


/***********************************************/
/*Component Divs                               */
/***********************************************/

#siteName{
	margin: 0px;
	padding: 0px 0px 10px 10px;
}


/*************** #pageName styles **************/

#pageName{
	padding: 0px 0px 10px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #003366;
	text-decoration: none;
}


/************* #globalNav styles **************/

#globalNav{
	color: #00F;
	padding: 0px 0px 0px 10px;
	white-space: nowrap;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
   this will force a horizontal scrollbar if there isn't enough room for all links
   remove rule or change value to 'normal' if you want the links to line-wrap */

#globalNav img{
 display: block;
}

#globalNav a {
	font-size: 90%;
	padding: 0px 4px 0px 0px; 
}


/************** .feature styles ***************/

.feature
{
    font-size: 11pt;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 3px;
    padding-left: 0px;
    margin: 0px;
    table-layout: auto; 
    /******add page line breaks to blocks of text.******/
    white-space: pre-wrap;
    
}

.feature2
{
    padding: 0px 0px 3px 10px;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    background-image: url(/Images/navBullet_simple.gif);
    background-repeat: no-repeat;
    background-position: left top;
    text-indent: 10px;
}

.feature3
{
    padding: 0px 0px 3px 10px;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    background-image: url(/Images/navBullet_simple.gif);
    background-repeat: no-repeat;
    background-position: left top;
    text-indent: 10px;
    font-family: "Adobe Caslon Pro";
    color: #336699;
    white-space: normal;
    font-style: italic;
}
.feature4
{
    padding: 0px 0px 3px 10px;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-indent: 10px;
    font-family: "Adobe Caslon Pro";
    color: #336699;
    white-space: normal;
    font-style: italic;
}

.feature h3{
	padding: 30px 0px 5px 0px;
	text-align: center;
}
.featureHeadline
{
    font-size: 11pt;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 3px;
    padding-left: 10px;
    color: #000080;
    vertical-align: top;
    text-align: left;
    left: auto;
}
.featureWhite{
    padding: 0px 8px 3px 10px;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #FFFFFF;
    text-align: right;
}

.feature img{
	float: left;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 0;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.featureConfirmationText
{
    font-size: 11pt;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 3px;
    padding-left: 10px;
    color: #FF0000;
    vertical-align: top;
    text-align: left;
    left: auto;
    background-color: #FFFF00;
}
/* adjust margins to change separation between the feature image and text flowing around it */


/************** .story styles *****************/

.story{
	clear: both;
	padding: 10px 0px 0px 10px;
	font-size: 9pt;
	text-align: left;
	text-indent: 0px;
}

.story p{
	padding: 0px 0px 10px 0px;
	text-align: left;
	text-indent: 0px;
	


}

/************** table styles*******************/
table td, table td *
{
    vertical-align: top;
    margin: 0px;
    margin-top: 0px;
	padding: 0px;
    padding-top: 0px;
}

/********** div table styles ****************/
/************member resources page***********/
.divTable{
	display: table;
	width: 100%;
    margin: 0px;
    padding: 1px;
    
}
.divTableRow {
	display: table-row;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    vertical-align: top
    
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
    padding-top: 1px;
}
.divTableHeaderCell {
    border: 1px solid #999999;
    color: #FFFFFF;
    display: table-cell;
    padding: 3px 5px;
    background: #1C6EA4;
    background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
    border-bottom: 2px solid #444444;
    font-size: medium;
}
.divTableCell, .divTableHead {
	border: 1px solid #C0C0C0;
	display: table-cell;
	padding: 3px 5px;
    margin: 0;
    
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
    padding: 0px;
    margin: 0px;
    border-collapse:collapse;
}

/************** button styles*******************/

.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #000000);
  background-image: -moz-linear-gradient(top, #3498db, #000000);
  background-image: -ms-linear-gradient(top, #3498db, #000000);
  background-image: -o-linear-gradient(top, #3498db, #000000);
  background-image: linear-gradient(to bottom, #3498db, #000000);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 20px;
  text-shadow: 1px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 15px 5px 15px;
  text-decoration: none;
  
}

.btn:hover {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #000000);
  background-image: -moz-linear-gradient(top, #3498db, #000000);
  background-image: -ms-linear-gradient(top, #3498db, #000000);
  background-image: -o-linear-gradient(top, #3498db, #000000);
  background-image: linear-gradient(to bottom, #3498db, #000000);
  text-decoration: none;
  color: #FFCC66;
}




/************* #siteInfo styles ***************/

#siteInfo
{
    clear: both;
    border: 1px solid #cccccc;
    font-size: smaller;
    color: #999999;
    padding: 10px 10px 10px 10px;
    margin-top: 0px;
    font-weight: bolder;
    font-style: normal;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
   the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}


/************* #search styles ***************/

#search{
	padding: 5px 0px 5px 10px;
	font-size: 100%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-top-color: #cccccc;
	border-right-color: #cccccc;
	border-bottom-color: #cccccc;
	border-left-color: #cccccc;
}

#search form{
 margin: 0px;
 padding: 0px;
}

#search label{
	display: block;
	margin: 0px;
	padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {
	margin: 0;
	padding: 0;
	list-style-image: none;
	list-style-type: disc;
}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: #CCCCCC;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
	position: relative;
	margin: 5px;
	padding: 0px;
	font-size: small;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCCCCC;
	border-bottom-color: #cccccc;
	font-style: normal;
	color: #000000;

}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
	padding: 2px 0px 2px 10px;
	border-top: 1px solid #cccccc;
	width: 100%;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: auto;
}

#sectionLinks a:visited{
	border-top: 1px solid #cccccc;
	padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #dddddd;
	padding: 2px 0px 2px 10px;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
    margin: 0px;
    padding: 0px 0px 10px 10px;
    font-size: 90%;
    border-bottom-color: #cccccc;
    color: #FF0000;
}

.relatedLinks h3{
	padding: 10px 0px 2px 0px;
}


/************** #advert styles **************/

#advert{
	padding: 10px 0px 0px 10px;
	font-size: 80%;
	border-top: 1px solid #cccccc;
}

#advert img{
	display: block;
}


/************** #headlines styles **************/

#headlines{
	margin: 0px;
	padding: 10px 0px 20px 10px;
	font-size: 11px;
	font-weight: normal;
}

#headlines p{
	padding: 5px 0px 5px 0px;
	font-size: 10.5px;
}


/********************** #navBar styles **************/
#navBar .relatedLinks #div5 {
	border-bottom-width: thin;
	border-bottom-style: groove;
	border-bottom-color: #CCCCCC;
}

#navBar #search #div2 {
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: groove;
	border-left-style: none;
	border-top-color: #CCCCCC;
	border-bottom-color: #000099;
}
#navBar #search #div {
	border-bottom-width: thin;
	border-bottom-style: groove;
	border-bottom-color: #000099;
}

#navBar .relatedLinks .relatedLinks {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: groove;
	border-left-style: none;
	border-bottom-width: thin;
	border-bottom-color: #999999;
}

#navBar #search .relatedLinks {
	border: thin groove #CCCCCC;
}
#navBar .relatedLinks .relatedLinks {
	border-bottom-width: thin;
	border-top-style: none;
	border-bottom-style: groove;
	border-bottom-color: #CCCCCC;
	font-size: 9pt;
}
.rightcolumnsubhead {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	color: #000;
}
#content .feature #archives {
    border-top-style: double;
    border-right-style: double;
    border-bottom-style: double;
    border-left-style: double;
    border-top-color: #FFFFFF;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color:#FFFFFF;
}