/*
Original colours:
Background: #E6E6B2
Text: #000
 */

*
{
    margin:0; padding:0;
}

body
{
    font-family: verdana, arial, sans-serif;
    text-align: left;
    font-size: 62.5%;
    line-height: 1.5;
    /*
    background: #EFEDD0 url( ../images/Flags.jpg );
    background: #EFEDD0 url( ../images/Stripes.gif );
    background: #EFEDD0 url( ../images/Flag.jpg );
     */
/*
    background: #5C6F30 url( ../images/MainBg.gif ) repeat-x;
 */
    background: #5D581E url( ../images/MainBg2.gif );
}

#outerContainer
{
    background-color: #E6E6B2;
    border: 1px solid #AAA;
    font-size: 1.2em;
    /*
    border: 5px double #00400;
     */
}

h1,h2,h3,h4
{
    margin: 0.2em 0;
}

p
{
    margin: 0.5em 0 1em 0;
}

ul, ol
{
    list-style: none;
}

ol
{
    list-style-type: decimal;
    margin-left: 3em;
}

ol#bylaws
{
    list-style-type: upper-roman;
    margin-left: 3em;
}

ol#bylaws ol
{
    margin-left: 2em;
    list-style-type: lower-alpha;
}

ol#bylaws ol ol
{
    list-style-type:  lower-roman;
}

ol#bylaws h2
{
    font-size: 1.2em;
    font-weight: bold;
    font-variant: small-caps;
}

ol#bylaws h2 a
{
    padding: 5px;
    display: block;
    margin: .5em 0;
    border-width: 0;
}

ol#bylaws h2 a:visited
{
    text-decoration: underline;
    color:           #698338;
}

ol#bylaws h2 a:hover
{
    padding: 5px;
    position: static;
    background: #5D581E url( ../images/HeadingBg.gif ) 0 0 repeat-x;
    color: #FFF;
    text-decoration: none;
}

.heading
{
    /*
    background: #080 url( ../images/HeadingBack.gif ) 0 100% repeat-x;
     */
/*
    background: #5C6F30 url( ../images/HeadingBg.gif ) 0 0 repeat-x;
 */
    background: #5D581E url( ../images/HeadingBg2.gif ) 0 0 repeat-x;
    color: #FFF;
    font-size: 1.4em;
    padding: 5px;
    font-variant: small-caps;
    letter-spacing: .15em;
    font-weight: bold;
}

#navigation .heading
{
    border-bottom: 2px solid #FFA500;
}

a
{
    text-decoration: underline;
    color:           #698338;
}

a:visited
{
    color:           #787;
    text-decoration: underline;
}

a:hover
{
    /*
    background: #080 url( ../images/hovers.gif );
     */
/*
    background: #5C6F30;
 */
/*
    background: #C8BE55;
 */
    background: #C8BE55 url( ../images/AnchorHover.gif );
    color: #323A19;
    /*
    color:      #333;
     */
    text-decoration: none;
    /*
    Fitt's law
     */
    padding-top: 5px;
    padding-bottom: 7px;
    position: relative;
}

a.wide
{
    padding: 5px;
}

a.wide:hover
{
    padding: 5px;
}

ul.menuBar
{
    text-align: left;
    margin:     0;
    list-style: none;
    width: 100%;
    font-size: .9em;
}

ul.menuBar li a
{
    position: relative;
    padding:         5px;
    padding-left:    15px;
    text-decoration: none;
    display:         block;
    /*
    background:      #077602 url( ../images/MenuBackHover.gif ) repeat-x;
     */
    background:      #6E8B3D url( ../images/HeadingBg.gif ) repeat-x;
    color:           #FFF;
    border:          none;
    height: 11px;
    line-height: 1.0;
    border-left: 10px solid #C00;
    border-bottom: 1px solid #333;
}

ul.menuBar li a:visited
{
    /*
    background: #077602 url( ../images/MenuBackHover.gif ) repeat-x;
    border:     none;
     */
    border-left:     10px solid #555;
    color:           #FFF;
    font-style:      italic;
    text-decoration: none;
}

ul.menuBar li a:hover
{
    background:   #800 url( ../images/MenuBack.gif ) repeat-x;
    color:        #FFF;
    font-style: normal;
    padding-left: 17px;
    border-left: 10px solid #C66;
}

ul.menuBar li a span
{
    border:      5px double #6E8B3D;
    background:  #FFCF7D url( ../images/ToolTipBack.gif );
    color:       #000;
    display:     block;
    position:    absolute;
    width:       10em;
    padding:     5px;
    font-weight: bold;
    font-size:   1.0em;
    line-height: 1.5;
    font-family: georgia, garamond, sans-serif;
    top:         1px;
    /*
    Start with it hidden off to the left.
     */
    left:        -1050px;
    z-index: 20;
}

ul.menuBar li a:hover span
{
    /*
    Display it by bringing it back onto the screen.
     */
    left: 165px;
}

#bhome #homePage a,
#bbylaws #bylawsPage a,
#baboutPakistan #aboutPakistanPage a,
#baboutSociety #aboutSocietyPage a,
#bevents #eventsPage a,
#bpastEvents #pastEventsPage a,
#bawards #awardsPage a,
#bregistration #registrationPage a,
#bnewsletter #newsletterPage a,
#bboard #boardPage a,
#bsubcommittees #subcommitteesPage a,
#btrustees #trusteesPage a,
#bcomments #commentsPage a
{
    background: #800;
    color: #FFF;
}

/*
Can remove these one at a time as the menu items become implemented.
 */
#aboutPakistanPage,
#awardsPage
{
    display: none;
}

blockquote
{
    margin: 0 3em;
}

blockquote p.author
{
    text-align: right;
}

div.box
{
    float: left;
    margin-bottom: 5px;
    padding: 2px;
    border: 2px solid #FFA500;
    margin-right: 5px;
}

div.rail
{
    width: 172px;
    margin-right: 0;
}

div.rightRail
{
    float: right;
}

div.expandingBox
{
    border:        2px solid #FFA500;
    clear:         both;
    margin-bottom: 5px;
    padding:       2px;
}

/*
Pages with a floating dl can't handle a border in the expanding box on older IEs; it seems to make its way into the dl entries.

As of the floating clearing method (overflow: auto and height: 1% to force hasLayout) applied on March 30, 2007 (00:39:49), this seems to no longer be a
problem.
 */
/*
.ie5 #baboutPakistan div.expandingBox,
.ie6 #baboutPakistan div.expandingBox
{
    border-width: 0;
}
 */

div.content
{
    padding: 5px;
    overflow: auto;
    height: 1%;
}

ul.news
{
}

.news li
{
    margin-bottom: 1em;
}

.news li a
{
    font-size: .9em;
    display: block;
    border: none;
    padding: 0 10px;
}

.news li a:visited
{
    border: none;
}

#header
{
    margin-bottom: 5px;
    line-height: 1.2;
}

#header h1, #header h2
{
    text-align: right;
}

#header p
{
    font-style: italic;
    text-align: right;
    font-family: georgia, times new roman, serif;
    font-size: 1.5em;
}

#header, #footer
{
    background: #D2CA75;
    color: #5C6F30;
    padding: 5px;
    padding-bottom: 0;
    clear:both;
    overflow: auto;
}

#footer
{
    margin-top: 5px;
    padding: 5px;
    text-align: center;
}

/*
#footer img
{
    border: none;
    padding: 0;
    margin: 0;
    margin-right: 5px;
}

#footer p
{
    float: right;
}

#footer a:hover
{
    background-color: #000;
    background-image: none;
}
 */

h1
{
    font-size: 2em;
}

h2
{
    font-size: 1.5em;
}

h3
{
    font-size:   1.2em;
    font-weight: bold;
    margin-top:  1em;
}

form div
{
    margin-top: 3px;
}

form div.error
{
    border: 2px solid #F00;
    background-color: #FFA;
}

form label
{
    cursor:       pointer;
    float:        left;
    margin-right: 5px;
    text-align:   right;
    width:        200px;
}

form div.error label
{
    color: #600;
}

form div.required label
{
    font-weight: bold;
}

form div
{
    padding: 1px;
    clear: both;
}

/*
Used for an inline label, such as one that comes after a checkbox or a radio button.
 */
label.inline
{
    width: auto;
    float: none;
}

/*
Used for a label that doesn't point to anything -- such as for use with a disabled or non-existent field.  (Next to a display value, for example.)
 */
label.dummy
{
    cursor: default;
}

input[type=submit]
{
    border-left-color: #CCCCCC;
    border-top-color:  #CCCCCC;
    border:            3px double #999999;
    /*
    font-weight: bold;
    padding: 0.25em .75em;
     */
}

input, textarea, select
{
    background-color: #E7E7E7;
    border:           1px solid #AAA;
    font-family:      verdana, arial, sans-serif;
    padding:          2px 4px;
}

form input[type=text],
form select
{
    width: 20em;
}

div.required input, div.required textarea, div.required select

{
    border-style: solid;
    border-color: #F00;
}

form.comments label
{
    margin-right: 0;
    text-align:   left;
    width:        70px;
}

form.comments input, form.comments textarea
{
    font-size: .9em;
    width: 12em;
}

input.mouseover, textarea.mouseover, select.mouseover
{
    border: 1px solid #F00;
    background-color: #FFC;
}

input[type=submit].mouseover
{
    border: 3px double #999999;
    border-top-color: #CCCCCC;
    border-left-color: #CCCCCC;
    background-color: #FFC;
}

label.mouseover
{
    color: #353;
}

.focus
{
    background-color: #FFF;
    border-color: #000;
    border-style: solid;
}

fieldset
{
    border: 0 solid #000;
    border-top-width: 2px;
    margin-top: 10px;
    padding-bottom: 10px;
}

fieldset legend
{
    font-weight: bold;
    font-size: 1.2em;
    padding: 0 .5em;
    margin-left: 2em;
    color: #353211;
    background: #FFFFCC;
    border: 1px solid #353211;
    color: #800;
}

fieldset fieldset
{
    border-width: 0 0 1px 0;
    margin-top: 5px;
}

fieldset fieldset legend
{
    margin-left: 2em;
    background: none;
    border-width: 0;
}

fieldset p
{
    margin-left: 2em;
}

.buttons
{
    margin-top: 1em;
}

/*
Yahoo shoves in some monitoring images at the bottom that also show up presented like this -- we'll have to tailor our styles to images in specific regions,
such as div and p blocks.
 */
div img
{
    padding: 5px;
    background: #FFF;
    border: 1px solid #AAA;
}

html img.heading
{
    background: transparent;
    border: 0;
    padding: 0;
}

/*
For pullquotes -- note that the two classes pullquote and alt should both be used to shove the pullquote to the right.
 */
blockquote.pullquote
{
    float:left;
    width:10em;
    margin:0.25em 0.75em 0.25em 0;
    padding:0.5em;
    padding-bottom: 0.25em;
    border:3px double #698338;
    border-width:3px 0;
    color:#333;
    background:transparent;
    font-style:italic;
    font-weight: bold;
}

blockquote.alt
{
    float:right;
    margin:0.25em 0 0.25em 0.75em;
}

.pullquote p
{
    margin: 0;
    text-align: center;
}

.pullquote p:first-letter {text-transform:uppercase}

.pullquote img
{
    background:   transparent;
    border-width: 0;
    height:       12px;
    margin:       0;
    padding-top:  5px;
    padding:      0;
    width:        44px;
}

.dropCap:first-letter
{
    float:        left;
    font-family:  garamond,serif;
    font-size:    3em;
    border:       4px groove #5C6F30;
    background:   #A00;
    color:        #FFF;
    line-height:  .75;
    margin-right: 2px;
    padding:      2px;
}

.clearing
{
    overflow: hidden;
    /*
    This is supposed to be required for IE6 to force the hasLayout property.
     */
    height: 1%;
}

.noprint{}

.highlight
{
    font-weight: bold;
}

.small
{
    font-size: .8em;
}

.floatLeft
{
    float: left;
    margin-right: 1em;
}

.floatRight
{
    float: right;
    margin-left: 1em;
}

.checkbox
{
    margin-left: 2em;
}

dl
{
    border-top: 1px solid #6E8B3D;
    border-bottom: 2px solid #6E8B3D;
    margin: 0 5px;
}

dt, dd
{
    border-top:     1px solid #6E8B3D;
    padding-bottom: .5em;
    padding-top:    .5em;
}

dt
{
    clear: both;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    width: 135px;
    text-align: right;
    font-weight: bold;
}

dd
{
    /*
    The width, margin and padding totals of the dt
     */
    margin-left: 142px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
}

.centered
{
    margin-left:  auto;
    margin-right: auto;
    text-align:   center;
}

fieldset.mouseover
{
    background: #DCD693;
}

#fees, #totalFees
{
    font-weight: bold;
    font-size: 1.2em;
}

#totalFees
{
    color: #F00;
}

fieldset legend.mouseover
{
    font-size: 2em;
}

.debug
{
    background-color: #F0F0F0;
    color:            #333;
    font-size:        1.5em;
}

span.date
{
    display: block;
    padding: .25em;
    border: 1px solid black;
    float: left;
    width: 6em;
    text-align: center;
}

span.date .dayOfWeek,
span.date .month,
span.date .day,
span.date .year
{
    display: block;
}

span.date .month
{
    background-color: #333;
    color: #F0F0F0;
}

ul.events li
{
    height:     1%;
    overflow:   hidden;
    padding-top: .5em;
    padding-bottom: .5em;
}

ul.events span.description
{
    margin-left: 1em;
    padding-left: 1em;
    border-left: 1px solid #333;
}

table
{
    border: 5px double orange;
}

table caption
{
    font-size:  1.1em;
    font-style: italic;
}

thead tr
{
    background: #6E8B3D url( ../images/HeadingBg.gif ) repeat-x;
    color:      #FFF;
}

thead th
{
    font-family: georgia;
    font-size:   1.2em;
    padding:     .25em .5em;
    text-align:  left;
}

tbody td
{
    padding:        .5em;
    vertical-align: top;
}

.odd
{
    background-color: #D2CA75;
}

tbody tr.mouseover
{
    background: #5D581E;
    color:      #FFF;
}

li.mouseover
{
    background: #FFC;
}

.left
{
    text-align: left;
}

.right
{
    text-align: right;
}

.center
{
    text-align: center;
}

.squeeze
{
    margin-left: 10em;
    margin-right: 10em;
}

.alert
{
    background-color: #FFC;
    border:           2px solid orange;
    border-width:     2px 0;
    color:            #F00;
    font-size:        1.5em;
    font-weight:      bold;
    padding:          .5em 1em;
}

ul.bullets
{
    list-style: disc;
}

ul.bullets li
{
    margin: .5em 0 .5em 1em;
}

// For modal windows, specifically image popups
#modal_container
{
    background-color: #fff;
    border:           1px solid #666;
    color:            #333;
    font-size:        12px;
    overflow:         auto;
    padding:          5px;
    text-align:       left;
}

#modal_overlay
{
    background-color: #000;
}

// For gallery images
a.gallery
{
    background: transparent;
}

a.gallery:hover
{
    background:       transparent;
    background-image: none;
}

a.gallery:hover img
{
    border: 1px solid #F00;
}

div.newsletter
{
    border:        2px solid #000;
    clear:         both;
    margin-bottom: 5px;
    padding:       2px;
    background: #FFF url( ../Newsletters/NewsletterBackground.jpg );
}

div.newsletterColumn
{
    width: 49%;
    padding: 2px;
}

div.newsletterBox
{
    background: #FFF;
    border: 1px solid #000;
    padding: 2px;
    margin: .5em 0;
    text-align: justify;
}

div.newsletterBanner
{
    text-align: center;
}

.newsletterColumnFull
{
    clear: both;
    padding: 2px;
}

.leftFloat
{
    float: left;
}

.rightFloat
{
    float: right;
}

.newsletter h1, .newsletter h2
{
    text-align: center;
}

.newsletter h1
{
    font-size: 1.5em;
}

.newsletter h2
{
    font-size: 1.2em;
}