/** * Dynamix Portfolio, version 0.1 beta * (c) 2008 amorphik.com - r3mix.ch / Marc Hottinger * * last update: 2004-04-30 * * http://www.amorphik.com/ | http://www.r3mix.ch * * This css file may not be used, modified, copied, etc. without the * autorisation of amorphik and/or r3mix - Marc Hottinger. * * ---------------------------------------- * marc.hottinger (at) amorphik (dot) com * ---------------------------------------- * * This css file is defining the layout of the main graphical elements of the site * Both images.css and text.css use this file as a base for the site's layout * This css file is overridden by IE7.js on ie6. */ /* COLOR SCHEME Body Background: black Main Text: silver Links: white Headers: white Color one: (orange) needs to be defined Color two: (yellow) needs to be defined */ /* CSS FILES main.css --> defines the main layout of the site, such as basic html elements, etc... print.css --> defines the layout of the site when printed. Hides number of useless elements when printed out. dynamic.css --> defines the layout of ajax loaded elements images.css --> defines the layout for the images mode of the site text.css --> defines the layout for the text mode of the site */ /******************************************/ /*main layout part*/ /*main elements*/ html { overflow: hidden; font-size: 100% } body { overflow: hidden; margin: 0px 0px 0px 0px; background-color: black; color: white; font-size: 0.8em; font-family: Helvetica, Arial, Geneva, SunSans-Regular, sans-serif } p { margin: 0px } img { border-style: none } a { color: silver; text-decoration: none } a:hover { color: gray; text-decoration: underline } h1 { font-size: 2.0em } h2 { font-size: 1.4em } h3 { font-size: 1.2em } h4 { font-size: 1.1em } h5 { font-size: 1.1em } h1,h2,h3,h4,h5,h6 { color: white } /******************************************/ /*main classes*/ .overlay_icon { } .behind_icon { } .mail_link { color: silver } .navigation_link a { color: gray } .navigation_link a:hover { color: white; text-decoration: none } .navigation_link a:visited { color: silver; text-decoration: line-through } /******************************************/ /*navigation*/ /*main navigation part*/ #mainNavigation { position: absolute; z-index: 9999; top: 0; left: 0; width: 100%; height: 125px; min-width: 900px } #portfolioTitle { position: absolute; top: 60px; left: 50px; width: 217px; height: 42px; z-index: 10000 } #siteTitle { position: absolute; top: 70px; right: 50px; width: 100px; height: 50px; z-index: 10000 } #contact { position: absolute; top: 5px; right: 50px } /*scene navigation part*/ #sceneNavigation { position: absolute; top: 0px; left: 0px; width: 800px; height: 50px; background-repeat: no-repeat; background-position: 50px 20px; font-family: Arial, Helvetica, Geneva, SunSans-Regular; color: white; font-size: 1.1em; text-align: left; } #sceneNavigation .sceneSwitch { position: absolute; top: 0px; width: 85px; height: 20px; clip: rect(0px, 85px, 20px, 0px) } #sceneNavigation > #sceneSwitch0 { left: 50px } #sceneNavigation > #sceneSwitch1 { left: 140px } #sceneNavigation > #sceneSwitch2 { left: 230px } #sceneNavigation > #sceneSwitch3 { left: 320px } #sceneNavigation > #sceneSwitch4 { left: 410px } #sceneNavigation > #sceneSwitch5 { left: 500px } #sceneNavigation .sceneBar { position: absolute; top: 0px; left: 0px; width: 100%; height: 5px; line-height: 0px; font-size: 0px; background-color: white } #sceneNavigation > #sceneSwitch0 > #sceneBar0 { margin-top: 0px; } #sceneNavigation > #sceneSwitch1 > #sceneBar1 { margin-top: -3px; } #sceneNavigation > #sceneSwitch2 > #sceneBar2 { margin-top: -3px; } #sceneNavigation > #sceneSwitch3 > #sceneBar3 { margin-top: -3px; } #sceneNavigation > #sceneSwitch4 > #sceneBar4 { margin-top: -3px; } #sceneNavigation > #sceneSwitch5 > #sceneBar5 { margin-top: -3px; } #sceneNavigation .link { position: absolute; top: 5px; left: 0px } #sceneNavigation .link a { color: white } #sceneNavigation .link a:hover { color: white; text-decoration: none } /*backstage navigation part*/ #backStageDisplay { position: absolute; top: 5px; right: 45px; width: 45px; height: 20px } #backStageDisplay > #less { position: absolute; z-index: 1; top: 0px; left: 0px } #backStageDisplay > #more { position: absolute; z-index: 2; top: 0px; left: 0px } #backStageNavigation { position: absolute; top: 0px; left: 100%; width: 800px; height: 50px; font-family: Arial, Helvetica, Geneva, SunSans-Regular; color: white; font-size: 1.1em; text-align: left; } #backStageNavigation .backStageSwitch { position: absolute; top: 0px; width: 85px; height: 20px; clip: rect(0px, 85px, 20px, 0px) } #backStageNavigation > #backStageSwitch0 { left: 50px } #backStageNavigation > #backStageSwitch1 { left: 140px } #backStageNavigation > #backStageSwitch2 { left: 230px } #backStageNavigation > #backStageSwitch3 { left: 320px } #backStageNavigation > #backStageSwitch4 { left: 410px } #backStageNavigation > #backStageSwitch5 { left: 500px } #backStageNavigation .backStageBar { position: absolute; top: 0px; left: 0px; width: 100%; height: 5px; line-height: 0px; font-size: 0px; background-color: white } #backStageNavigation > #backStageSwitch0 > #backStageBar0 { margin-top: 0px; } #backStageNavigation > #backStageSwitch1 > #backStageBar1 { margin-top: -3px; } #backStageNavigation > #backStageSwitch2 > #backStageBar2 { margin-top: -3px; } #backStageNavigation > #backStageSwitch3 > #backStageBar3 { margin-top: -3px; } #backStageNavigation > #backStageSwitch4 > #backStageBar4 { margin-top: -3px; } #backStageNavigation > #backStageSwitch5 > #backStageBar5 { margin-top: -3px; } #backStageNavigation .link { position: absolute; top: 5px; left: 0px } #backStageNavigation .link a { color: white } #backStageNavigation .link a:hover { color: white; text-decoration: none } /*viewing mode*/ #UIDisplay { visibility: hidden; font-size: 0.9em; position: absolute; top: 0; left: 100%; height: 25px; width: 225px; margin-top: 0px; margin-left: -160px } #UIDisplay ul { list-style-type: none; cursor: default; display: inline; margin-left: -35px } #UIDisplay li { padding: 0 5px; cursor: pointer; display: inline;} #UIDisplay li a { color: silver } #UIDisplay li a:hover { color: gray; text-decoration: none } /******************************************/ /*additional information*/ /*about me*/ #aboutMe { position: fixed; top: 115px; right: 50px; width: 225px; height: 50px; color: gray; text-align: justify; font-size: 0.88em; background-image: url(../images/portfolio/layout/objects/separator.png); background-position: right top; background-repeat: no-repeat } /*internal links*/ #internalLinks { position: fixed; z-index: 9999; bottom: 0px; right: 147px; width: 300px; height: 20px; color: gray; font-size: 0.88em; text-align: right } /*ads & offers*/ #ads { position: fixed; z-index: 9999; bottom: 0px; right: 0px } /*offers*/ #offer { position: absolute; bottom: -3px; right: -3px; width: 100px; height: 100px } /*powered by, supporting*/ #mission_eternity { position: absolute; bottom: 30px; right: 150px; width: 60px; height: 19px } #natio { position: absolute; bottom: 30px; right: 225px; width: 26px; height: 30px } /*about part*/ #about { visibility: visible; background-color: red; position: absolute; z-index: 9999; top: 100%; left: 0; width: 100%; height: 40px; margin-top: -40px } /*news part*/ /******************************************/ /*miscellaneous*/ /*projects info*/ #projectInfo { position: absolute; visibility: hidden; color: white; top: 138px; left: 168px; width: 400px; height: 25px } #projectInfo p { margin: 0px; font-size: 0.9em } /*info boxes/icons*/ #copyright { width: 100%; height: 20px ; z-index: 9999; top: 100%; margin-top: -30px; position: fixed; color: #666; font-size: 0.8em; line-height: 0.65em; text-align: center ; overflow: hidden; visibility: hidden; clear: both } #loading { position: absolute; z-index: 10001; top: 190px; left: 50px; width: 100px; height: 100px } #error { position: absolute; z-index: 10001; top: 190px; left: 80px; width: 300px; height: 100px } #scene img.overlay_icon { position: absolute; z-index: 999; display: block; top: 0px; left: 0px } #portfolioTitle img.behind_icon { visibility: visible; position: absolute; display: block; z-index: -1; top: -10px; left: 250px } /*compatibility part*/ #noJavascriptSupport { visibility: hidden } #notCompatibleBrowser { visibility: hidden } /*debug part*/ #debug { position: absolute; z-index: 99999; top: 110px; left: 100%; width: 300px; height: 500px; margin-left: -350px; border: dotted 1px #333; color:green; font-size: 10px; font-family: Courier; background-image: url(../images/portfolio/layout/backgrounds/project_background_50.png); background-repeat: repeat; background-position: 0 0px; overflow: hidden } #debug p { text-indent: -10px; padding-left: 10px }