/* * Copyright 2008/2010, Creative Resolve, www.creative-resolve.com * * This file may not be used or (re)distributed for any other * purposes than a commercial deployment by Creative Resolve. * No modifications may be made to this file by anyone, * except for individuals working for Creative Resolve. * * File description: Creative Resolve web site styles * File Author: David Edwards */ /*standard padding definition*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 101%; vertical-align: baseline; background: transparent;} /*global styles*/ body {line-height: 1; background: #000 url(body.jpg) no-repeat top center; padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 100.1%; background-attachment: fixed;} a {text-decoration: none;} a:hover {text-decoration: underline;} a:active {text-decoration: none;} ol, ul {list-style: none;} :focus {outline: 0;} ins {text-decoration: none;} del {text-decoration: line-through;} table {border-collapse: collapse; border-spacing: 0;} span {display: none;} .clr {float: none; clear: both; padding: 0; margin: 0; line-height: 0; font-size: 0;} /*links*/ a.a01 {width: 52px; height: 52px; background-position: top left; background-repeat: no-repeat; float: left; padding: 0px; margin: 0;} a.a01:hover,a.a01.hover { padding: 0px; margin: 0; background-position: top right; background-repeat: no-repeat; } a.a01 span {display: none;} a.a02 {width: 315px; height: 200px; display: block; background-position: top left;} a.a02:hover,a.a02.hover {background-position: bottom left;} a.a02:active {background-position: bottom left;} a.a03 {color: #fff; padding: 6px 0 6px 25px; margin: 0; font-weight: normal; background: url(menuHeader.png) no-repeat center left;} a.a03:hover {color: #8cfff6; font-weight: normal; background: url(menuHeaderHover.png) no-repeat center left;} a.a04 {color: #fff; padding: 6px 35px 6px 0; margin: 0; font-weight: normal; background: url(menuHeader.png) no-repeat center right;} a.a04:hover {color: #8cfff6; font-weight: normal; background: url(menuHeaderHover.png) no-repeat center right;} a.a05 {width: 210px; height: 133px; float: left; background-repeat: no-repeat; background-position: top left; padding: 0 20px 0 0; margin: 0;} a.a05:hover,a.a05.hover {background-position: bottom left;} a.a06 {width: 63px; height: 63px; float: left; background-repeat: no-repeat; background-position: top left; padding: 0; margin: 0;} a.a06:hover,a.a06.hover {background-position: bottom left;} a.a07 {color: #fff;} a.a07:hover {color: #8cfff6;} a.a08 {width: 315px; height: 315px; display: block; background-position: top center;} a.a08:hover,a.a08.hover {background-position: bottom center;} a.a08:active {background-position: bottom center;} a.a09 {width: 315px; height: 100px; display: block; background-position: top left;} a.a09:hover,a.a09.hover {background-position: bottom left;} a.a10 {width: 200px; height: 127px; display: block; background-position: top left; margin: 0 0 10px 0;} a.a10:hover,a.a10.hover {background-position: bottom left;} a.a11 {float: right; padding: 0 10px 0 0; margin: 0; color: #fff;} #bar {border-bottom: #8cfff6 2px solid; margin: 0 10px 10px 0; padding: 5px 0 0 0; height: 0;} #showReel {padding: 0; margin: 0 0 10px 0; } a#front01 {background-image: url(front01.jpg);} a#front02 {background-image: url(front02.jpg);} a#resume01 {background-image: url(resume01.png);} a#music01 {background-image: url(music01.jpg);} a#back {background-image: url(back.png);} a#quake {background-image: url(aQuake.png);} a#facebook {background-image: url(aFacebook.png);} a#twitter {background-image: url(aTwitter.png);} a#deviantart {background-image: url(aDeviantart.png);} /*portfolio images*/ #art01 {background-image: url(art01.png);} #art02 {background-image: url(art02.png);} #art03 {background-image: url(art03.png);} #art04 {background-image: url(art04.png);} #art05 {background-image: url(art05.png);} #art06 {background-image: url(art06.png);} #art07 {background-image: url(art07.png);} #art08 {background-image: url(art08.png);} #art09 {background-image: url(art09.png);} #art10 {background-image: url(art10.png);} #art11 {background-image: url(art11.png);} #art12 {background-image: url(art12.png);} #art13 {background-image: url(art13.png);} #farcry01 {background-image: url(farcry01.png);} #ironstar01 {background-image: url(ironstar01.png);} #irondragon01 {background-image: url(irondragon01.png);} #lynch01 {background-image: url(lynch01.png);} #carc01 {background-image: url(carc01.png);} #hotelrud01 {background-image: url(hotelrud01.png);} #abran01 {background-image: url(abran01.png);} #abran02 {background-image: url(abran02.png);} #ryjo02 {background-image: url(ryjo02.png);} #cbaden01 {background-image: url(cbaden01.png);} #sharklab01 {background-image: url(sharklab01.png);} #ores01 {background-image: url(ores01.png);} #oint01 {background-image: url(oint01.png);} #tynsel01 {background-image: url(tynsel01.png);} #millstones01 {background-image: url(millstones01.png);} #millstones02 {background-image: url(millstones02.png);} #aphillips01 {background-image: url(aphillips01.png);} #halloween01 {background-image: url(halloween01.png);} #sketch01 {background-image: url(sketch01.png);} #sketch02 {background-image: url(sketch02.png);} #sketch03 {background-image: url(sketch03.png);} #sketch04 {background-image: url(sketch04.png);} #sketch05 {background-image: url(sketch05.png);} #sketch06 {background-image: url(sketch06.png);} #sketch07 {background-image: url(sketch07.png);} #krupskaya01 {background-image: url(krupskaya01.png);} #krupskaya02 {background-image: url(krupskaya02.png);} #krupskaya03 {background-image: url(krupskaya03.png);} #sureshots01 {background-image: url(sureshots01.png);} #sureshots02 {background-image: url(sureshots02.png);} #whitesharkjoker01 {background-image: url(whitesharkjoker01.png);} #stillsilent01 {background-image: url(stillsilent01.png);} #mrhappy01 {background-image: url(mrhappy01.png);} #polybeast01 {background-image: url(polybeast01.png);} #yourpixels01 {background-image: url(yourpixels01.png);} #yourfolio01 {background-image: url(yourfolio01.png);} #yourfolio02 {background-image: url(yourfolio02.png);} #ninban01 {background-image: url(ninban01.png);} #upaintball01 {background-image: url(upaintball01.png);} #ores02 {background-image: url(ores02.png);} #ores03 {background-image: url(ores03.png);} #demontowers01 {background-image: url(demontowers01.png);} #wonderland01 {background-image: url(wonderland01.png);} #bblue01 {background-image: url(bblue01.png);} #lizardlounge01 {background-image: url(lizardLounge01.png);} #splash01 {background-image: url(splash01.png);} #splash02 {background-image: url(splash02.png);} /*discography*/ #disco01 {background-image: url(disco01.jpg);} #disco02 {background-image: url(disco02.jpg);} #disco03 {background-image: url(disco03.jpg);} #disco04 {background-image: url(disco04.jpg);} #disco05 {background-image: url(disco05.jpg);} #disco06 {background-image: url(disco06.jpg);} #disco07 {background-image: url(disco07.jpg);} #disco08 {background-image: url(disco08.jpg);} #disco09 {background-image: url(disco09.jpg);} #disco10 {background-image: url(disco10.jpg);} #disco11 {background-image: url(disco11.jpg);} #disco12 {background-image: url(disco12.jpg);} /*discography*/ #record01 {background-image: url(record01.jpg);} #record02 {background-image: url(record02.jpg);} #record03 {background-image: url(record03.jpg);} #record04 {background-image: url(record04.jpg);} #record05 {background-image: url(record05.jpg);} #record06 {background-image: url(record06.jpg);} #record07 {background-image: url(record07.jpg);} #record08 {background-image: url(record08.jpg);} #record09 {background-image: url(record09.jpg);} #record10 {background-image: url(record10.jpg);} #record11 {background-image: url(record11.jpg);} #record12 {background-image: url(record12.jpg);} /*projects*/ #pro01 {background-image: url(pro01.jpg);} #pro02 {background-image: url(pro02.jpg);} #pro03 {background-image: url(pro03.jpg);} #pro04 {background-image: url(pro04.jpg);} #pro05 {background-image: url(pro05.jpg);} #pro06 {background-image: url(pro06.jpg);} #pro07 {background-image: url(pro07.jpg);} #pro08 {background-image: url(pro08.jpg);} #pro09 {background-image: url(pro09.jpg);} #pro10 {background-image: url(pro10.jpg);} /*exposure*/ #exp01 {background-image: url(exp01.jpg);} #exp02 {background-image: url(exp02.jpg);} #exp03 {background-image: url(exp03.jpg);} #exp04 {background-image: url(exp04.jpg);} #exp05 {background-image: url(exp05.jpg);} #exp06 {background-image: url(exp06.jpg);} #exp07 {background-image: url(exp07.jpg);} #exp08 {background-image: url(exp08.jpg);} #exp09 {background-image: url(exp09.jpg);} #exp10 {background-image: url(exp10.jpg);} #exp11 {background-image: url(exp11.jpg);} #exp12 {background-image: url(exp12.jpg);} #exp13 {background-image: url(exp13.jpg);} #exp14 {background-image: url(exp14.jpg);} #exp15 {background-image: url(exp15.jpg);} #exp16 {background-image: url(exp16.jpg);} #exp17 {background-image: url(exp17.jpg);} #exp18 {background-image: url(exp18.jpg);} #exp19 {background-image: url(exp19.jpg);} #exp20 {background-image: url(exp20.jpg);} #exp21 {background-image: url(exp21.jpg);} #exp22 {background-image: url(exp22.jpg);} #exp23 {background-image: url(exp23.jpg);} #exp24 {background-image: url(exp24.jpg);} #exp25 {background-image: url(exp25.jpg);} #exp26 {background-image: url(exp26.jpg);} #exp27 {background-image: url(exp27.jpg);} #exp28 {background-image: url(exp28.jpg);} /*content*/ #mainContentWrap {width: 980px; margin: 0 auto; padding: 0;} html>body #mainContentWrap {width: 940px; margin: 0 auto; padding: 0;} #mainContentBar {background: #8cfff6; height: 2px; width: 888px; padding: 0; margin: 10px auto 0 20px; float: left;} #mainContentBar02 {background: #8cfff6; height: 2px; width: 890px; padding: 0; margin: 10px auto 0 0px; float: left;} #contentLeft {width: 210px; float: left; padding: 0 0 0 20px; margin: 0;} #contentRight {width: 690px; padding: 0 0 0 20px; margin: 0; float: left;} #contentRight p {font-size: 0.65em; line-height: 1.5em; padding: 0 0 10px 0; margin: 0; color: #bbb;} #contentRight strong {color: #ddd;} #contentRight h1 {width: 595px; display: block; font-size: 0.8em; color: #8cfff6; text-transform: uppercase; padding: 0; margin: 0; float: left;} .contentRightCol01 {width: 315px; padding: 10px 30px 0 0; margin: 0; float: left;} .contentRightCol01 ul {font-size: 0.65em; font-weight: normal; list-style: disc outside; color: #bbb; padding: 0 0 0 14px; margin: 0; line-height: 1.4em;} .contentRightCol01 li {padding: 0 0 10px 0; margin: 0;} .contentRightCol01 h2 {width: 315px; display: block; border-bottom: #8cfff6 2px solid; font-size: 0.8em; color: #8cfff6; text-transform: uppercase; padding: 4px 0 10px 0; margin: 0 0 10px 0;} .contentRightCol01 p {padding: 0; margin: 0;} .contentRightCol02 {width: 670px; padding: 10px 30px 0 0; margin: 0; float: left;} .contentRightCol02 h2 {width: 660px; display: block; border-bottom: #8cfff6 2px solid; font-size: 1.8em; color: #8cfff6; text-transform: uppercase; padding: 10px 0; margin: 0 0 10px 0;} .contentRightCol03 {width: 315px; padding: 10px 30px 0 0; margin: 0; float: left;} .contentRightCol03 ul {font-size: 0.65em; padding: 0; margin: 0;} .contentRightCol03 li {padding: 7px 0; margin: 0;} .contentRightCol03 h2 {width: 315px; display: block; border-bottom: #8cfff6 2px solid; font-size: 0.8em; color: #8cfff6; text-transform: uppercase; padding: 0 0 10px 0; margin: 0 0 10px 0;} .contentRightCol03 h3 {margin: 0 0 15px 0; padding: 0;} .contentRightCol04 {width: 206px; padding: 0 23px 0 0; margin: 0; float: left;} .contentRightCol04 ul {font-size: 0.65em; font-weight: normal; list-style: disc outside; color: #bbb; padding: 0 0 0 14px; margin: 0;} .contentRightCol04 li {padding: 0 0 10px 0; margin: 0;} .contentRightCol04 h2 {width: 206px; display: block; border-bottom: #8cfff6 2px solid; font-size: 0.8em; color: #8cfff6; text-transform: uppercase; padding: 10px 0; margin: 0 0 10px 0;} .contentRightCol04 p {padding: 0; margin: 0;} .contentRightCol05 {width: 200px; padding: 10px 30px 0 0; margin: 0; float: left;} .contentExposure {padding: 0; margin: 0 0 10px 0;} .contentExposure ul {padding: 0; margin: 0; list-style: none;} .contentExposure li {padding: 0; margin: 0; display: inline; float: left;} .contentExposure a {padding: 0; margin: 0; display: inline; float: left;} /*bread*/ #breadWrap {width: 100%; padding: 0; margin: 0; height: 24px;} #breadWrap p {padding: 0; margin: 0;} #breadLeft {width: 430px; padding: 0; margin: 0; float: left;} #breadRight {width: 210px; padding: 0; margin: 0; float: right; text-align: right;} #breadRight p {text-transform: lowercase;} /*header*/ #headerWrap {height: 90px; width: 890px; margin: 0 auto 4px auto; padding: 0 10px 0 0;} #headerRight {width: 300px; height: auto; margin: 0; padding: 0; float: right;} #headerRight ul {list-style: none; text-align: right; font-size: 0.7em; color: #ccc; line-height: 1.4em; padding: 30px 0 0 0; margin: 0;} #headerRight a {color: #fff;} a.topA {height: 90px; width: 427px; background: url(headerWrapA.png) no-repeat -0px -20px; margin: 0 auto; padding: 0; float: left;} a.topA:hover, a.topA.hover {background: url(headerWrapA.png) no-repeat -0px -160px;} /*footer*/ #footerWrap {height: auto; width: 930px; margin: 4px auto 0 auto; padding: 0 0 0 30px; display: block;} #footerWrap p {font-size: 0.65em; line-height: 1.3em; padding: 0 0 10px 0; margin: 0; color: #bbb;} /*mainMenu*/ #connectMenu {padding: 10px 0 0 0; margin: 0 0 10px 0;} #connectMenu li {display: inline; float: left;} #connectMenu ul {padding: 10px 0 0 0; margin: 0;} #contentLeft h3 {width: 210px; display: block; border-bottom: #8cfff6 2px solid; font-size: 0.8em; color: #8cfff6; text-transform: uppercase; padding: 10px 0;} #contact02 {padding: 10px 10px 0 0; margin: 0; float: right;} #contact02 .contact01 p {font-size: 0.65em; color: #ccc; padding: 6px 0; margin: 0;} #contact02 .contact01 input {width: 308px;} #contact02 .contact01 textarea {width: 308px; height: 300px;} /*contact*/ .contact01 p {font-size: 0.65em; color: #ccc; padding: 6px 0; margin: 0;} .contact01 input {width: 208px;} .contact01 textarea {width: 208px; height: 300px;} #mainMenu {width: 210px; padding: 0; margin: 0 0 10px 0;} #mainMenu ul {font-size: 0.7em; font-weight: bold; color: #eee; padding: 0; margin: 0;} #mainMenu li ul {font-size: 0.95em; text-indent: 10px; font-weight: normal;} #mainMenu a {color: #eee; text-decoration: none; padding: 12px 10px; width: 190px; display: block;} #mainMenu li {border-bottom: 1px solid #fff;} #mainMenu li ul li {border: none;} #mainMenu li.active {background: #fff;} #mainMenu li.active a {color: black;} span.menuHeader{padding: 12px 10px; background: url(menuHeader.png) no-repeat center right; width: 190px; display: block;} #mainMenu a:hover, #mainMenu li.active a:hover {background: #333; color: #fff;} span.menuHeader:hover {background: url(menuHeaderHover.png) #333 no-repeat center right; color: #fff; display: block;} span.menuContent {display:none;} span.selected {background: url(menuSelected.png) no-repeat center right;} #mainMenu a:active {background: #fff; color: #000;} /*copy*/ #copyWrap {background: #111; width: 900px; margin: 0 auto; padding: 10px 0; text-align: center;} #copyWrap p {padding: 0 10px; margin: 0; font-size: 0.65em; color: #ccc;} #copyWrap a {color: #fff; padding: 0; margin: 0;} /*COLOR BOX*/ /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* ColorBox example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, so that the structure easier to understand. */ #cboxOverlay{background:#000;} #colorbox{} #cboxContent{margin-top:20px; font-size: 0.65em;} #cboxLoadedContent{background:#000; padding:5px;} #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc; font-weight: bold;} #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;} #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;} #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../images/controls.png) top left no-repeat; width:28px; height:65px; text-indent:-9999px;} #cboxPrevious.hover{background-position:bottom left;} #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../images/controls.png) top right no-repeat; width:28px; height:65px; text-indent:-9999px;} #cboxNext.hover{background-position:bottom right;} #cboxLoadingOverlay{background:#000;} #cboxLoadingGraphic{background:url(images/../loading.gif) center center no-repeat;} #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../images/controls.png) top center no-repeat; width:38px; height:19px; text-indent:-9999px;} #cboxClose.hover{background-position:bottom center;} /*carousel*/ .jcarousel-container { position: relative; } .jcarousel-clip { z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative; } .jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0; } .jcarousel-list li, .jcarousel-item { float: left; list-style: none; /* We set the width/height explicitly. No width/height causes infinite loops. */ width: 75px; height: 75px; } .jcarousel-next { z-index: 3; display: none; } .jcarousel-prev { z-index: 3; display: none; } /*carousel skin*/ .jcarousel-skin-tango .jcarousel-container { -moz-border-radius: 5px; background: #000; border: 1px solid #333; } .jcarousel-skin-tango .jcarousel-container-horizontal { width: 580px; padding: 20px 40px; margin: 0; } .jcarousel-skin-tango .jcarousel-container-vertical { width: 75px; height: 245px; padding: 40px 20px; } .jcarousel-skin-tango .jcarousel-clip-horizontal { width: 580px; height: 503px; } .jcarousel-skin-tango .jcarousel-clip-vertical { width: 75px; height: 503px; } .jcarousel-skin-tango .jcarousel-item { width: 580px; height: 503px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: 10px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: 10px; } .jcarousel-skin-tango .jcarousel-item-placeholder { background: #000; color: #000; } /** * Horizontal Buttons */ .jcarousel-skin-tango .jcarousel-next-horizontal { position: absolute; top: 243px; right: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(next-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-next-horizontal:hover { background-position: -32px 0; } .jcarousel-skin-tango .jcarousel-next-horizontal:active { background-position: -64px 0; } .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -96px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal { position: absolute; top: 243px; left: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(prev-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal:hover { background-position: -32px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal:active { background-position: -64px 0; } .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -96px 0; } /** * Vertical Buttons */ .jcarousel-skin-tango .jcarousel-next-vertical { position: absolute; bottom: 5px; left: 43px; width: 32px; height: 32px; cursor: pointer; background: transparent url(next-vertical.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-next-vertical:hover { background-position: 0 -32px; } .jcarousel-skin-tango .jcarousel-next-vertical:active { background-position: 0 -64px; } .jcarousel-skin-tango .jcarousel-next-disabled-vertical, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active { cursor: default; background-position: 0 -96px; } .jcarousel-skin-tango .jcarousel-prev-vertical { position: absolute; top: 5px; left: 43px; width: 32px; height: 32px; cursor: pointer; background: transparent url(prev-vertical.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-prev-vertical:hover { background-position: 0 -32px; } .jcarousel-skin-tango .jcarousel-prev-vertical:active { background-position: 0 -64px; } .jcarousel-skin-tango .jcarousel-prev-disabled-vertical, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active { cursor: default; background-position: 0 -96px; }