/*
 * =======================
 * E D I T   H I S T O R Y
 * =======================
 * 
 * Date: 07/06/2011
 * Author: Z. Qi
 * Action: Create new file by copying from prev version website CSS file.
 *
 * Date: 07/07/2011
 * Author: Z. Qi
 * Action: Modify/Add Page Elements, Header Elements, and Footer Elements.
 *
 */


/**************************
 *  Master Page Elements  *
 **************************/

/*
 *	Page Elements
 */

body
{
    text-align: center;
    background: gray url('../Images/BackgroundGlobal1.png') repeat center top; /* define page bg */
    padding: 0px;
    margin: 0px;
    font: 12px Verdana, Geneva, Arial, Sans-serif;
}

#outside
{
    width: 100%;
    text-align: center;
    background: url('../Images/BackdropTile0896.png') repeat-y center; /* define backdrop with shadows (shadow is 8 px each side) */
    float: left;
}

#container
{
    margin: 0px auto 0px auto;
    width: 720px; /* define width of the content sections */
    text-align: left;
    clear: both;
}

.clearfix
{
    display: block;
    margin: 0;
    padding: 0;
}

/*
 *	Header Elements
 */

#header
{
    clear: both;
    text-align: left;
    width: 720px;
    margin: 0px auto 0px auto;
    overflow: hidden;
}
#header #logo
{
    width: 720px;
    height: 76px; /* control bottom blank height */
    margin: 24px auto 0px -2px; /* control logo image position */
    background: url('../Images/BackgroundLogo.jpg') no-repeat left top; /* define logo bg position */
    overflow: hidden;
}

/*
 *	Menu Elements
 */

#menuleft /* #menuleft with a |, an alternative option*/
{
    clear: left; /* important */
    float: left;
    width: 4px; /* control | display */
    margin: -2px auto 0px -1px; /* in sync with .mlddm in MlddMenu.css file */
    font-size: 9px;
    color: #DC143C; /* Crimson to make the color not look greenish */
    vertical-align: bottom;
    overflow: hidden;
}
#menuhome
{
    clear: left;
    float: left;
    margin: 0px 0px 0px 2px;
    width: 20px;
}
#menuhome a.home /* asp:Button */
{
    background-color: #EE1D24;
    border: 0px;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    font-family: Verdana, Geneva, Arial, Sans-serif;
    color: White;
    text-decoration: none;
    margin: 0px 0px 0px -2px;
    padding: 7px 8px 7px 8px;
}

/*
 *	Spacer Elements
 */

#dividertop
{
    margin: 0px auto 0px auto;
}

div.hruletop
{
    clear: left;
    float: left;
    height: 14px; /* in sync with the height in hr.ruletop */
    width: 720px;
    margin: 0px auto 8px 0px; /* important */
    overflow: hidden;
}
hr.ruletop
{
    clear: left;
    float: left;
    border: 0px; /* important */
    height: 8px; /* in sync with the height in div.hruletop */
    width: 720px; /* important for Chrome */
    margin: 2px 0px 0px 0px; /* important */
    color: #EE1D24;
    background-color: #EE1D24; /* important for Chrome */
}

#dividerbottom
{
    margin: 0px auto 0px auto;
}

div.hrulebottom
{
    clear: left;
    float: left;
    height: 14px; /* in sync with the height in hr.rulebottom */
    width: 720px;
    margin: 4px auto 0px 0px; /* important */
    overflow: hidden;
}
hr.rulebottom
{
    clear: left;
    float: left;
    border: 0px; /* important */
    height: 1px; /* in sync with the height in div.hrulebottom */
    width: 720px; /* important for Chrome */
    color: Gray;
    background-color: Gray; /* important for Chrome */
}

/*
 *	Content Elements
 */

#content
{
    float: left;
    margin: 0px auto 16px auto; /* margin for bottom (16px) is important for hrulebottom to show up on IE! */
    min-width: 720px;
    min-height: 600px; /* keep the page at least to a certain height */
}

#content2col1, #content2col2 /* General2Column.master */
{
    margin: -12px auto 0px auto;
}
#content2col1
{
    float: left;
    width: 152px;
}
#content2col2
{
    float: right;
    width: 556px;
    min-height: 600px; /* keep the page at least to a certain height */
    background-color: #F6F6F6;
    margin-top: 0px; /* keep the col2 colored area align with the top of col1 */
}

#content2col1top, #content2col1middle /* General2Column.master */
{
    float: left;
    margin: 0px auto 0px auto;
    text-align: left;
}
#content2col1top #content2col1pix
{
    float: left;
    margin: 0px 4px 0px auto;
}
#content2col1pix #pictop, #content2col1pix #picbot, #content2col1txts #txttop, #content2col1txts #txtbot
{
    clear: both;
    float: left;
    margin: 0px 0px 3px auto;
    height: 14px;
}
#content2col1txts #txttop, #content2col1txts #txtbot
{
    margin-top: 1px;
}
#content2col1pix #pictop input.icon, #content2col1pix #picbot input.icon, #content2col1pix #picbot img.icon
{
    border: 0px;
    height: 14px;
}
#content2col1txts #txttop a.text, #content2col1txts #txtbot a.text, #content2col1txts #txttop a.text:hover, #content2col1txts #txtbot a.text:hover, #content2col1txts #txttop a.text:focus, #content2col1txts #txtbot a.text:focus, #content2col1txts #txttop a.text:active, #content2col1txts #txtbot a.text:active
{
    font-size: 9px;
    font-style: normal;
    text-decoration: none;
    margin: 0px 0px 0px 0px;
    color: #555555;
}
.col1pic
{
    width: 152px;
}

#content2col1top #content2col1txts
{
    float: left;
}

#content2col1bottom /* General2Column.master */
{
    margin: 4px auto 0px -0px;
    text-align: left;
    float: left;
}
#content2col1bottom input.icon /* asp:ImageButton */
{
    border: 0px;
    height: 16px;
}
#content2col1bottom div.donate
{
    margin: 0px 0px 0px 2px;
}
#content2col1bottom p.donate
{
    font-size: 8px;
    font-weight: bold;
    font-family: Verdana;
    font-style: italic;
    color: #555555;
}
#content2col1bottom a.donate /* asp:Button */
{
    background-color: #EE1D24;
    border: 0px;
    font-size: 9px;
    font-style: normal;
    color: White;
    text-decoration: none;
    margin: 0px 0px 0px 3px;
    padding: 0px 6px 1px 6px;
}

#content2col2main
{
    float: left;
    margin: 0px 12px 0px 14px;
    text-align: justify;
    font-size: 11px;
}

#contentcol1other, #content3col2, #content3col3 /* General3Column.master, General2ColumnPictureGallery.master */
{
    margin: 0px auto 0px auto;
}
#contentcol1other, #content3col3
{
    float: right;
    width: 140px;
    text-align: left;
}
#contentcol1other
{
    margin: 20px 0px 0px 0px;
}
#content3col3
{
    margin: 40px 0px 0px 16px;
}
#contentcol1other p, #content3col3 p, #contentcol1other ul
{
    font-size: 9px;
    margin-top: 2px;
}
#contentcol1other ul
{
    list-style: circle;
    margin-left: -26px;
}
#content3col2
{
    float: left;
    width: 372px;
}

/*
 *	Footer Elements
 */

#footer
{
    float: left;
    width: 720px;
    margin: 0px auto 0px auto;
    overflow: hidden;
    font-size: 10px;
    color: #696969; /*DimGray;*/
}
#footer #address
{
    float: left;
    width: 260px;
    margin: 4px auto 0px 2px;
    overflow: hidden;
}
#footer #misc
{
    float: left;
    width: 456px;
    margin: 0px auto 16px auto;
    overflow: hidden;
}
#footer ul#footerlinks, #footer ul#footercommunities, #footer ul#footersponsors
{
    padding: 0px 0px 0px 0px;
}

#footer li.listlink
{
    float: left;
    display: inline;
    margin-left: 12px;
}
#footer li.listcommunity
{
    float: left;
    display: inline;
    margin-right: 4px;
}
#footer li.listsponsor
{
    float: left;
    display: inline;
    margin: 0px 6px 6px auto;
}

#footer img
{
    border: 0px none;
}
#footer img.community
{
    height: 20px;
}
#footer img.sponsor
{
    height: 24px;
}

#footer a.link
{
    color: inherit;
    border-style: hidden;
    text-decoration: none;
}
#footer a.link:hover
{
    color: #EE1D24;
    border-style: hidden;
    text-decoration: none;
}
#footer a.link:active, #footer a.link:focus
{
    color: inherit;
    border-style: hidden;
    text-decoration: none;
}

div.catname
{
    clear: left;
    float: left;
    width: 140px;
    text-align: right;
    margin: 4px 10px 0px auto;
    overflow: hidden;
}
div.catsponsor
{
    clear: right;
    float: left;
    width: 306px;
    margin: 0px auto 0px auto;
    overflow: hidden;
}
div.catcommunity
{
    clear: right;
    float: left;
    width: 112px;
    margin: 0px auto 12px auto;
    overflow: hidden;
}
div.catlink
{
    clear: right;
    float: right; /* width: 186px; */
    margin: 4px 0px 0px auto;
    overflow: hidden;
}

.hyphidden
{
    border-style: hidden;
    color: #696969;
    text-decoration: none;
}
.hyphiddenred
{
    border-style: hidden;
    color: #EE1D24;
    text-decoration: none;
}

/***************************
 *  Content Page Elements  *
 ***************************/

/*
 *	Content Page Elements
 */

#taglineslider
{
    margin: 32px auto 0px auto;
}

#programs
{
    width: 720px;
    margin: 24px auto 0px auto;
}
.program0
{
    float: left;
    width: 168px;
    margin: 0px auto 0px auto;
}
.program1
{
    float: left;
    width: 168px;
    margin: 0px auto 0px 16px;
}
.programpic
{
    border: 0px solid black;
}
.programtitle
{
    margin: 6px auto 4px 0px;
    text-align: left;
}
.programlink, .programlink:hover, .programlink:active, .programlink:focus
{
    margin: 6px auto 4px 0px;
    color: #EE1D24;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
    border-style: hidden;
    text-decoration: none;
}
.programtext
{
    margin: 0px auto 0px 0px;
    color: #000000;
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    text-align: left;
}
.programsublink
{
    margin: 2px auto 0px 2px;
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    text-align: left;
}

#hrulehomepage
{
    clear: left;
    float: left;
    height: 16px; /* in sync with the height in hr.rulebottom */
    width: 720px;
    margin: 10px auto 10px 0px; /* important */
    overflow: hidden;
}
#rulehomepage
{
    clear: left;
    float: left;
    border: 0px; /* important */
    height: 2px; /* in sync with the height in div.hrulebottom */
    width: 720px; /* important for Chrome */
    color: #EE1D24;
    background-color: #EE1D24; /* important for Chrome */
}

#homepagebottom
{
    float: left;
    width: 720px;
    margin: 0px auto 8px 0px;
}
.bigtitle
{
    margin: 0px auto 10px 0px;
    height: 14px;
    color: #EE1D24;
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
}
.smalltitle, .smalltitle a, .smalltitle a:hover, .smalltitle a:active, .smalltitle a:focus
{
    margin: 0px auto 0px 0px;
    color: #EE1D24;
    font-family: Arial;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
}
#homepagenews
{
    float: left;
    width: 340px;
}
.news
{
    float: left;
    margin: 0px auto 0px 0px;
}
.newspic
{
    float: left;
    margin: 8px auto 8px 0px;
    width: 88px;
}
.newspic img
{
    border: 0px none;
    width: 88px;
    height: 64px;
}
.newstext
{
    float: right;
    margin: 4px auto 6px 6px;
    width: 244px;
}
.newscontent
{
    margin: 0px auto 0px 0px;
    color: #000000;
    font-family: Arial;
    font-size: 10px;
}
#homepagemisc1
{
    float: right;
    width: 352px;
}
.misc1a, .misc1b
{
    float: left;
    margin: 0px 0px 0px 0px;
    width: 168px;
}
.misc1a
{
    margin: 0px 16px 0px 0px;
}
#homepagemisc
{
    float: right;
    width: 352px;
}
.misc
{
    float: left;
    clear: left;
    margin: 28px auto 0px 0px;
}
.miscbutton
{
    float: left;
    margin: 8px auto 0px 0px;
    border: 0px none;
}
.miscbutton img
{
    border: 0px none;
}
.miscbutton a /* asp:Button */
{
    border: 0px;
    margin: 0px 0px 0px 0px;
}

.maintitle
{
    margin: 12px 0px 0px auto;
    color: #EE1D24;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
}
.subtitle
{
    margin: 20px 0px 0px auto;
    color: #EE1D24;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}
.itemtitle
{
    margin: 20px 0px 0px auto;
    color: #EE1D24;
    font-family: Verdana;
    font-size: 11px;
    font-weight: bold;
}
.sidetitle
{
    color: #EE1D24;
    font-weight: bold;
}

td.essayyears, td.essaysubjects, td.essaywinners
{
    vertical-align: top;
    text-align: left;
}
td.essayyears
{
    width: 96px;
}
td.essaysubjects
{
    width: 180px;
}
td.essayspacing
{
    height: 6px;
}
span.essayheads, span.recogheads
{
    text-decoration: underline;
    font-weight: bold;
    font-size: 11px;
}
span.recogheads
{
    line-height: 20px;
    vertical-align: bottom;
}
span.recoggrades
{
    font-weight: bold;
}

p.contributorshead, p.contributors
{
    text-align: center;
}
p.contributorshead
{
    font-weight: bold;
}
p.contributorsdonors
{
    line-height: 2px;
}
p.contributorsdonors a img:hover, p.contributorsdonors a img:active, p.contributorsdonors a img:focus
{
    border: 1px solid #4169E1;
}
span.contributorscat
{
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}
img.contributors
{
    width: 132px;
    border: 1px solid darkgray;
}

tr.board
{
    height: 200px;
}
td.boardimg, td.board
{
    vertical-align: top;
}
td.boardimg
{
    width: 170px;
    padding-top: 8px;
}
td.board
{
    width: 500px;
}
.imgboard
{
    width: 16px;
    padding-left: 16px;
}
.imgshadow
{
    float: left;
    background: url("../Images/AboutUs/ShadowAlpha.png") no-repeat bottom right !important;
    background: url("../Images/AboutUs/Shadow.gif") no-repeat bottom right;
    margin: 10px 0 0 -12px !important;
    margin: 10px 0 0 0px;
}
.imgshadow img
{
    display: block;
    position: relative;
    background-color: #E6E6FA;
    border: 1px solid #A9A9A9;
    margin: -6px 6px 6px -6px;
    padding: 3px;
    height: 128px;
    width: 128px;
    border-width: 0px;
}
p.board, p.staff
{
    font-weight: bold;
    color: #EE1D24;
}
p.board
{
    margin-left: 24px;
}
ul.board, ul.staff
{
    list-style: circle;
    text-align: left;
}
ul.staff
{
    margin-left: -24px;
}

p.newslettersectiontitle
{
    margin: 12px 0px 0px auto;
    color: #EE1D24;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
}
p.newslettersynopsis
{
    margin: 12px 0px 0px 6px;
    font-weight: bold;
}
p.generalsectiontitle
{
    margin: 12px 0px 0px auto;
    color: #EE1D24;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    text-decoration: underline;
}
p.generalsectionbullets
{
    margin: 2px 0px 0px 20px;
}
ol.general, ol.newslettersection, ul.general
{
    font-family: Arial;
    font-weight: bold;
}
ol.general, ol.newslettersection
{
    list-style: decimal;
}
ul.general
{
    list-style: disc;
}
ol.general
{
    margin: 16px 0px 0px -22px;
}
ol.newslettersection
{
    margin: 12px 0px 0px -16px;
}
ul.general
{
    margin: 16px 0px 0px -24px;
}
li.general
{
    margin-bottom: 0px;
}
li.newsletterbullet
{
    margin-bottom: 4px;
}
span.generalbullet, span.newsletterbullet
{
    font-weight: bold;
}
span.newsletterbullet
{
    text-decoration: underline;
}
span.generalcontent, span.newslettercontent
{
    font-weight: normal;
    text-decoration: none;
}

p.pressdate, p.presstitle, p.pressauthor, p.presslink
{
    font-family: Arial;
    margin: auto 0px 0px auto;
}
p.pressdate, p.presstitle, p.pressauthor
{
    font-size: 11px;
}
p.pressdate
{
    margin: 24px 0px 0px auto;
    color: #EE1D24;
}
p.presstitle
{
    font-weight: bold;
}
p.pressauthor
{
    font-style: italic;
}
span.pressread
{
    text-decoration: underline;
}

iframe.video
{
    width: 528px;
    height: 320px; /* height:width ratio posted on http://www.youtube.com/youtubeonyoursite was 0.8235 but the default ratio is currently shown as 0.61. */
    margin: 0 0 0 1px;
}

/*
 *	Link Toggle Elements
 */

.togglelink
{
    border-style: hidden;
    color: #0000CD;
    text-decoration: none;
}
.togglelink:hover
{
    color: #EE1D24;
}
.togglelink:active, .togglelink:focus
{
    color: #4169E1;
}