/* CSS-Tricks Example by Chris Coyier http://css-tricks.com */ /*@import url(http://www.princexml.com/fonts/larabie/index.css) all;*/ /*==========Example of how to use @font-face========== @font-face { font-family: "Your typeface"; src: url("type/filename.eot"); src: local("xxx"), url("type/filename.woff") format("woff"), url("type/filename.otf") format("opentype"), url("type/filename.svg#filename") format("svg"); } ==========Example of how to use @font-face==========*/ * { margin: 0; padding: 0; } html, body { height:100%; overflow:hidden; background: #eee; } body { font-family: 'Droid Serif', arial, serif; font-size:11px; } a, a:link, a:hover, a:active, a:visited{ outline:none; text-decoration:none; } em { color:#3FF; } em.year { color:#FFC;} #header { position:relative; width:auto; } #header ul { list-style:none; color:#FFF; } #header li { float:left; } #header #headerL_1 { height:30px; } #header #headerL_1 ul li#news{ float:left; padding:10px 0 0 20px; } #header #headerL_1 ul li#news a, a:link { color:#FFF; } #header #headerL_1 ul li#news a:hover { color:#FFF; } #header #headerL_1 ul li#logo{ float:right; padding: 0px 10px 0 0; width:146px; height:28px; background:url(../images/logo.png) no-repeat; font:0; line-height:0; text-indent:-99999px; } #header #headerL_2 { height:45px; background:url(../images/transparent_top.png) repeat; overflow: hidden; } #header #headerL_2 a, a:link { color:#fff; } #header #headerL_2 a:hover { color:#F03; } #header #headerL_2 ul li { padding:16px 15px 0 20px; font-size:13px; font-style:italic; } #header #headerL_2 ul li#nav4 { float:right; padding-right:20px; } #header #headerL_3 { position:absolute; width:100%; top:75; left:0; } #header #headerL_3 ul li { font:0; line-height:0; text-indent:-9999px; } #header #headerL_3 ul li#previous { float:left; padding:5px 0 0 15px; } #header #headerL_3 ul li#previous a { width:107px; height:22px; display:block; background:url(../images/previous_off.png) no-repeat; } #header #headerL_3 ul li#previous a:hover { background:url(../images/previous_on.png) no-repeat; } #header #headerL_3 ul li#next { float:right; padding:5px 15px 0 0; *padding:5px 15px 0 0; } #header #headerL_3 ul li#next a { width:70px; height:22px; display:block; background:url(../images/next_off.png) no-repeat; } #header #headerL_3 ul li#next a:hover { background:url(../images/next_on.png) no-repeat; } #page-wrap { width:1100px; margin: 0 auto; /*overflow: hidden;*/ min-height: 100%; height: auto !important; height: 100%; } #centerlized1 { padding: 0 0 0 35px; } #centerlized2 { padding: 0 0 0 105px; } #centerlized3 { padding: 50px 0 0 150px; } a.launch:link, a.launch:visited { color: #FFC; text-decoration: underline; font-style:italic;} a.launch:hover { color: #6FF; text-decoration: underline;} .unlaunch{ color:#ccc; text-decoration: underline; font-style:italic;} #contact { position:relative; width:800px; height:650px; background:url(../images/transparent.png) repeat; } #whiteBG { float:left; width:300px; height:630px; margin:10px 0 0 10px; background-color:#fff; } #trans { float:right; width:470px; height:650px; margin:0px 10px 0 0px; color:#FFF; } #contact #trans h3 { font-style:italic; font-size:69px; color:#000; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } #contact #trans ul { margin-bottom:25px; font-size:13px; line-height:1.4em; } #contact #trans li { list-style-type:none; } #contact #trans ul li#gamil { list-style-type:none; margin-top:10px;} #contact #trans ul a, a:link { color:#fff; font-size:12px; } #contact #trans ul a:hover{ color:#F30; text-decoration:underline; } #contact #trans #img1, #img2 { margin-bottom:5px;} #contact #trans #poster { margin-top:130px; margin-left:125px;} #contact #whiteBG h2 { width:300px; padding:10px 0 0px 10px;font-size:14px;} #contact #whiteBG p{ margin:10px 10px 20px 10px; font-size:11px;} #contact #whiteBG #text { margin:50px 0 0 10px; font-size:15px; font-weight:bold; display:block; } #contact #whiteBG ul#resumeGrphic { font-siaze:0; line-height:0;text-indent: -9999px;} #contact #whiteBG ul li { float:left; list-style:none; margin-bottom:10px; margin-left:0;} #contact #whiteBG li#world a { width: 60px; height: 60px; background:url(../images/world_off.jpg) no-repeat; display:block; } #contact #whiteBG li#world a:hover { width: 60px; height: 60px; background:url(../images/world_on.jpg); } #contact #whiteBG li#pdf a { width: 60px; height: 60px; background:url(../images/pdf_off.jpg) no-repeat; display:block; } #contact #whiteBG li#pdf a:hover { width: 60px; height: 60px; background:url(../images/pdf_on.jpg); } #contact #whiteBG li#sample a { width: 60px; height: 60px; background:url(../images/sample_off.jpg) no-repeat; display:block; } #contact #whiteBG li#sample a:hover { width: 60px; height: 60px; background:url(../images/sample_on.jpg); } .link{} .info-col { float: left; width: 140; padding-top:70px; } .info-col h2 { height: 70px; text-align: center; color:#FFF; font-weight:bold; font:20px 'Droid Serif', arial, serif; } .info-col h4 { height: 20px;text-align: center; padding:0px 0 13px 0; color:#FFF; font:12px 'Droid Serif', arial, serif; } .image { height: 100px; text-indent: -9999px; display: block; margin-bottom:1px; } .lexus { background: url(../images/lexus_0.jpg) center center no-repeat; } .meichuan { background: url(../images/meichuan_0.jpg) center center no-repeat; } .million { background: url(../images/1M_0.jpg) center center no-repeat; } .ido { background: url(../images/ido_0.jpg) center center no-repeat; } .wartown { background: url(../images/wartown_0.jpg) center center no-repeat; } .eq { background: url(../images/eq_0.jpg) center center no-repeat; } .pv6 { background: url(../images/pv6_0.jpg) center center no-repeat; } .webtoucan { background: url(../images/webtoucan_0.jpg) center center no-repeat; } .xuite { background: url(../images/xuite_0.jpg) center center no-repeat; } .logo { background: url(../images/logo_0.jpg) center center no-repeat; } .icon { background: url(../images/icon_0.jpg) center center no-repeat; } .brochure { background: url(../images/brochure_0.jpg) center center no-repeat; } .ui { background: url(../images/ui_0.jpg) center center no-repeat; } .product { background: url(../images/product_0.jpg) center center no-repeat; } .poster { background: url(../images/poster_0.jpg) center center no-repeat; } .retouch { background: url(../images/retouch_0.jpg) center center no-repeat; } .wallpapper { background: url(../images/wall_0.jpg) center center no-repeat; } .business { background: url(../images/business_0.jpg) center center no-repeat;} .ad { background: url(../images/ad_0.jpg) center center no-repeat; } .city { background: url(../images/city_0.jpg) center center no-repeat; } .silent { background: url(../images/silent_0.jpg) center center no-repeat; } .quote { background: url(../images/quote_0.jpg) center center no-repeat; } .dreamwalker { background: url(../images/dreamwalker_0.jpg) center center no-repeat; } .myworld { background: url(../images/myworld_0.jpg) center center no-repeat; } dl { } dt { padding: 5px; color: #fff; margin-bottom: 1px; margin-right:1px; background:url(../images/transparent.png) repeat-y ; } dd { position: absolute; left: -9999px; top: -9999px; width: 429px; padding: 10px; color:#FFC;; margin-right:1px; background:url(../images/transparent.png) repeat-y ; } /* dt:nth-of-type(1) { background:url(../images/transparent.png) repeat-y ; }/*so use png file instead of filter*/ /*dd:nth-of-type(1) { background:url(../images/transparent.png) repeat-y ; }/*If use "filter:alpha(opacity=80); opacity:0.8;", it will make everythig in dd all trasparent. Because it's not div*/ /* dt:nth-of-type(2) { background:url(../images/transparent.png) repeat-y ; } dd:nth-of-type(2) { background:url(../images/transparent.png) repeat-y ; } dt:nth-of-type(3) { background:url(../images/transparent.png) repeat-y ; } dd:nth-of-type(3) { background:url(../images/transparent.png) repeat-y ; } dt:nth-of-type(4) { background:url(../images/transparent.png) repeat-y ; } dd:nth-of-type(4) { background:url(../images/transparent.png) repeat-y ; } dt:nth-of-type(5) { background:url(../images/transparent.png) repeat-y ; } dd:nth-of-type(5) { background:url(../images/transparent.png) repeat-y ; } dt:nth-of-type(6) { background:url(../images/transparent.png) repeat-y ; } dd:nth-of-type(6) { background:url(../images/transparent.png) repeat-y ; } */ .curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; background:url(../images/transparent_IE.png) repeat-y ;\ /*IE 8*/ *background:url(../images/transparent_IE.png) repeat-y ;/*IE 7*/ box-shadow: 5px 5px 10px #000; behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */ } .footer { clear:both; width:100%; text-align:center; color:#FFF; font:10px Verdana, Geneva, sans-serif; padding: 15px 0 5px 0; }