@charset "utf-8";
body { background: #5d5d5d; margin: 0; padding: 0 0 40px 0; text-align: center; color: #000000; }
#container { width: 960px; background: #FFFFFF; margin: 0 auto; text-align: left; } 
#header { background-image:url(../images/layout/header.jpg); background-repeat:no-repeat; width:960px; height:227px; position:relative; } 
#logo { position:absolute; top:17px; left:63px; display:block; width:318px; height:117px; }
#logo_ioc { position:absolute; top:44px; left:860px; display:block; width:90px; height:60px; }


/* left column */
#sidebar1 { float: left; width: 181px; padding-top:5px;}
.frame { border:1px solid #e3e3e3; margin-left:5px; margin-bottom:5px; background-color:#FFFFFF; padding:2px;}
.frame h3 { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#FFFFFF; line-height:34px; text-indent:10px; }
.frame h3.travel { background-color:#70a94c;}
.frame h3.program { background-color:#e9b041;}
.frame h3.resources { background-color:#70a94c;}
ul#travel_menu { list-style: url(none) none outside; margin:0; padding:2px 0 0 0; z-index:0; }
ul#travel_menu li {width:170px; height:45px; font-family: Arial, Helvetica, sans-serif; font-size:11px; }
ul#travel_menu li a {display:block; width:120px; height:40px;  padding-left:45px; padding-top:5px; text-decoration:none; line-height:11px; background-image:url(../images/layout/buttons.gif); background-repeat:no-repeat; color:#515151; }
#item1 { background-position: left top;}
#item2 { background-position: left -100px;}
#item3 { background-position: left -200px;}
#item4 { background-position: left -300px;}
#item5 { background-position: left -400px;}
#item6 { background-position: left -500px;}
#item7 { background-position: left -600px;}
#item1:hover { background-position: left -50px;}
#item2:hover { background-position: left -150px;}
#item3:hover { background-position: left -250px;}
#item4:hover { background-position: left -350px;}
#item5:hover { background-position: left -450px;}
#item6:hover { background-position: left -550px;}
#item7:hover { background-position: left -650px;}
ul#travel_menu li a:hover {color:#FF0000;}
ul#wcse_resources {margin: 0; padding: 0; width: 170px; list-style: none; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
ul#wcse_resources li {padding:2px 2px 2px 5px;}
ul#wcse_resources li a {color:#515151; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
ul#wcse_resources li a:hover {color:#cc2328;}



/* right column */
#sidebar2 { float: right; width: 120px; background: #FFFFFF; padding:7px 5px 5px 5px; }




/* main content*/
#mainContent { margin:5px 130px 5px 186px; background-color:#FFFFFF; border:1px solid #e3e3e3; padding:2px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#515151; line-height:1.4;}
#mainContent p { margin:0 8px 10px 10px; padding:0;} 
#mainContent a {color:#008ed1; font-weight:bold;}
#mainContent a:hover {color:#cc2328; font-weight:bold;}
.subtitle {color:#5d9937; font-weight:bold;}
.img_left {float:left; padding:1px; border:1px solid #333333; background-color:#FFFFFF; margin:3px 10px 10px 10px;}

h1 { margin:0; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#FFFFFF; padding:8px 10px; line-height:normal;}
h2 { margin:0 0 0 0; padding:5px 10px 5px 10px; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#FFFFFF; line-height:normal; color:#008ed1;}
h3 { margin:0 0 10px 0; font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; color:#FFFFFF; padding:4px 10px;}
h4 { margin:20px 0 0px 0; font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; color:#515151; padding:4px 10px; background:#E7E3E7; line-height:normal; }

#mainContent #home_frame1 {background-color:#eef4ff; padding-bottom:10px;}
#mainContent #home_frame2 {background-color:#f4f8f1; padding-bottom:10px;}
#mainContent #home_frame3 {background-color:#f5f5f5; padding-bottom:10px;}
#mainContent #home_frame1 h1 {background-color:#eef4ff; background-color:#008ed1;}
#mainContent #home_frame2 h3 {background-color:#70a94c; }
#mainContent #home_frame3 h3 {background-color:#383838; }

#mainContent h1 {background-color:#008ed1; margin-bottom:10px;}
#mainContent h3 {background-color:#70a94c; margin-bottom:10px;}


/* footer */
#footer { padding: 0 10px 0 10px; background:#FFFFFF; background-image:url(../images/layout/footer.gif); background-repeat:no-repeat; background-position:bottom; width:940px; height:75px; overflow:hidden;} 
#footer p { margin: 0 auto; padding: 6px 0 5px 0; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#a7a7a7; text-align:center; line-height:1.4; }
#footer p a {color:#a7a7a7; text-decoration:none;}
#footer p a:hover {color:#666666; text-decoration:underline;}
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; }
#copyright {width:960px; margin:0 auto; color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
#copyright .left {width:650px; margin:0; padding:0; float:left; text-align:left;}
#copyright .right {width:300px; margin:0; padding:0; text-align:right; float:left;}
#copyright a {color:#FFFFFF; text-decoration:none;}
#copyright a:hover {color:#FFFFFF; text-decoration:underline;}



/* HORIZONTAL FREESTYLE MENU LAYOUT */
#listMenuRoot { position:absolute; width:960px; left:0px; top:195px; z-index:1000; }
/* make sure the script has the correct CSS property name (like 'visibility' or 'display') that changes to show/hide menus. */
/* All <ul> tags in the menu including the first level */ 
.menulist, .menulist  ul { margin: 0; padding: 0; list-style: none; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:13px; z-index:150;}
/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul { display: none; position: absolute; top: 1.2em; margin-top: 16px; /* I'm using ems and px to allow people to zoom their font */ left: -1px; width: 160px; z-index:1000; }
/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul { top: -1px; margin-top: 0; left: 161px; }
/* All menu items (<li> tags). 'float: left' lines them up horizontally, and they are positioned relatively to correctly offset submenus. Also, they have overlapping borders. */
.menulist li { float: left; display: block; position: relative; background:inherit; margin-right: -1px; margin-left:11px; z-index:1000;}
/* Items in submenus - override float/border/margin from above, restoring default vertical style */ 
.menulist ul li { float: none; margin: 0; margin-bottom: -1px; background-color:#cc2328; border-top:1px solid #ebbdbe;}
.menulist ul>li:last-child { margin-bottom: 1px; /* Mozilla fix */ }
/* Links inside the menu */ 
.menulist a { display: block; padding:5px 9px; color: #FFFFFF; text-decoration: none; border-right: 1px solid #cc2328; border-bottom: 1px solid #cc2328; border-left: 1px solid #cc2328;	}
/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist ul li a {color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:11px;  padding:5px 5px 5px 9px;}
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus { color: #FFFFFF; background-color:transparent; border-right: 1px solid #721316; border-bottom: 1px solid #b21f23; border-left: 1px solid #df7477; }
.menulist ul li a:hover{ background-color:#e60003;}
.menulist a.highlighted { color: #FFFFFF; background-color: #cc2328; }
/* If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    } */
/* Only style submenu indicators within submenus. */
.menulist a .subind { display: none; }
.menulist ul a .subind { display: block; float: right; }
/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a { float: left; }
.menulist ul a { float: none; }
/* \*/
.menulist a { float: none; }
/* */
/* HACKS: IE/Win:
 A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *:first-child+html affects IE7.
 You may want to move these to browser-specific style sheets. */
*:first-child+html .menulist ul li { float: left; width: 100%; }
* html .menulist ul li { float: left; height: 1%; }
* html .menulist ul a { height: 1%; }
/* End Hacks */


/* VERTICAL FREESTYLE MENU LAYOUT */
.list_v, .list_v ul { margin: 0; padding: 0; width: 170px; list-style: none; font-family:Arial, Helvetica, sans-serif; font-size:11px; }
.list_v ul { display: none; position: absolute; top: 0px; left: 171px; background-color:#FFFFFF; }
.list_v li { position: relative; background: #e3e3e3; margin-bottom: 1px; }
.list_v ul li { background: #e9b041;}
.list_v ul>li:last-child { margin-bottom: 1px; /* Mozilla fix */ }
.list_v a { display: block; padding:4px 5px 4px 16px; text-decoration: none; background-image:none; color:#676767; font-weight:bold; }
.list_v ul a {color:#FFFFFF; background-image:none; padding-left:6px;}
.list_v a:hover {color:#333333; background-image:url(../images/layout/arrow.gif); background-repeat:no-repeat; background-position:4px 6px; background-color:#e3e3e3;}
.list_v ul a:hover, .list_v ul a.highlighted:hover, .list_v ul a:focus, .list_v ul a.highlighted { color: #FFF; background-color: #c99023; background-image:none; padding-left:6px; }
.list_v a .subind { float: right; }
/*
 HACKS: IE/Win:
 A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *:first-child+html affects IE7.
 You may want to move these to browser-specific style sheets.
*/
*:first-child+html .list_v li { float: left; width: 100%; }
* html .list_v li { float: left; height: 1%; }
* html .list_v a { height: 1%; }
/* End Hacks */

/* gallery */
#gallery {border:#CCCCCC solid 1px; float:left; width:112px; margin:0 10px 70px 0; padding:6px 0px 0px 0px; text-align:center;}
#gallery img {margin:0 0 6px 0; padding:0 6px 0px 6px; border:none;}

.upload input {width:200px; border:1px solid #C5CCD9; background-color:#E6E9EF; }
.star {color:#FF0000;}