body { font-family:Arial, Helvetica, sans-serif; background-color:#FFFFFF; font-size:1.3em;} /* Dark orange : #e64e00 Light orange : #ff7e00 (hover) */ h1 { height:131px; margin-left:auto; margin-right:auto; background-image:url(../images/logo-UP.gif); background-position:center top; background-repeat:no-repeat;} h1 span{ visibility:hidden;} #header {background-color:#000000; background-image:url(../images/logo-UP.gif); background-position:center top; background-repeat:no-repeat; top:-131px; position:relative;} #header .container { width:940px; margin-left:auto; margin-right:auto; padding:10px; text-align:right;} #header ul.left {font-size:0.7em;float:left; line-height:0.7em;} #header ul.left li{ line-height:1.0em;display:inline;border-left: 1px solid #999999;padding-left:5px; margin-left:5px; } #header ul.left li.first{border-left: 0px solid #999999; padding-left:0px;line-height:1.0em;margin-left:0px;} #header ul li a{color:#999999; text-decoration:none;} #header ul li a:hover{color:#FFFFFF;} #header ul.right {font-size:0.7em; line-height:0.8em;} #header ul.right li{ line-height:1.0em;display:inline;border-left: 1px solid #999999;padding-left:5px; margin-left:5px;} #header ul.right li.first{border-left: 0px solid #999999; padding-left:0px;line-height:1.0em;margin-left:0px;} /* style the second level background */ #menu ul ul a.drop, #menu ul ul a.drop:visited {background:#d4d8bd;} /* style the second level hover */ #menu ul ul a.drop:hover{background:#c9ba65;} #menu ul ul :hover > a.drop {background:#c9ba65 url() no-repeat 120px center;} /* style the third level background */ #menu ul ul ul a, #menu ul ul ul a:visited {background:#e2dfa8;} /* style the third level hover */ #menu ul ul ul a:hover {background:#b2ab9b;} /* hide the sub levels and give them a positon absolute so that they take up no room */ #menu ul ul {visibility:hidden;position:absolute;height:0;top:35px;left:0; width:200px;} /* another hack for IE5.5 */ * html #menu ul ul {top:34px;t\op:35px;center; display:none;} /* position the third level flyout menu */ #menu ul ul ul{left:200px; top:-1px; width:200px;} /* position the third level flyout menu for a left flyout */ #menu ul ul ul.left {left:-200px;} /* style the table so that it takes no ppart in the layout - required for IE to work */ #menu table {position:absolute; top:0; left:0; border-collapse:collapse;} /* style the second level links */ #menu ul ul a, #menu ul ul a:visited { color:#ffffff; height:auto; line-height:1em; padding:7px 7px; width:190px; margin-left:3px; text-align:left; background-image:url(../images/bgmenu.png); padding-top:9px; margin-left:3px;} /* yet another hack for IE5.5 */ * html #menu ul ul a, * html #menu ul ul a:visited {width:190px;w\idth:190px;text-align:left;center; display:none;} /* style the top level hover */ #menu ul ul a:hover{ border:0px; width:190px;background:none; background:url(../images/bgmenu.png); background-position:0px -150px; color:#e64e00;margin-left:3px;} #menu ul ul :hover > a { border:0px;width:190px; background:none; background:url(../images/bgmenu.png); background-position:0px -150px;color:#e64e00;margin-left:3px;} #menu a.first:hover {color:#e64e00; border-left:0px solid #FFFFFF; border-right:3px solid #FFFFFF; width:101px; padding-left:3px;background-image:url(../images/bg-menu.gif);background-position:-1200px -7px;} #menu :hover > a.first {color:#e64e00 border-left:0px solid #FFFFFF; border-right:3px solid #FFFFFF;width:101px;padding-left:3px;background-image:url(../images/bg-menu.gif);background-position:-1200px -7px;} #menu a.last:hover {padding:0x; margin:0px;color:#e64e00; border-left:3px solid #FFFFFF; border-right:0px solid #FFFFFF; width:98px; padding-right:3px;background-image:url(../images/bg-menu.gif);background-position:-1200px -7px;} #menu :hover > a.last {color:#e64e00; border-left:3px solid #FFFFFF; border-right:0px solid #FFFFFF;width:98px;padding-right:3px;background-image:url(../images/bg-menu.gif);background-position:-1200px -7px;} /* make the second level visible when hover on first level list OR link */ #menu ul li:hover ul, #menu ul a:hover ul{visibility:visible; } /* keep the third level hidden when you hover on first level list OR link */ #menu ul :hover ul ul{visibility:hidden;} /* make the third level visible when you hover over second level list OR link */ #menu ul :hover ul :hover ul{ visibility:visible;} /* style the links for the top level */ #menu a, #menu a:visited {display:block; width:101px; height:28px; text-align:center; text-decoration:none; color: #FFFFFF; padding-top:7px; margin-left:3px; margin-right:3px;} /* a hack so that IE5.5 faulty box model is corrected */ * html #menu a, * html #menu a:visited {width:98px;margin-left:3px; margin-right:3px;} * html #menu a, * html a.last, * html #menu a.last {width:98px; } #menu {top:-20px;position:relative; z-index:1} *html #menu {top:-20px;position:relative; z-index:auto;} #menu .container {background-image:url(../images/bg-menu.gif);background-position:0px -7px; width:960px;margin-left:auto; margin-right:auto;font-size:0.9em;position:relative;}/* /* remove all the bullets, borders and padding from the default list styling */ #menu ul ul {width:107px;} /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ #menu li {float:left;width:107px;position:relative;} #menu li.upContact {float:left;width:104px;position:relative;} #ctl00_Home .upHome, #ctl00_Products .upProducts, #ctl00_Services .upServices, #ctl00_News .upNews, #ctl00_Aboutus .upAboutus, #ctl00_Ourpeople .upOurpeople, #ctl00_CSR .upCSR, #ctl00_Needs .upNeeds, #ctl00_Contact .upContact { background-image:url(../images/bg-menu.gif);background-position:-1000px -7px ; } #menu a:hover {color:#e64e00; border-left:3px solid #FFFFFF; border-right:3px solid #FFFFFF; width:101px; background-image:url(../images/bg-menu.gif);background-position:-1200px -7px;margin-left:0px; margin-right:0px;} #menu :hover > a {color:#e64e00; border-left:3px solid #FFFFFF; border-right:3px solid #FFFFFF;width:101px;background-image:url(../images/bg-menu.gif);background-position:-1200px -7px;margin-left:0px; margin-right:0px;} /*menu list */ ul.menulist {margin-left:10px; margin-right:10px;} ul.menulist li {background-color:#ebebeb ;font-size:0.8em; clear:both;text-align:left; font-weight: normal;} ul.menulist li a {display:block; border-bottom:2px #FFFFFF solid;padding:5px;text-decoration:none;color:#666666;font-weight: normal; padding-top:7px; padding-bottom:7px;} ul.menulist li a:hover {background-color:#666; color:#fff;} ul.menulist li a span {background-color:#ff7e00;padding:7px;border-bottom:2px #FFFFFF solid; float:left; margin-left:-7px; margin-top:-7px; margin-right:5px; padding-left:8px; padding-right:8px; color:#FFFFFF;} ul.menulist li a:hover span { background-color:#e64e00;} ul.menulist li.menulistSel span{ background-color:#e64e00;} ul.menulist li.menulistSel a{background-color:#999; color:#fff;} ul.menulist li.menulistSel a:hover span { background-color:#e64e00;} ul.menulist li.menulistSel a:hover {background-color:#666; color:#fff;} #image { background-image:url(../images/bg-imgheader.gif); background-position:bottom; height:245px;top:-20px;position:relative; z-index:-1} #image .loader {width:960px;height:245px; background-repeat:no-repeat; background-position:center 90px;margin-left:auto; margin-right:auto; } #image #img {width:960px;height:232px;} #features {background-color:#666666; padding-bottom:30px;top:-20px;position:relative;} #features .titles { background-image:url(../images/bg-features.gif); color:#FFFFFF;} #features .title1{ width:280px; float:left; float:left; padding:5px; background-image:url(../images/bg-featuretitle.gif); padding-left:10px; padding-right:10px; font-weight:normal;} #features .title2{ width:280px; float:left; margin-left:30px; ;float:left;padding:5px;background-image:url(../images/bg-featuretitle.gif); padding-left:10px; padding-right:10px; font-weight:normal;} #features .title3{ width:280px; float:left; margin-left:30px; ;float:left;padding:5px;background-image:url(../images/bg-featuretitle.gif); padding-left:10px; padding-right:10px; font-weight:normal;} #features .container { width:960px; margin-left:auto; margin-right:auto;} #features .feature1{ width:280px; float:left; background-color:#FFFFFF; float:left; background-image:url(../images/feature-fade.gif); background-position:bottom; background-repeat:no-repeat; min-height:182px;padding:10px;} #features .feature2{ width:280px; float:left; margin-left:30px; background-color:#FFFFFF;float:left; background-image:url(../images/feature-fade.gif); background-position:bottom; background-repeat:no-repeat; min-height:182px; padding:10px;} #features .feature3{ width:280px; float:left; margin-left:30px; background-color:#FFFFFF;float:left; background-image:url(../images/feature-fade.gif); background-position:bottom; background-repeat:no-repeat; min-height:182px;padding:10px;} #features .feature1 h4 { padding-top:10px; padding-bottom:5px; font-weight:lighter; font-size:1.4em; color:#999999;} #features .feature2 h4 { padding-top:10px; padding-bottom:5px; font-weight:lighter; font-size:1.4em; color:#999999; text-align:center;} #features .feature3 h4 { padding-top:10px; padding-bottom:5px; font-weight:lighter; font-size:1.4em; color:#999999; line-height:1.2em;} #features .feature1 p, #features .feature3 p { font-size:0.8em; line-height:1.4em; padding-top:10px; color:#666666;} #features .feature1 a, #features .feature3 a { font-size:0.8em; font-weight:bold; text-decoration:none; color:#e64e00; text-transform:uppercase;} #features .feature1 a:hover, #features .feature3 a:hover {color:#ff7e00;} #features .feature2 p{ height:120px;} #features .feature2 a { width:64px; height:64px; background-image:url(../images/feature-video-but.gif); float:left; margin-top:28px; margin-left:108px;} #features .feature2 a:hover {color:#ff7e00; background-position: center -64px;} #features .feature2 a span {display:none;} #features .feature1 div, #features .feature3 div {min-height:155px; overflow:hidden;} #footer { font-size:0.7em; color:#999999; top:-10px;position:relative; padding-bottom:0px;} #footer .container{width:950px; margin-left:auto; margin-right:auto; padding:5px;} #footer ul {float:right;} #footer ul li {line-height:1.0em;display:inline;border-left: 1px solid #999999;padding-left:5px; margin-left:5px;} #footer ul li.first{line-height:1.0em;border-left: 0px solid #999999; padding-left:0px;margin-left:0px;} #footer ul li.rss{line-height:1.0em;border-left: 0px solid #999999; padding-left:0px;margin-left:0px;} #footer ul li.rss a{ background-image:url(../images/rss-logo-small.gif); background-repeat:no-repeat; padding-left:18px; background-position:0px 2px;} #footer ul li a {color:#999999; text-decoration:none;} #footer ul li a:hover {color:#ff7e00;} #footer p { padding-left:5px;} #footer p span {border-left: 1px solid #999999; padding-left:5px; margin-left:5px;} #footer p span a {color:#e64e00; text-decoration:none;} #footer p span a:hover {color:#ff7e00;} .clear { clear:both;} #frontpage{ top:-20px;position:relative;} #frontpage .container{width:960px; margin-left:auto; margin-right:auto; background-repeat:no-repeat; background-position:center 12px;} #frontpage .container h2 { margin:10px; color:#666666; font-weight:normal; font-size:1.2em; border-bottom: 2px dotted #bbb; padding-bottom:5px; line-height:1.4em;} #frontpage .container h2 span {} #frontpage .welcome {float:left; width:630px;margin-right:30px;padding-bottom:10px;} #frontpage .welcome div{float:right; width:330px; height:220px;} #frontpage .welcome a { font-size:0.8em; font-weight:bold; text-decoration:none; color:#e64e00; text-transform:uppercase;} #frontpage .welcome a:hover {color:#ff7e00;} #frontpage .container h2 {width:280px;} #frontpage .welcome p { margin:10px; color:#666666; font-size:0.8em; line-height:1.4em; padding-bottom:0px;} #frontpage .philosophy {float:left; width:300px;padding-bottom:10px;} #frontpage .philosophy h2 { margin:10px; color:#666666; font-weight:normal; font-size:1.2em; border-bottom: 2px dotted #bbb; padding-bottom:5px; line-height:1.4em;} #frontpage .philosophy ul { padding-bottom:10px; margin-left:30px;} #frontpage .philosophy li {list-style-type:square; margin:10px; color:#666666; font-size:0.8em; line-height:1.4em; margin-bottom:0px; margin-top:0px;} #cont1col { top:-20px;position:relative; margin-bottom:10px;} #cont1col .container {width:960px; margin-left:auto; margin-right:auto;} #cont1col .container h2 { margin:10px; color:#666666; font-weight:normal; font-size:1.2em; border-bottom: 2px dotted #bbb; padding-bottom:5px;line-height:1.4em;} #cont1col .container p { margin:10px; color:#666666; font-size:0.8em; line-height:1.4em; padding-bottom:10px;} #cont1col .container a {color:#e64e00; font-weight:bold; text-decoration:none;} #cont1col .container a:hover {color:#ff7e00;} #cont2cols { top:-20px;position:relative; margin-bottom:10px;} #cont2cols .container{width:960px; margin-left:auto; margin-right:auto;} #cont2cols .container .col1 {width:630px; float:left;} #cont2cols .container .col1 h2 { margin:10px; color:#666666; font-weight:normal; font-size:1.2em; border-bottom: 2px dotted #bbb; padding-bottom:5px;line-height:1.4em;} #cont2cols h2 span { color:#bbb; border-right: solid 1px #bbb; margin-right:5px; padding-right:5px;} #cont2cols .container .col1 h3 { margin:10px; color:#666666; font-weight:normal; font-size:1.0em; border-bottom: 1px dotted #bbb; padding-bottom:5px;line-height:1.2em; font-weight:bold;} #cont2cols .container .col1 p { margin:10px; color:#666666; font-size:0.8em; line-height:1.4em;} #cont2cols .container .col1 ul { padding-bottom:10px; margin-left:30px;} #cont2cols .container .col1 li {list-style-type:square; margin:10px; color:#666666; font-size:0.8em; line-height:1.4em; margin-bottom:0px; margin-top:0px;} #cont2cols .container .col1 a {color:#e64e00; font-weight:bold; text-decoration:none;} #cont2cols .container .col1 a:hover {color:#ff7e00;} #cont2cols .container .col2 {width:300px; margin-left:30px; float:left; text-align: center;} #cont2cols .container .col0 {width:300px; margin-right:30px; float:left; text-align: center;} #cont2cols .container .col2 h2, #cont2cols .container .col0 h2 { margin:10px; color:#666666; font-weight:normal; font-size:1.2em; border-bottom: 2px dotted #bbb; padding-bottom:5px; text-align:left;line-height:1.4em;} #cont2cols .container .col2 p, #cont2cols .container .col0 p { margin:10px; color:#666666; font-size:0.8em; line-height:1.4em; padding-bottom:10px; text-align:left;} #cont2cols .container .col2 address { margin:10px; color:#666666; font-size:0.8em; line-height:1.4em; padding-bottom:10px;text-align:left; font-style:normal;} #cont2cols .container .col2 a {color:#e64e00; font-weight:bold; text-decoration:none;} #cont2cols .container .col2 a:hover {color:#ff7e00;} #cont2cols .container .col2 img { padding-bottom:20px;} #cont2cols .contact { margin-right:10px; width:610px; margin-bottom:10px;margin-left:10px;background-color:#f1f1f1; border-bottom: 2px dotted #bbb;} #cont2cols .contact td.label{background-color:#f1f1f1; padding:10px; border-top: 2px dotted #bbb;vertical-align:top; text-align:left; width:245px;} #cont2cols .contact td.warning{background-color:#f1f1f1; padding:10px; border-top: 2px dotted #bbb;vertical-align:top; text-align:center; width:30px; text-align:center;} #cont2cols .contact td.box{background-color:#f1f1f1; padding:10px; border-top: 2px dotted #bbb;vertical-align:top; text-align:left; width:265px; padding-left:0px; padding-right:0px;} #cont2cols .contact tr { clear:both;} #cont2cols .contact label {font-size:0.8em; font-weight:bold; color:#666666; text-align:right; margin-right:10px; line-height:1.8em; vertical-align:top;} #cont2cols .inputtext { background-color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:0.8em; padding:3px; border:0px; margin:0px; width:257px; color:#666;border:1px solid #bbb;} #cont2cols .inputarea { background-color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:0.8em;padding:3px;border:0px; margin:0px;width:257px; height:125px;color:#666;border:1px solid #bbb;} #cont2cols .submit {background-color:#e64e00; border:0px; font-weight:bold; padding:5px; padding-left:8px; padding-right:8px; color:#FFFFFF; margin-left:0px;} #cont2cols .submit:hover { background-color:#ff7e00;} #cont2cols .container .news {width:630px; float:left;} #cont2cols .news h2{ margin:10px; color:#666666; font-weight:normal; font-size:1.2em; padding-bottom:0px; margin-bottom:0px; border-bottom:0px;line-height:1.4em;} #cont2cols h2.rss { background-image:url(../images/rss-logo.gif); background-position:left 4px; background-repeat:no-repeat;padding-left:25px;line-height:1.4em;} #cont2cols .news h3 { margin:10px; font-size:0.9em; line-height:1.4em; margin-bottom:0px; color:#e64e00; clear:both; border-top: 2px dotted #bbb;padding-top:10px; margin-top:5px;} #cont2cols .news h3 span {float:left; color:#666666; padding-right:5px; border-right: 1px solid #bbb; margin-right:5px;} #cont2cols .news p { margin:10px; color:#666666; font-size:0.8em; line-height:1.4em; margin-top:0px; } #cont2cols .news img {float:right; margin-left:10px; margin-bottom:10px;} #cont2cols .news a { font-size:0.8em; font-weight:bold; text-decoration:none; color:#e64e00; text-transform:uppercase;} #cont2cols .news a:hover {color:#ff7e00;} #cont2cols .newslist {float:left; width:300px; margin-left:30px;} #cont2cols .newslist h2 { margin:10px; color:#666666; font-weight:normal; font-size:1.2em; border-bottom: 2px dotted #bbb; padding-bottom:5px;line-height:1.4em;} #cont2cols .newslist ul { font-size:0.8em; text-align:left; margin-left:10px; margin-right:10px; line-height:1.2em;} #cont2cols .newslist li {margin-bottom:5px;} #cont2cols .newslist li span { color:#666666; border-right: 1px solid #999999; padding-right:5px; margin-right:5px;} #cont2cols .newslist li a { color:#e64e00; text-decoration:none;} #cont2cols .newslist li a:hover { color:#ff7e00;} #cont2cols .video {margin-left:10px; padding-right:10px; margin-bottom:10px;} #cont3cols{ top:-25px;position:relative;} #cont3cols .container{width:960px; margin-left:auto; margin-right:auto;} #cont3cols .col1, #cont3cols .col3 {float:left; width:300px; margin-bottom:10px; text-align:center;} #cont3cols .col2 {float:left; width:300px; margin-left:30px; margin-right:30px; margin-bottom:10px;} #cont3cols .col23 {float:left; width:630px; margin-left:30px; margin-bottom:10px;} #cont3cols .col2 a, #cont3cols .col23 a {color:#e64e00; font-weight:bold; text-decoration:none;} #cont3cols .col2 a:hover, #cont3cols .col23 a:hover {color:#ff7e00;} #cont3cols .col2 img, #cont3cols .col23 img {float:right;} #cont3cols p { margin:10px; color:#666666; font-size:0.8em; line-height:1.4em; padding-bottom:0px; text-align:left;} #cont3cols h2 {margin:10px; color:#666666; font-weight:normal; font-size:1.2em; border-bottom: 2px dotted #bbb; padding-bottom:5px; padding-top:5px; text-align:left;line-height:1.4em;} #cont3cols h3 { margin:10px; color:#666666; font-weight:normal; font-size:1.0em; border-bottom: 1px dotted #bbb; padding-bottom:5px;line-height:1.2em; font-weight:bold;} #cont3cols .col2 ul, #cont3cols .col23 ul { padding-bottom:10px; margin-left:30px;} #cont3cols .col2 li, #cont3cols .col23 li {list-style-type:square; margin:10px; color:#666666; font-size:0.8em; line-height:1.4em; margin-bottom:0px; margin-top:0px;} #cont3cols .col3 img{ padding-bottom:50px;} #cont3cols .customers {width:1000px;} #cont3cols .customers h2 {width:940px;} #cont3cols .customers .customer { width:270px; height:200px; float:left; border:5px solid #999; margin-left:10px; margin-right:40px; margin-bottom:10px; margin-top:10px; background-position:center; background-repeat:no-repeat;} #cont3cols .customers .customer h3 {display:none;} #cont3cols .customers .customer:hover {border:5px solid #e64e00;} .sitemap { margin-left:0px; margin-right:10px; font-size:0.9em; line-height:1.3em;margin-bottom:10px;} .sitemap table {float:left; width:400px;} .sitemap table tr {float:left; width:400px; margin-left:-10px;} .sitemap #ctl00_ContentPlaceHolder1_TreeView1t0 {display:none;} .sitemap img {display:none;}