/*****

    Autism Society of Maine
    Autism.CSS

    Notes:

    Content area is 672 pixels wide BUT all content should be made 642 pixels max width (or 640 + 1px borders) with 15 pixel margins 
    on the left and right sides.  The H2 and P elements are set up this way.

    For the 1/2 width columns, the max size for content in either column should be 306 pixels (due to IE weirdness).

*****/

/***** Common styles. *****/

img, a, li, div { behavior: url('/assets/iepngfix.htc'); }

* 
{ 
    margin: 0px 0px;
    padding: 0px 0px;
}

html
{
    width: 100%;
    height: 100%;
    min-height: 100%;
}

body
{
    height: 100%;
    min-height: 100.1%; 
    background-color: #27B3CE;
    background-image: url('/images/background.jpg');
    background-position: top center;
    background-repeat: repeat-y;
}

body#popup
{
    width: 100%;
    margin: 0 auto;
    background: #fff;
}

body * 
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    line-height: 140%;
}

img
{
    border: 0px;
}

a
{
    color: #FF0000; 
    text-decoration: none;
    cursor: pointer;
}

a:hover
{
    color: #0000FF;
}

.text-center
{
    text-align: center;
}

/***** The wrapper table. *****/

table#wrapper
{
    width: 800px; 
    height: 100%;
    margin: 0 auto; 
    border: none; 
    border-collapse: collapse;
    border-left: 1px solid #000099;
    border-right: 1px solid #000099;
}

table#wrapper td.top
{
    height: Auto;
    min-height: 487px;
    vertical-align: top; 
    text-align: center;
}

table#wrapper td.bottom
{
    height: 28px;
    vertical-align: bottom; 
    text-align: center;
}

/***** The header DIV. *****/

div#header
{
    width: 800px;
    height: 112px;
    margin: 0px Auto;
    background-image: url('/images/header_bg.jpg');
}

/***** The sidebar DIV. *****/

div#sidebar
{
    float: left;
    width: 128px;
    _height: 485px;
    min-height: 485px;
    background-image: url('/images/sidebar_bg.jpg');
    background-position: top left;
    background-repeat: no-repeat;
}

div#sidebar ul 
{ 
    clear: both;
    display: block;
    width: 128px; 
    margin: 0px 0px 15px 0px;
    padding: 0px 0px;
    list-style-type: none; 
}

div#sidebar ul li 
{ 
    display: block;
    width: 128px; 
    height: 20px;
    text-align: right; 
    vertical-align: middle;
}

div#sidebar ul a
{
    padding: 0px 5px 0px 0px;
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 11pt; 
    font-weight: bold; 
    text-decoration: none;
}

div#sidebar ul a:hover
{
    /* Do nothing here. */    
}

div#sidebar ul.group1 a
{
    color: #0012EE; 
}

div#sidebar ul.group2 a
{
    color: #00A1C6; 
}

#sidebar ul.group3 a
{
    color: #009900; 
}

#sidebar ul.group4 a
{
    color: #FF0000; 
}

div#sidebar li.sub 
{ 
    display: block;
    width: 128px; 
    height: 18px;
    text-align: right; 
    vertical-align: middle;
}

div#sidebar li.sub.twoline
{ 
    display: block;
    width: 128px; 
    height: 31px;
    line-height: 1em;
    text-align: right; 
    vertical-align: middle;
}

div#sidebar li.last
{
    margin-bottom: 5px;
}

div#sidebar li.sub a
{ 
    padding: 0px 5px 0px 0px;
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 8pt; 
    font-weight: bold; 
    color: #000000;
    text-decoration: none;
}


/***** The content DIV. *****/

div#content
{
    float: right;
    width: 672px;
    _height: 485px;
    min-height: 485px;
    padding-top: 10px;
    background: #fff;
    background-image: url('/images/content_bg.jpg');
    background-position: top left;
    background-repeat: no-repeat;
    text-align: left;
}

body.popup div#content
{
    float: none;
    margin: 0;
    padding: 50px 0 0 0;
    width: 100%;
    _height: 485px;
    min-height: 485px;
    background: #fff;
    background-image: url('/images/popup_bg.jpg');
    background-position: top left;
    background-repeat: no-repeat;
    text-align: left;
}

body.popup div#content div.manage
{
    width: 600px;
    margin: 1em auto;
    padding: 0;
}

div#content a, div#content a:visited
{
    color: #FF0000;
}

div#content a:hover
{
    color: #0000FF;
}

div#content h2
{
    margin: 3px 15px 7px 15px;
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 13pt; 
    font-weight: bold; 
    color: #0000FF; 
}

div#content h2.first
{
    margin-top: 15px;
}

div#content h2 a
{
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 13pt; 
    font-weight: bold; 
    color: #FF0000; 
}

div#content h2 a:hover
{
    color: #0000FF;
}

div#content h3
{
    margin: 3px 15px 7px 15px;
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 10.5pt; 
    font-weight: bold; 
    color: #00A1C6; 
}

div#content h3 a
{
    color: #00A1C6;
    font-size: 10.5pt;
    font-weight: bold;
}

div#content h3 a:hover
{
    color: #f00;
    font-size: 10.5pt;
    font-weight: bold;
}

div#content p
{
    margin: 0px 15px 10px 15px;
}

div#content p.counters
{
    text-align: center;
    font-size: 80%;
}

div#content p.disclaimer
{
    font-style: italic;
    width: 95%;
}

div#content img.photo
{
    border: 1px solid #0000FF;
}

div#content div.half
{
    width: 312px;
}

div#content div.half h2
{
    margin: 3px 0px;
}

div#content div.half p
{
    margin: 0px 0px 10px 0px;
}

div#content .left
{
    float: left;
}

div#content .right
{
    float: right;
}

div#content .center
{
    margin: 0 auto;
    clear: both;
}

div#content .c
{
    text-align: center;
}

div#content div.third
{ 
    width: 33%;
    float: left;
    text-align: center;
}

div#content div.left
{
    margin: 0px 0px 0px 15px;
    _margin: 0px 0px 0px 8px;
}

div#content div.right
{
    margin: 0px 15px 0px 0px;
    _margin: 0px 8px 0px 0px;
}

div#content img.left
{
    margin: 0px 10px 0px 0px;
    _margin: 0px 8px 0px 0px;
}

div#content img.right
{
    margin: 0px 10px 0px 10px;
    _margin: 0px 10px 0px 8px;
}

div#content a.external
{
    padding-right: 14px; 
    background-image: url(/images/external.gif);
    background-repeat: no-repeat; 
    background-position: right 50%;
}

div#content a.email
{
    padding-right: 14px;
    background-image: url(/images/email.gif);
    background-repeat: no-repeat;
    background-position: right 50%;
}

div#content ul, div#content ol
{
    margin: 5px 35px 10px 35px;
}

div#content li
{
    margin: 5px 0;
}

div#content ul.plain
{
    list-style: none outside;
    margin: 5px 15px 10px 15px;
}

div#content ul.plain li
{
    margin: 0px 0px;
}

div#content ul.plain.resources li
{
    margin: 5px 0;
}

div#content ul.indented
{
    margin-left: 55px;
}

div#content dl
{
    margin: 0px 15px 10px 15px;
}

div#content dt
{
    display: block;
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 10.5pt; 
    font-weight: bold; 
    color: #00A1C6; 
}

div#content dd
{
    margin-bottom: 10px;
}
div#content dd:first-letter
{
    margin-left: 1em;
}

div#content table.do_dont
{
    width: 550px;
    clear: right;
    border-collapse: collapse;
    margin: 0 auto;
}
div#content table.do_dont th
{
    text-align: center;
}
div#content table.do_dont td 
{
    width: 50%;
    border: 2px #00A1C6 solid;
    padding: 3px;
    vertical-align: top; 
}

div#content table.store
{
    border-collapse: separate;
    border: none;
    margin: 0 auto;
    width: 500px;
}

div#content table.store tr
{
    margin: .5em 2em;
    border: 1px black solid;
}

div#content table.store td
{
    background: #ffffee;
    margin: .5em 0;
    text-align: center;
}

div#content address
{
    margin: 10px 15px;
}

div#content span.alert
{
    font-weight: bold;
    color: #FF0000;
}

/***** The ribbon thing. *****/

div#ribbon_bottom
{
    float: right;
    width: 83px;
    height: 40px;
}

/***** Special Events Box *****/

#content div.special_event
{
    margin: 0 10px 10px 1em;
    padding-top: 5px;
    border: 1px solid #000099;
    background-color: #EDF4FA;
}

#content div.homepage_news
{
    margin: 15px 10px 15px 10px;
    width: 640px;
    padding: 5px 5px;
    border: 1px solid #000099;
    background-image: url('/images/news.png');
}

#content div.homepage_news h2
{
    text-align: center;
}

/***** The mailing list box. *****/

div#mailinglist
{
    float: right;
    margin: 0 10px 0 15px;
    padding-top: 15px;
}

/***** Secure Forms *****/

#content div.manage h2
{
    margin-left: 0;
}

table.secureform
{
    margin: 10px auto;
    width: 560px;
}

table.secureform td
{
    padding: 2px 5px;
    vertical-align: top;
}
table.secureform .note
{
    font-size: 80%;
    font-style: italic;
    color: #0000ff;
}

table.secureform table.secureinset
{
    margin: 0;
    padding: 0;
}

table.secureinset td.first
{
    padding-left: 0px;
}

table.report-display
{
    border-collapse: collapse;
    width: 600px;
}

table.report-display th
{
    padding: 3px 0;
}

table.report-display td
{
    border-top: solid 1px #0000ff;
    border-bottom: solid 1px #0000ff;
}

/***** The footer DIV. *****/

div#footer
{
    width: 800px;
    margin: 0px Auto;
    padding: 4px 0px;
    border-bottom: 5px solid #0000FF;
}

div#footer *
{
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 7pt;
    color: #404040;
}

div#footer p, div#footer p *
{
    font-family: Arial, Verdana, Sans-Serif;
    font-size: 10px;
    color: #404040;
}

div#footer a, a:visited
{
    color: #0000FF;
}

div#footer a:hover
{
    color: #FF0000;
}

div#footer a.manage, div#footer a.manage:visited
{
    color: #404040;
}

div#footer a.manage:hover
{
    color: #555555;
}

/***** Special HTML Forms *****/

table.form { width: 750px; border-collapse: collapse; margin: .25em auto; }
table.form td { padding: 3px; line-height: 1.2em; }
table.form td.label { text-align: right; }
table.form td.gap { width: 30px; }
table.form td.line { border-bottom: 1px #000 solid; }
table.form.desc td.line { width: 200px; }
table.form.med td.line { width: 600px; }
table.form.check { width: 600px; }
table.form.check td.line { width: 300px; }
table.form.check td.gap { width: 50px; }
table.form.check td.option { width: 20px; font-style: italic; }
table.form.check td.label { width: 294px; }
table.form.signature { width: 400px; }
table.form.signature td.line { width: 300px; }

/***** Facebook Styles *****/

div#content div.flink-small a, div#content div.flink-small a:hover
{
    font-size: 8px;
}

/***** Print format *****/
@media print 
{
 body { background: #fff; margin: 0;}   

 body.popup #header { display: none; }
 body.popup #footer { display: none; }
 body.popup { background: none; }
 body.popup .returnlink { display: none; }
}