/*----------------------------------------------------------------------------- Reset -----------------------------------------------------------------------------*/ html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; } h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; } hr { display: none; } ul,ol { list-style: none; } fieldset,img { border: none; } caption,th { text-align: left; } table { border-collapse: collapse; border-spacing: 0; } /*----------------------------------------------------------------------------- Global settings -----------------------------------------------------------------------------*/ body { background: #f0f1f3; color: #333; font: 12px/18px "Arial", Geneva, Verdana, sans-serif; } a { color: #a1a5a9; text-decoration: none; } a:hover { color: white; } strong, b { font-weight: bold; color: white; } em, i { font-style: italic; } p { line-height: 150%; margin-bottom: 12px; } h2 { color: white; font-size: 1.4em; font-weight: bold; margin-bottom: 12px; } h3 { color: white; font-size: 1.2em; font-weight: bold; margin-bottom: 12px; } address { margin-bottom: 12px; } /*----------------------------------------------------------------------------- Layout -----------------------------------------------------------------------------*/ #Pandora { height: 575px; left: 50%; margin: -287px 0px 0px -492px; position: absolute; top: 50%; width: 984px; } #KarmaKode { color: #a1a5a9; margin: 0 1px; padding: 0; position: relative; } #Top { background: url('../images/layout_top.png'); font-size: 1px; height: 7px; margin: 0 -1px -7px; position: relative; z-index: 10; } #Wrap { background: url('../images/layout_wrap.gif') repeat-y; position: relative; } #Content { background: url('../images/layout_content.jpg') no-repeat 1px bottom; display: block; height: 560px; width: 980px; position: relative; } #Bottom { background: url('../images/layout_bottom.png') top left; font-size: 1px; height: 8px; position: relative; z-index: 10; } /*----------------------------------------------------------------------------- Swapr -----------------------------------------------------------------------------*/ #SwapNav { bottom: 18px; display: inline; left: 237px; margin: 0; overflow: hidden; position: absolute; z-index: 1; } #SwapNav li { float: left; } #SwapNav li a.Thumb { background: url('../images/swapnav_bg.png') no-repeat; cursor: pointer; display: block; height: 36px; margin: 0; outline: none; overflow: hidden; padding: 0; text-indent: -9999px; } #SwapNav li a.Thumb.One { width: 106px; background-position: 0 -72px; } #SwapNav li a.Thumb.One:hover { background-position: 0 -36px; } #SwapNav li.active a.Thumb.One { background-position: 0 0 !important; } #SwapNav li a.Thumb.Two { width: 68px; background-position: -106px -72px; } #SwapNav li a.Thumb.Two:hover { background-position: -106px -36px; } #SwapNav li.active a.Thumb.Two { background-position: -106px 0 !important; } #SwapNav li a.Thumb.Three { width: 95px; background-position: -174px -72px; } #SwapNav li a.Thumb.Three:hover { background-position: -174px -36px; } #SwapNav li.active a.Thumb.Three { background-position: -174px 0 !important; } #SwapNav li a.Thumb.Four { width: 85px; background-position: -269px -72px; } #SwapNav li a.Thumb.Four:hover { background-position: -269px -36px; } #SwapNav li.active a.Thumb.Four { background-position: -269px 0 !important; } #SwapNav li a.Thumb.Five { width: 73px; background-position: -354px -72px; } #SwapNav li a.Thumb.Five:hover { background-position: -354px -36px; } #SwapNav li.active a.Thumb.Five { background-position: -354px 0 !important; } #SwapNav li a.Thumb.Six { width: 79px; background-position: right -72px; } #SwapNav li a.Thumb.Six:hover { background-position: right -36px; } #SwapNav li.active a.Thumb.Six { background-position: right 0 !important; } /* Swapr ------------------------------------------------------------------*/ #SwapItems { height: 550px; margin: 0 1px; overflow: hidden; position: relative; width: 980px; } .Item { display: block; margin-left: 48px; position: absolute; top: 0; } .Item.One, .Item.Two, .Item.Three, .Item.Four, .Item.Five, .Item.Six { background-position: left bottom; background-repeat: no-repeat; height: 510px; width: 932px; } .Item.One { background: url('../images/swapr_item-one.png'); left: 0; } .Item.Two { left: 980px; } .Item.Three { background: url('../images/swapr_item-three.png'); left: 1960px; } .Item.Four { background: url('../images/swapr_item-four.png'); left: 2940px; } .Item.Five { background: url('../images/swapr_item-five.png'); left: 3920px; } .Item.Six { /* background: url('../images/demo_three.png'); */ left: 4900px; } /* SwapContent ------------------------------------------------------------*/ .Item .Inner { position: relative; } .Item .Content { position: absolute; top: 100px; } .Item .Content.Left { left: 0; width: 420px; } .Item .Content.Right { left: 460px; top: 137px; width: 420px; } .Item .Content.Work { left: 360px; width: 520px; } .Item .Content.Portfolio { left: 0; width: 320px; } .Item .Content.Contact { left: 460px; top: 100px; width: 420px; } /*----------------------------------------------------------------------------- Pretty titles -----------------------------------------------------------------------------*/ .look-and-feel, .services, .work, .portfolio, .about-us, .contact { background-repeat: no-repeat; height: 25px; overflow: hidden; text-indent: -9999px; width: 330px; } .look-and-feel { background: url('../images/title_look-and-feel.png'); height: 50px; left: 325px; outline: none; position: absolute; top: 42px; width: 324px; z-index: 1; } .services { background: url('../images/title_services.png'); display: block; margin: 0 0 12px 0; } .work { background: url('../images/title_work.png'); display: block; margin: 0 0 12px 0; } .portfolio { background: url('../images/title_portfolio.png'); display: block; margin: 0 0 12px 0; } .about-us { background: url('../images/title_about-us.png'); display: block; margin: 0 0 12px 0; } .contact { background: url('../images/title_contact.png'); display: block; margin: 0 0 12px 0; } /*----------------------------------------------------------------------------- Typo -----------------------------------------------------------------------------*/ #SwapItems a { border-bottom: 1px solid #545454; text-decoration: none; } #SwapItems a:hover, #SwapItems a:active { color: white; } .Analysis, .Design, .Optimize, .Consulting { background-position: 2px center; padding: 2px 0 2px 23px; } .Analysis { background: url('../images/services_icon_analysis.png') no-repeat; } .Design { background: url('../images/services_icon_design.png') no-repeat; } .Optimize { background: url('../images/services_icon_optimize.png') no-repeat; } .Consulting { background: url('../images/services_icon_consulting.png') no-repeat; } a.XING { background: url('http://www.xing.com/img/buttons/9_de_btn.gif') no-repeat top left; border: 0 !important; display: block; text-indent: -9999px; height: 15px; margin-top: 12px; width: 80px; } #Footer { padding: 5px 0 0 0; text-align: center; } #Footer p { font-size: 0.9em; color: #aaa; } #Footer a { color: #aaa; font-weight: normal; text-decoration: underline; } /*----------------------------------------------------------------------------- Typo -----------------------------------------------------------------------------*/ body#Legal { margin: 3em 2em 2em 6em; font: 62.5%/1.8em Arial, Helvetica, Geneva, sans-serif; color: #393733; width: 50em; } body#Legal h2, body#Legal h3 { color: #393733; } body#Legal p { font-size: 1.2em; } body#Legal a { border-bottom: 1px solid #cecebd; text-decoration: none; color: #393733; font-weight: bold; } body#Legal a:hover { background: #FFF4B7; color: #000; }