/*============================================== www.stark.se - v2 ------------------------------------------------ Copyright STARK Author: Mikael Quick ==============================================*/ /* COLOR SCHEME /**************************************/ .black { color: #000; } .white { color: #fff; } .red { color: #b53c3c; } .pink { color: #c147b4; } .yellow { color: #b5ab3c; } .fuccia { color: #349cb2; } .green { color: #54b89d; } .brown { color: #b27321; } .blackbg { background-color: #000; } .graybg { background-color: #696969; } /* GLOBALS /**************************************/ body, html { color: #aaa; background-color:#000; margin-top: 0; } .container { margin-top: 60px; visibility:visible;} p { margin: 2px; } .trance50 { background:transparent url(../img/trans50.png);} .lineheight24 { line-height:24px; height:24px } .right { text-align:right; } .medium { font-size:.9em;margin-bottom:1.975em;line-height:1.975em;} .topleft { position:absolute; top:0; left:0;} img { border:0; } .pad10 { padding-left: 10px; } .pad20 { padding-left: 20px; } .right5 { margin-right: 5px; } .drop-5 { margin-bottom:7px; } .drop-10 { margin-bottom:10px; } .drop-15 { margin-bottom:15px; } .drop-30 { margin-bottom:30px; } .drop-60 { margin-bottom:60px; } .up-5 { margin-top: 5px; } .smaller { font-size:.9em; padding: 1px 0 1px 2px; color: #fff; } .emptitle { margin: -5px 0 -5px 0; } #nav1,#nav2 { height: 25px; line-height: 25px; font-size: 10px; } dt { color: #eee; } .loading { background: url(../img/progress.gif) no-repeat center center; } /* FULL SCREEN SHEENANIGANS /**************************************/ html, body, #bg, #bg table, #bg td, #cont { height:100%; width:100%; overflow:hidden; padding:0; } #bg div { height:200%; left:-50%; position:absolute; top:-50%; width:200%; } #bg td { text-align:center; vertical-align:middle; } #bg img { margin:0 auto; min-height:50%; min-width:50%; } #cont { position:absolute; top:-1px; left:0px; z-index:70; overflow:auto; } #focus-stealer { position: absolute; left: -9999px; } /* HEADER /**************************************/ .bighead { font-family:Arial Black; font-size:28px; padding:0 10px 10px 0; margin: 0 0 10px 0; line-height: 48px; color: #fff; } /* NAVIGATION /**************************************/ a:link { text-decoration: none; color: #fff; } a:visited { text-decoration: none; color: #fff; } a:hover { text-decoration: none; color: #aaa; } a:active, a:focus { text-decoration: none; color: #fff; } /* PROJECT/CASE PAGES /**************************************/ .projectinfo { padding: 4px 10px 4px 10px; } .projectinfo p { margin-bottom: 10px;} .projectinfo h2 { margin-top: 12px; line-height: 1em; color:#fff;} .caseimage { padding:15px 0 15px 15px; } /* Coda Slider ************************************************** */ #slider { width: 710px; margin: 0; position: relative; } .scroll { width: 710px; margin:0; overflow: auto; position: relative; /* fix for IE to respect overflow */ clear: left;} .scrollContainer div.panel { margin:0; padding: 0; width:710px;} /* change to 560px if not using JS to remove rh.scroll else 580*/ .scrollButtons { position: absolute; top: 150px; cursor: pointer; } .scrollButtons.left { left: 0px; } .scrollButtons.right { right: 0px; } .hide { display: none; } ul.navi { list-style: none; margin: 0; padding: 0; padding-bottom: 9px; } ul.navi li { display: block; margin-right: 10px; } ul.navi a { padding: 10px; text-decoration: none; } ul.navi a:hover { background-color: #f6f6f6; } ul.navi a.selected{ background-color: #eee; color:#000; } ul.navi a:focus { outline: none; } /* ABOUT CONTENT FIX /**************************************/ /* IMAGE CAPTION SLIDER SMALL /**************************************/ .boxgrid_small { width: 172px; height: 97px; float:left; background:#161613; border: none; margin:2px; overflow: hidden; position: relative; } .boxgrid_small img{ position: absolute; top: 0; left: 0; border: 0; } .boxgrid_small p { padding: 5px; color:#fff; font-weight:700; font:8pt "Lucida Grande", Arial, sans-serif; } .boxcaption_small { float: left; position: absolute; background: #000; height: 50px; width: 100%; opacity: .7; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .boxcaption_small { top: 108px; left: 0px; } /* IMAGE CAPTION SLIDER BIG /**************************************/ .captiontitle { padding: 0 0 0 10px; color:#fff; font:11pt Arial, sans-serif; font-weight: 700; line-height: 10px; margin: 8px 0 0 0; } .boxgrid_big { width: 470px; height: 267px; margin:0px; float:left; background:#161613; border: none; overflow: hidden; position: relative; } .boxgrid_big img { position: absolute; top: 0; left: 0; border: 0; margin:0; } .boxgrid_big p { padding: 0 0 5px 8px; color:#afafaf; font-weight:700; font:8pt "Lucida Grande", Arial, sans-serif; } .boxcaption_big { float: left; position: absolute; background: #000; height: 90px; width: 100%; opacity: .7; /* For IE 5-7 */filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* For IE 8 */-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .captionfull_big .boxcaption_big { top: 505px; left: 0px; } /* IMAGE CAPTION SLIDER CASE /**************************************/ .casegrid_big { width: 710px; height: 121px; margin:0 0 5px 0; float:left; background:#161613; border: none; overflow: hidden; position: relative; } .casegrid_big img { position: absolute; top: 0; left: 0; border: 0; } .casegrid_big p { padding: 0 0 5px 8px; color:#afafaf; font-weight:700; font:8pt "Lucida Grande", Arial, sans-serif; } .casecaption_big { float: left; position: absolute; background: #000; height: 90px; width: 100%; opacity: .7; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .captionfull_big .casecaption_big { top: 205px; left: 0px; } /* PAGE TURN /**************************************/ #turn_wrapper { width: 40px; height: 40px; display: block; position: absolute; top: 0; left: 0; } #turn_hideme { width: 85%; height: 85%; overflow: hidden; display: block; position: absolute; float: left; top: 0; left: 0; z-index: 100; } #turn_object { position: relative; } #turn_wrapper.right #turn_hideme *, #turn_wrapper.right #turn_object { float: right !important; } #turn_wrapper.right #turn_hideme { float: right !important; right: 0 !important; left: auto; } #turn_wrapper.right #turn_object { right: 0 !important; left: auto !important; } #turn_wrapper.right { position: absolute; top: 0; width: 100%; height: 0; right: 0 !important; } #turn_wrapper.right #turn_object * { position: absolute; right: 0 !important; } #turn_wrapper #turn_object img#turn_fold { display: block; width: 100%; height: 100%; z-index: 1000; right: 0; position: absolute; } /* the jQuery CSS Framework /**************************************/ #turn_wrapper .ui-resizable { position: relative;} #turn_wrapper .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; background-image: url(#none)} #turn_wrapper .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 0; bottom: 0; } #turn_wrapper .ui-resizable-sw { cursor: sw-resize; width: 12px; height: 12px; left: 0; bottom: 0; } /* Contact list /**************************************/ .viewport { font-family: Arial, Helvetica, sans-serif; font-size: 10px; float: left; height: 102px; margin: 2px; overflow: hidden; position: relative; width: 78px; } .no-margin { margin-right: 0; } .viewport a { display: block; position: absolute; font-size: 10px; line-height: 1.4em; top:0; left: 82px; font-weight: bold; height: 100%; padding: 5px 5px 5px 10px; text-align: left; text-decoration: none; width: 100%; z-index: 100; background-color:#000; opacity: .8; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";} .viewport img { cursor:pointer; width: 78px; height: 102px; position: relative; } span.clr { display: block; clear: both; } .nametag {font-size:1.4em;line-height:1.6em;margin-bottom:1em;} /* News ticker /**************************************/ #sidebar { color: #AFB0B1; background: #000; position: relative; margin:0; padding:1px 1px 3px 0; text-align: left; } #sidebar ul { font-size:0.9em; list-style-type:none; margin:0; padding:0; position:relative; } #sidebar li { height: 16px; overflow: hidden; margin:0;} #sidebar .spyWrapper { height: 100%; overflow: hidden; position: relative; } #sidebar ul li a, #sidebar ul li a:link, #sidebar ul li a:visited, #sidebar ul li a:active { color: #AFB0B1; } #sidebar ul li a:hover { color: #fff;} /* STARK Letters /**************************************/ .letters { float:left; width:182px; height: 367px; overflow: hidden; margin-right:7px; } /* Login /**************************************/ .login { width:220px; background-color: #444; font-size:9px; padding:2px 0 1px 5px; height:17px; }