/* ------------- HEADER + MISC ---------------- */ .clearfix { clear:both;} img, img a, a:link, a:visited, a:hover, a:active, a:focus { border: none; -moz-outline-style: none; outline: none; } body { margin: 0px; padding: 20px 0; font-weight: normal; font-family:Arial, Helvetica, sans-serif; color: #000; } strong { font-weight:bold; } em { font-style:italic; } a { color:#397296; text-decoration: underline; margin: 0px; padding: 0px;} a:hover { color:#000;text-decoration: none;} p { line-height: 14px; font-size: 12px; margin: 12px 0; } .spacer { width: 100%; } form { margin:5px 0; padding:5px 0; } h1,h2,h3 { font-size: 20px; font-weight: normal; margin: 0px; padding: 0px; color: #1f2443; } h2 { margin-bottom: -5px; } #container { width: 960px; margin: 0px auto; background: url('../images/wrapper_bg.png') repeat-y;} #container_short { width: 960px; margin: 0px auto; background: url('../images/wrapper_short_bg.png') repeat-y;} #wrapper { margin: 0px auto; width: 960px; border: 0px solid red; clear: both; padding: 0px; height: 761px; min-height: 761px; height: auto; _height: 761px;} #header { float: left; width: 960px; height: 240px; border: 0px solid #000; background: url('../images/hdr_bg.jpg') 0px 0px no-repeat; } #logo { float: left; width:230px; height: 69px; position: relative; top: 90px; left: 13px;} #logo_title { float: right; width: 603px; height: 175px; position: relative; top: 26px; right: 53px; } #logo_title_large { float: right; width: 702px; height: 219px; position: relative; top: 0px; } /* ------------- content ---------------- */ #content_container { border: 0px solid blue; float: left; width: 450px; _width: 448px;/*height: 388px; min-height: 388px; height: auto; _height: 388px;*/ } #content_inner { border: 0px solid green; width: 390px; margin: 0px; padding: 15px 25px 0px 29px; _height: 299px; height: 381px; min-height: 381px;} #content_container_long { border: 0px solid blue; float: left; width: 520px; _width: 519px;/*height: 388px; min-height: 388px; height: auto; _height: 388px;*/ } #content_inner_long { border: 0px solid green; width:465px; margin: 0px; padding: 15px 25px 0px 29px; min-height: 321px; min-height: 321px;} #column_right { float: right; width: 250px; height: auto !important; height: 450px; min-height:450px; background: url('../images/mouse_right_img.png') no-repeat 0 240px; border: 0px solid blue; } #column_right_short { float: right; width: 180px; height: auto !important; height: 510px; min-height:510px; background: url('../images/mouse_right_img.png') no-repeat -70px 240px; border: 0px solid blue; } #mouse_img { float: right; width: 250px; height: 277px; /*background: url('../images/mouse_right_img.png') no-repeat top;*/ } #content_inner li, #content_inner_long li { font-size: 12px; list-style:circle; margin-left: 20px; } /*#inner_content h1 { color: #de7a1c; font-size: 18px; } #inner_content h2 { color: #333333; font-size: 15px; } #inner_content h3 { color: #000; font-size: 13px; }*/ #xcat { background: url('../images/x_logo.png') no-repeat top right; } #mighty { background: url('../images/mighty_logo.png') no-repeat top right; } /* ------------- Right MENU Long ---------------- */ #menu { float: right; width: 250px; border: 0px solid #fff; padding: 0px; margin: 0px; } #menu ul { float: right; margin: 0; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif;} #menu li { list-style-type: none; } #menu a { height: 52px; background:url('../images/menu_orange_btn.png') no-repeat; display: block; padding:8px 0 0px 17px; color: #fff; text-decoration: none; font-size: 20px; } #mouse_edge { background:url('../images/menu_orange__mouse_btn.png') no-repeat !important; } #mouse_edge:hover { background:url('../images/menu_orange__mouse_over_btn.png') no-repeat !important; } #menu a span { font-size: 12px; color: #e98414; } #menu a:hover { background:url('../images/menu_orange_over_btn.png') no-repeat; } /* ------------- Right MENU Short ---------------- */ #menu_short { float: right; width: 180px; border: 0px solid #fff; padding: 0px; margin: 0px; } #menu_short ul { float: right; margin: 0; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif;} #menu_short li { list-style-type: none; } #menu_short a { height: 46px; background:url('../images/menu_short.png') no-repeat; display: block; padding:14px 0 0px 12px; color: #fff; text-decoration: none; font-size: 14px; } #mouse_edge_short { background:url('../images/menu_short_mouse.png') no-repeat !important; } #mouse_edge_short:hover { background:url('../images/menu_short_mouse_over.png') no-repeat !important; } #menu_short a span { font-size: 11px; color: #e98414; } #menu_short a:hover { background:url('../images/menu_short_over.png') no-repeat; } .glossymenu { float: left; margin: 0px 0 0 0px; padding: 0; background: #1f2443; width: 260px; /*width of menu*/ } .glossymenu a.menuitem { background: url('../images/menu_btn.png') no-repeat; font: normal 16px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #fff; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto;padding:8px 0 8px 25px; text-decoration: none; font-weight: normal;} .glossymenu a.menuitem:visited, .glossymenu .menuitem:active { color: #fff; padding:8px 0 7px 25px; } .glossymenu a.selected{ background: url('../images/menu_btn_over.png') no-repeat; } .glossymenu a.menuitem:selected { background: url('../images/menu_btn_over.png') no-repeat; } .glossymenu a.menuitem .statusicon { /*CSS for icon image that gets dynamically added to headers*/ display: none; position: absolute; top: 5px; right: 5px; border: none; } .glossymenu a.menuitem:hover { background: url('../images/menu_btn_over.png') no-repeat; } .glossymenu div.submenu { padding-bottom:4px; /*DIV that contains each sub menu*/} .glossymenu div.submenu ul { /*UL of each sub menu*/ list-style-type: none; margin: 0; padding-left: 25px; } .glossymenu div.submenu ul li { border-bottom: 0px dotted #999; } .glossymenu div.submenu ul li a { margin: 0px; display: block; font: normal 11px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #fff; text-decoration: none; padding: 2px 0 !important; padding-left: 5px; background: #1f2443; } .glossymenu div.submenu ul li a:hover { color: #65a2cb; } /* ------------- logo scroller ---------------- */ #logoParade { width: 450px; height: 110px; position: relative; top: 3px; background: url('../images/parade_bg.jpg') repeat-x top; } #logoParade div.scrollableArea img { float: left; margin-left: 25px; padding: 0px; margin: 0px; border: 0px solid red; } #logoParade div.scrollableArea a { padding: 0px; margin: 0px; } /* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */ /* Invisible left hotspot */ div.scrollingHotSpotLeft { /* The hotspots have a minimum width of 100 pixels and if there is room the will grow and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */ min-width: 75px; width: 10%; height: 100%; /* There is a big background image and it's used to solve some problems I experienced in Internet Explorer 6. */ background-image: url(../../images/big_transparent.gif); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; left: 0; /* The first url is for Firefox and other browsers, the second is for Internet Explorer */ cursor: url(../../images/cursors/cursor_arrow_left.cur), url(../images/cursors/cursor_arrow_left.cur),w-resize; } /* Visible left hotspot */ div.scrollingHotSpotLeftVisible { background-image: url(../../images/arrow_left.gif); background-color: #fff; background-repeat: no-repeat; opacity: 0.35; /* Standard CSS3 opacity setting */ -moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */ filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */ zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */ } /* Invisible right hotspot */ div.scrollingHotSpotRight { min-width: 75px; width: 10%; height: 100%; background-image: url(../../images/big_transparent.gif); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; right: 0; cursor: url(../../images/cursors/cursor_arrow_right.cur), url(../images/cursors/cursor_arrow_right.cur),e-resize; } /* Visible right hotspot */ div.scrollingHotSpotRightVisible { background-image: url(../../images/arrow_right.gif); background-color: #fff; background-repeat: no-repeat; opacity: 0.35; filter: alpha(opacity = 35); -moz-opacity: 0.35; zoom: 1; } /* The scroll wrapper is always the same width and height as the containing element (div). Overflow is hidden because you don't want to show all of the scrollable area. */ div.scrollWrapper { position: relative; overflow: hidden; width: 100%; height: 100%; } div.scrollableArea { position: relative; width: auto; height: 100%; } .fadecontentwrapper{ /* Total width: 350px+5px+5px=360px Read relative width relations for the other two containers below! */ position: relative; background: transparent url('../../images/book.jpg') 0px 4px no-repeat; width:474px; height:275px; border: 0px solid maroon; overflow: hidden; } .fadecontenttoggler{ /*style for DIV used to contain toggler links. Total width: 350px+5px+5px=360px */ width: 350px; border: 0px solid maroon; border-top-width: 0; overflow: hidden; } .fadecontenttoggler a{ /*style for every navigational link within toggler */ text-decoration: none; border-right: 0px solid maroon; padding: 0 5px; float: left; display: block; font-weight: bold; color: black; } #booktoggler {width:452px; background:url('../../images/book_footer.jpg') no-repeat; height: 45px; padding: 0 11px;} .fadecontenttoggler a.next {float: right; } #book p { float: left; width: 205px; font-size: 13px; margin-left:3px; line-height: 14px;} .fadecontent{ /*style for each fade content DIV within wrapper. Total width: 330px+10px+10px=350px (".fadecontentwrapper" width minus its padding and borders, if any) */ position: absolute; background: transparent url('../../images/book.jpg') 0px 4px no-repeat; padding:45px 18px 0 20px; visibility: hidden; width: 474px; } .book1 { background: url('../../images/1800.jpg') 0px 4px no-repeat; } .book2 { background: url('../../images/1920.jpg') 0px 4px no-repeat; } .book3 { background: url('../../images/1970.jpg') 0px 4px no-repeat; } .book4 { background: url('../../images/1990.jpg') 0px 4px no-repeat; } .book5 { background: url('../../images/2000.jpg') 0px 4px no-repeat; } /* ------------- accordian page ---------------- */ li { list-style-type: none; } .basic { width: 460px; font-family: verdana; border: 0px solid black; } .basic div { background-color: #ced8de; } .basic p { color: 1f2443; margin-bottom : 10px; border: none; text-decoration: none; font-weight: normal; font-size: 12px; margin: 0px; padding: 10px; } .basic a { cursor:pointer; display:block; padding:6px 0 8px 15px; margin-top: 0; text-decoration: none; font-weight: normal; font-size: 16px; color: black; background-color: #00a0c6; border-top: 0px solid #FFFFFF; border-bottom: 1px solid #fff; background-image: url('../images/accordian_tab.gif'); color: #fff; } .basic a:hover { background-color: white; background-image: url('../images/accordian_tab.gif'); color: #6aa8cf;} .basic a.selected { color: black; background-color: #80cfe2; background-image: url('../images/accordian_tab.gif'); color: #6aa8cf; } .basic p a { position: relative; right: 0px; border: none; background: none !important; width: 170px; _width: 170px; margin: 0px; padding: 0px; } a.apply { height: 35px; background: url('../images/apply_btn.png') no-repeat; width: 170px; _width: 170px;margin: 10px 0px;} .apply:hover { background: url('../images/apply_btn_over.png') no-repeat !important; width: 170px; _width: 170px; } /* ------------- FOOTER ---------------- */ #footer { float: right; width: 700px; height: 50px; background: #766a5d; border: 0px solid #000; } #copyright { color: #fff; width: 680px; padding: 15px 0 0 20px; text-align: left; font-size: 0.9em;} #copyright a { color: #fff; text-decoration: none;} #copyright a:hover { color: #fff; text-decoration: underline;} #menu_footer { float: right; width: 500px; text-align: left; padding-top: 85px; border: 0px solid red; text-transform: uppercase; font-size: 0.8em; font-weight: bold; } #menu_footer a:hover { text-decoration: none; } /* cms */ #inner_content #metainfo { border:1px solid #000; color:#333333;margin:10px 0pt 5px; padding:3px; } #inner_content .msg_good { background:#FBE6F2 none repeat scroll 0%; border:1px solid #D893A1; color:#333333;margin:10px 0pt 5px; padding:10px; } #inner_content .msg_bad { background:#FBE6F2 none repeat scroll 0%; border:1px solid #D893A1; color:#333333;margin:10px 0pt 5px; padding:10px; } label { float: left; width: 200px;} fieldset { margin-bottom: 10px; } legend {color: #000 } div.maxchars { height: 20px; width: 300px; color: red; margin-left: 200px; } .error h4 { font-size: 16px; margin: 0px; padding: 0px; margin-bottom: 10px;} .error{padding: 10px; border: 1px solid red; color: red; font-weight: bold; margin-bottom: 20px;} .center { text-align: center; } /* CG */ div.glossymenu div.submenu { display: none; } a.addthis_button { margin: 0px 0px 0px 270px; text-decoration: none; } /* WB */ .opendays { padding: 20px; } .opendays p { font-size: 14px; line-height: 16px; } .opendays p.title { color: #141f61; text-align: center; font-size: 22px; line-height: 26px; font-weight: bold; } .dates { color: #ff7500; }