/* =========================================================================

    screen.css = style & positioning, intended for screen

   ========================================================================= */

/* === GENERAL === */

    .hidden { display:none; }
    .fixer  { clear:both; font-size:1px; }

    body {
        color:#000000; background:#7F8CAA;
        margin:0; padding:0; text-align:left;
        font:normal 0.7em verdana,arial,helvetica,sans-serif;
    }
    h1  {  }
    h2  { font:bolder 1.5em verdana,Arial,helvetica,sans-serif; text-transform:uppercase; border-bottom:3px solid #F0CC3D; padding:2px 0 1px 0; margin:4px 0 8px 0; letter-spacing:0.1em; }
    h3  { margin:0 0 2px 0; padding:10px 0 2px 0; font:bold 1em verdana,arial,helvetica,sans-serif; text-transform:uppercase; letter-spacing:0.2em; border-bottom:2px solid #DBE2EF; }
    h4  { margin:0; padding:10px 0 2px 0; font:bold 1em verdana,arial,helvetica,sans-serif; }
    p   { margin:0; padding:10px 0; }
    ul  { margin-bottom:0; list-style:square; }
    li  { padding-bottom:15px; }
    ul.condensed li { padding-bottom:1px; }
    table {font-size: 1em !important;}
    td, th { vertical-align:top; padding:0;  }
    a   { color:#2B52A7; }
    a:hover { color:#000000; }
    img { border:0; }
    form { margin:0; padding:0; }
    input,select,textarea { font:normal 11px verdana,arial,helvetica,sans-serif; }

    div.hr { border-top:2px solid #DBE2EF; margin:10px 0 0 0; padding:10px 0 0 0; }
    div.hr hr { display:none; }


/* === CONTAINERS === */

    #container {
        width:760px;
    }

/* === HEADER === */

    #header {
        width:760px;
        height:90px;
        background:#092769 url(../img/header/bg.gif) no-repeat;
    }

    #logo { }

/* === TOP NAVIGATION === */

    #nav {
        padding:0 0 0 98px;
        height:20px;
        background-color:#DCE2EC;
        background-image:url(../img/nav/bg.gif);
        background-repeat:no-repeat;
    }

    #nav a {
        display:block;
        text-decoration:none;
        text-align:center;
        color:#092769;
        text-transform:uppercase;
        font-weight:bold;
        font-size:10px;
        line-height:34px;
        background-image:url(../img/nav/divider.gif);
        background-repeat:no-repeat;
        background-position:0 8px;
    }

    #nav a#t_home       { width:47px; background:none; }
    #nav a#t_about      { width:57px; }
    #nav a#t_news       { width:53px; }
    #nav a#t_members    { width:95px; }
    #nav a#t_government { width:167px; }
    #nav a#t_technology { width:175px; }
    #nav a#t_links      { width:57px; }

    #nav a:hover       { color:#7184A9; }
    #nav a.current     { color:#7184A9; }


/* === SIDE NAVIGATION === */

    #subnav {
        width:149px;
        padding:0 0 50px 0;
        background:#C2CCDC;
        border-right:1px solid #092769;
        border-left:1px solid #092769;
    }

    #subnav td {
        width:149px;
        height:21px;
        background-image:url(../img/subnav/bg.gif);
        background-repeat:no-repeat;
        border-bottom:1px solid #092769;
    }

    #subnav td a {
        display:block;
        text-decoration:none;
        color:#FFFFFF;
        text-transform:uppercase;
        font-weight:bold;
        font-size:0.9em;
        padding:4px 0 1px 10px;
        height:16px;
    }

    #subnav td a:hover   { color:#092769; }
    #subnav td a.current { color:#092769; }

    #subnav table { margin-bottom:10px; }

    #subnav p {
        padding:2px 10px;
        font-size:11px;
        color:#092769;
    }


/* === CONTENT AREA === */

    #content {
        width:611px;
        background:#F1F6FF;
        border-right:1px solid #092769;
    }

    #content div.content { padding:10px 30px 40px 17px; }


    #content p, #content li { line-height:1.4em; }


/* === PAGE TITLES === */

    #pageheader {
        background:#F1F6FF url(../img/pagetitles/bg.gif);
        background-repeat:no-repeat;
        border-top:1px solid #092769;
        border-bottom:1px solid #092769;
        border-right:1px solid #092769;
        height:32px;
        padding:0 0 0 166px;
    }

    #pageheader img {
        margin-top:8px;
        margin-bottom:3px;
    }


/* === ICONIC LISTS === */

    .iconic ul, ul.iconic { padding:5px 0 0 20px; margin:0 0 20px 0; }
    .iconic li { margin:2px 0 4px 0; list-style:none; padding:3px 0 2px 22px; }
    .iconic li.audio { background:url(../img/fileicons/audio.gif) no-repeat 0px 3px; }
    .iconic li.movie { background:url(../img/fileicons/movie.gif) no-repeat 0px 3px; }
    .iconic li.wmv   { background:url(../img/fileicons/wmv.gif) no-repeat 0px 3px; }
    .iconic li.image { background:url(../img/fileicons/image.gif) no-repeat 0px 3px; }
    .iconic li.earth { background:url(../img/fileicons/earth.gif) no-repeat 0px 3px; }
    .iconic li.pdf   { background:url(../img/fileicons/pdf.gif) no-repeat 0px 3px; }
    .iconic li.doc   { background:url(../img/fileicons/doc.gif) no-repeat 0px 3px; }
    .iconic li.xls   { background:url(../img/fileicons/xls.gif) no-repeat 0px 3px; }
    .iconic li.ppt   { background:url(../img/fileicons/ppt.gif) no-repeat 0px 3px; }
    .iconic li.box   { background:url(../img/fileicons/box.gif) no-repeat 0px 3px; }
    .iconic li.page  { background:url(../img/fileicons/page.gif) no-repeat 0px 3px; }
    .iconic li.form  { background:url(../img/fileicons/form.gif) no-repeat 0px 3px; }
    .iconic li.env   { background:url(../img/fileicons/envelope.gif) no-repeat 0px 6px; }
    .iconic li.arrow { background:url(../img/fileicons/arrow.gif) no-repeat 0px 6px; padding-left:15px; }
    .iconic li.none  { background:none; }


/* === FOOTER === */

    #footer {
        height:104px;
        background:#7F8CAA url(../img/footer/bg.gif) no-repeat;
        padding:17px 0 0 0;
    }

    #footer #copyright {
        width:570px;
        font-size:0.9em;
        color:#092769;
        vertical-align:middle;
    }

    #footer img { vertical-align:middle; padding:0 0 0 15px; }

    #footer #privacy {
        width:190px;
        font-size:0.9em;
        font-weight:bold;
        text-align:center;
        text-transform:uppercase;
        color:#092769;
        vertical-align:middle;
    }

/* === MISC === */

    .posted { font: bold 9px tahoma,arial,sans-serif; color:#4C6292; }
    .back_top { font:normal 9px tahoma,arial,sans-serif; padding-left:25px; }

    .news_article { margin:0; padding:10px 0; }

    .external { margin:0 5px; text-align:middle; }

    table.thumbs { margin:15px 0; }
    table.thumbs a img,
        img.border { border:1px solid #092769; }

    .glossary_nav1 { font-weight:bold; border-bottom:2px solid #DBE2EF; margin:0 0 6px 0; padding:4px 0; }
    .glossary_nav2 { font-weight:bold; border-top:2px solid #DBE2EF; margin:12px 0 0 0; padding:4px 0; }

    table.officers { margin:20px 0 0 0; }
    table.officers td { padding-bottom:20px; }
    table.officers td img { border:1px solid black; }

    /* === NESTED FORMS === */

        table.form td { padding:3px; }

        input.number { text-align:right; }

        .required { font-weight:bold; }


/* === MEMBERS AREA === */

    #member_login {
        padding:20px 10px;
    }

/* === Photo Gallery === */

    #photo-gallery {
        padding: 10px 20px 20px 20px;
		color: #fff;
		font-size: 12px;
    }
	#photo-gallery a, #photo-gallery a:link  {
		color: #fff; text-decoration: none;
    }
	#photo-gallery img {
        border: 3px solid black;
    }

/* === TRANSMENU STYLES === */

/* this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
.transMenu {
	position:absolute;
	overflow:hidden;
	left:-1000px;
	top:-1000px;
	}

/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.transMenu .content {
	position:absolute;
	}

/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.transMenu .items {
	position:relative;
	left:0px; top:0px;
	z-index:2;
	border:1px solid black;
	}

.transMenu.top .items {
	border-top:none;
	}

/* each TR.item is one menu item */
.transMenu .item {
    color:#092769;
    text-decoration:none;
	font:bold 10px tahoma,verdana,arial,sans-serif;
	/* this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row */
	border:none;
	cursor:pointer;
	cursor:hand;
	}


/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.transMenu .background {
	position:absolute;
	left:0px; top:0px;
	z-index:1;
	-moz-opacity:.95;
	filter:alpha(opacity=95);
	}

/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
	position:absolute;
	z-index:3;
	top:3px; width:2px;
	-moz-opacity:.4;
	filter:alpha(opacity=40);
	}

/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
	position:absolute;
	z-index:1;
	left:3px; height:2px;
	-moz-opacity:.4;
	filter:alpha(opacity=40);
	}

/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.transMenu .item.hover {
	background:#092769;
	color:white;
	}

/* this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.transMenu .item img {
	margin-left:10px;
	}

#TransMenu5 { margin-left:-69px; }