/* force vertical scrollbars to prevent centered content from "jumping around" */ html { overflow-y: scroll; } body { background-image: none; background-color: #FFF; margin: 0; font-family: Verdana, sans-serif; /* this adjusts the default base device width to 10px i.e. relative sizes below the tag are a multiple of 10px (23em => 230px) */ font-size: 0.625em; } /* this is only used for XHTML 1.1 compliance */ fieldset { border: 0; margin: 0; padding: 0; } .leftfloat {} .leftfloat > * { float: left; display: block; } .leftfloat:after { clear: both; } .clearfloat { clear: both; } .padder { padding: 10px; } img { border: 0; } /** * These are XHTML 1.1 compliant classes from RTE for content styling */ .align-left { text-align: left; } .align-right { text-align: right; } .align-justify { text-align: justify; } /** * Popup styling */ .popup { visibility: hidden; position: absolute; z-index: 1000; border: 0.1em solid #26292b; background: #ECECEC; /* this needs to be fixed, otherwise the padding can't be applied to the rounded div padder */ padding: 5px 10px; text-align: left; } .popup a { color: #666666; font-size: 0.9em; text-decoration: none; display: block; margin-top: 0.25em; margin-bottom: 0.25em; } .popup a:hover { color: black; } #search{ display:block !important; position: absolute; top:60px; left:4px; background:transparent none repeat scroll 0 0; border:0 none; z-index: 2; } #search input[type=text]{ background-image:url(../images/search_input_field.png); color:#666666; font-size:1.1em; height:16px; padding-left:20px; padding-right:10px; padding-top:3px; width:130px; } #search input[type=submit]{ background-image: url(../images/search_button.png); width:53px; margin-top:2px; } #search input[type=submit]:active{ background-image: url(../images/search_button_active.png); } #search form.search_eng input[type=submit]{ background-image: url(../images/search_button_eng.png) !important; width:53px; margin-top:2px; } #search form.search_eng input[type=submit]:active{ background-image: url(../images/search_button_active_eng.png) !important; } .search form { margin-top: 0.25em; margin-bottom: 0.25em; } .search form input[type=text], .search form input[type=submit] { border: 0; background-image: url(../images/search_input_bg.png); background-repeat: no-repeat; background-color: transparent; /* fixed because of fixed background image */ width: 90px; padding-left: 5px; padding-right: 5px; height: 13px; padding-top: 2px; font-size: 9px; display: block; float: left; margin-right: 5px; margin-top: 1px; } .search form input[type=submit] { font-weight: bold; margin: 0; width: 53px; height: 17px; background-image:url("../images/search_button.png") !important; } .search form input[type=submit]:active { background-image:url("../images/search_button_active.png") !important; } .shadow { background: #222222; z-index: 999; border: 0; visibility: hidden; } /* #background { width: 100%; background-image: url(../images/circle.png); background-repeat: repeat-x; } */ #service_menu { /* fixed by design */ background-image: url(../images/itc_logo_wo_shadow.png); background-repeat: no-repeat; background-position: 731px 0; width: 950px; height: 110px; margin-left: auto; margin-right: auto; text-align: right; position:relative; left: -5px; } #service_menu ul { list-style-type: none; margin: 0; margin-right: 0.4em; margin-top: 0.5em; float: left; padding-left:0; color: white; letter-spacing:1px; } #service_menu ul li { float: left; margin-left: 0.2em; } #service_menu ul li span { /* has to be fixed size! */ width: 3px; height: 1.8em; display: block; float: left; } #service_menu ul li:hover span, #service_menu ul li.hover span { background-image: none; background-repeat: no-repeat; background-position: right top; } #service_menu ul li:hover a + span, #service_menu ul li.hover a + span { background-image: none; background-position: left top; } #service_menu ul li a { font-family:"Trebuchet MS",Verdana,Arial,sans-serif; font-size:10px; font-weight:bold; text-transform:uppercase; text-decoration: none; color: #007CA4; padding-top: 0.2em; padding-bottom: 0.5em; padding-left: 0.7em; padding-right: 0.7em; display: block; float: left; } #service_menu ul li:hover a, #service_menu ul li.hover a { background-image: none; background-repeat: repeat-x; color: #003366; } #service_menu ul li label { color: #9AACC6; font-size: 0.9em; margin-left: 5px; margin-top: 0.2em; display: block; float: left; } #service_menu ul li #fontsizes { float: left; width: 35px; height: 1.2em; margin-top: 0.2em; margin-left: 5px; margin-right: 5px; } #service_menu ul li #fontsizes a { background-repeat: no-repeat; height: 12px; padding: 0; width: 11px; } #service_menu ul li #fontsizes .small { background-image: url(../images/fontsize/small.png); } #service_menu ul li #fontsizes .medium { background-image: url(../images/fontsize/medium.png); } #service_menu ul li #fontsizes .large { background-image: url(../images/fontsize/large.png); width: 13px; } #service_menu ul li #fontsizes .small:hover { background-image: url(../images/fontsize/small_hover.png); } #service_menu ul li #fontsizes .medium:hover { background-image: url(../images/fontsize/medium_hover.png); } #service_menu ul li #fontsizes .large:hover { background-image: url(../images/fontsize/large_hover.png); } #header_area { /* fixed by design */ /* indead of 980px:) */ width: 940px; margin-left: auto; margin-right: auto; } #itcampus_logo_content { position: absolute; left: 797px; top: 0px; width: 160px; height: 142px; background-repeat: no-repeat; } #header_text { background-image:url(../images/header_text_bg.png); background-repeat:repeat-x; height:94px; left:0px; position:absolute; top:100px; padding-right:5px; } #itc_logo{ right:27px; position:absolute; top:0px; display: none; } #header { height: 224px; position: relative; clear:both; margin-left:0; overflow:hidden; width:940px; } #main_menu { background-color:#007CA4; display:block; font-family:"Trebuchet MS",Verdana,Arial,sans-serif; font-size:11px; font-weight:bold; height:18px; text-transform:uppercase; margin-bottom:5px; margin-left: 0; width: 940px; padding-top:2px; padding-bottom:1px; } #main_menu.orange { background-color:#E67300; } #main_menu.red { background-color:#C1002B; } #main_menu.light_blue { background-color:#269EDB; } #main_menu.green { background-color:#96AB39; } #main_menu.purble { background-color:#800080; } #main_menu > ul { left:0px; list-style-type:none; padding-left:0; position:relative; } #main_menu > ul > li { display: block; float: left; margin-right: 0; height: 20px; padding: 0; padding-left:0; } /* #main_menu > ul > li.hover { padding-top:3px; margin-top:-8px; border-top: 5px solid #DDD; } */ #main_menu > ul > li > span { width: 4px; height: 20px; background-image: none; background-repeat: no-repeat; background-position: top right; display: none; float: left; margin: 0; } #main_menu > ul > li:hover > span, #main_menu > ul > li.active > span, #main_menu > ul > li.hover > span { background-image: none; } #main_menu > ul > li > a + span { background-image: none; background-position: top left; } #main_menu > ul > li:hover > a + span, #main_menu > ul > li.active > a + span, #main_menu > ul > li.hover > a + span { background-image: none; } #main_menu > ul > li > a { color: white; text-decoration: none; display: inline; float: none; height: auto; background-image: none; font-size: 1.1em; text-shadow:0; padding: 2px 10px 3px; letter-spacing: 1px; } #main_menu > ul > li:hover > a, #main_menu > ul > li.active > a, #main_menu > ul > li.hover > a { background-image: none; text-shadow: 0; color: #FFF; background-color:#233356; } #main_menu.orange > ul > li:hover > a, #main_menu.orange > ul > li.active > a, #main_menu.orange > ul > li.hover > a { background-color:#AA5500; } #main_menu.red > ul > li:hover > a, #main_menu.red > ul > li.active > a, #main_menu.red > ul > li.hover > a { background-color:#8A001F; } #main_menu.light_blue > ul > li:hover > a, #main_menu.light_blue > ul > li.active > a, #main_menu.light_blue > ul > li.hover > a { background-color:#1B78A5; } #main_menu.green > ul > li:hover > a, #main_menu.green > ul > li.active > a, #main_menu.green > ul > li.hover > a { background-color:#71802B; } #main_menu.purble > ul > li:hover > a, #main_menu.purble > ul > li.active > a, #main_menu.purble > ul > li.hover > a { background-color:#400040; } #main_menu .popup { border: 0; background-color: #E2EFF3; opacity: 1 !important; letter-spacing: 1px; } #main_menu .popup div { display: none; } #main_menu .popup div.autoPadDiv { padding: 0px !important; display: block; } #main_menu .popup ul { list-style-type: none; margin: 0; padding: 0; } #main_menu .popup ul li { border-bottom: 1px solid #FFF; padding-top:2px; } #main_menu .popup ul li a{ color:#233356; font-size:11px; font-weight:normal; margin:0 0 2px; padding:0 10px; } #main_menu .popup ul li:hover { background-color: #233356; } #main_menu .popup ul li:hover a{ color:#FFF; } #main_menu .shadow { background: #222222; } #main_menu .popup a { color: #222222; display: block; margin-top: 0.8em; margin-bottom: 0.8em; white-space: nowrap; } #main_menu .popup a:hover { color: #0099ff; } #content { background-image:none; background-position:0 0px; background-repeat:repeat-x; background-color: white; width: 940px; /* 950 - padding */ margin-left: auto; margin-right: auto; padding-top:20px; padding-left: 0; padding-right: 0; min-height: 115px; position: relative; } #footer { width: 940px; margin-left: auto; margin-right: auto; margin-bottom: 1em; color: #999999; padding-bottom: 6px; background-image: url(../images/footer.png); background-repeat: no-repeat; background-position: left bottom; background-color: white; overflow: visible; } #footer #copyright { float: left; width: 500px; font-size: 0.9em; background: white; padding-left: 0; padding-top: 1.5em; padding-bottom: 1.5em; } #footer ul#other_menu { float: right; width: 420px; margin: 0; padding-right: 0; padding-top: 1em; padding-bottom: 1.2em; padding-left: 0; list-style-type: none; background: white; } #footer ul#other_menu li { float: right; border-right: 0.1em solid #233356; margin-right: 1em; padding-right: 1em; font-size: 0.9em; /*line-height: 0.9em;*/ } #footer ul#other_menu li:first-child { border-right: 0; margin-right: 0; padding-right: 0; } #footer ul#other_menu li a { color:#233356; font-size:11px; font-weight:normal; text-decoration:none; } #footer ul#other_menu li a:hover { color: #007CA4; text-decoration: underline; } /** * Tabbertabs CSS for static and dynamic tabs **/ #content .tabberstatic, #content .tabberlive { left:0px; position:relative; /* this is actually a layout bug - the content area should be 934px excluding padding however, these tabs should be 936px in width (with shadows), so we have to cheat a bit */ margin-left: -1px; margin-right: -1px; } #content .tabberstatic .header, #content .tabberlive .header { margin: 0; height: 8px; background-image: url(../images/tab_header.png); background-repeat: no-repeat; } #content .tabberstatic .footer, #content .tabberlive .footer { height: 15px; background-image: url(../images/tab_footer.png); background-repeat: no-repeat; } #content .tabberlive .tabbertabhide { display: none; } #content ul.tabbernav { list-style-type: none; margin: 0; padding: 0; position: relative; height: 2.6em; /* because of the shadow of the following tabs */ margin-left: 3px; /* because all tabs but the first should be slightly moved into another by a negative left margin of 5px */ padding-left: 5px; } #content ul.tabbernav li { float: left; text-align: center; width: 171px; margin-left: -5px; height: 1.9em; padding-top: 0.7em; background-image: url(../images/main_tab_inactive.png); background-repeat: no-repeat; background-position: left 6px; } #content ul.tabbernav li.tabberactive { background-image: url(../images/main_tab_active.png); } #content ul.tabbernav li a { color: white; font-size: 1.1em; font-weight: bold; text-decoration: none; } #content ul.tabbernav li.tabberactive a { color: #003373; } #content .tabbertab { clear: both; min-height: 12.5em; padding-left: 1em; padding-right: 1em; background-image: url(../images/tab_bg.png); background-repeat: repeat-y; } #content .tabbertab ul.tabbermenu { list-style-type: none; padding: 0; margin-bottom: 20px; margin-top: -10px; } #content .tabbertab ul.tabbermenu li { float: left; margin-right: 20px; } #content .tabbertab ul.tabbermenu li a { text-decoration: none; color: #999999; } #content .tabbertab ul.tabbermenu li a:hover { text-decoration: underline; } #content .tabbertab ul.tabbermenu li.active a { color: black; font-weight: bold; } .clear{ clear: both; }