* { margin: 0; padding: 0; } // Colors and Such @primary: #e5e5e5; @white: #fff; @dark: #252525; @activelink: #454155; @link: #aae0f5; @link2: #dcaf11; @text: 'Droid+Sans', arial, serif; @text1: 'Cabin', arial, serif; @text2: 'Droid+Sans', arial, serif; @text3: 'Rokkitt', arial, serif; @avgheight: 20px; @tallheight: 24px; @small: 12px; @normal: 14px; @navsize: 18px; @big: 30px; @large: 38px; .textshadowdark {text-shadow: 2px 2px 0 rgba(0,0,0,0.2); } .textshadowlight {text-shadow: 1px 1px 0 rgba(255,255,255,0.75); } a { color: @link; text-decoration: none; font-weight: bold; } .highlight { color: @link2; } img { border: 0; } hr { height: 2px; background: url('divider.png') repeat-x; border: none; } body { background: url('bg.gif') repeat; width: 100%; min-width: 980px; color: @primary; font-family: @text; font-size: @normal; } #navicontainer { background : url('navibg.png') repeat-x; width: 100%; height: 43px; } #navicontent { width: 980px; margin: auto; } #logo { float: left; padding: 5px 0 0 0; a { display: block; width: 313px; height: 26px; background: url('logo.png') no-repeat; } } #navigation { background: url('linkdivider.png')left no-repeat; float: right; ul { } li { display: inline; display: block; float: left; height: 39px; background: url('linkdivider.png')right no-repeat; a { display: block; height: 23px; padding: 8px 10px; font-size: @navsize; color: @dark; .textshadowlight; font-family: @text2; } a:hover, a#active { color: @activelink; } a#active { background: url('active.png')repeat-x; } } } .containerheadflush { margin: -4px 0 0 0; } #featuredcontainer { width: 100%; height: 362px; background : url('featuredbg.gif') center no-repeat; background-color: #845a08; margin: -4px 0 0 0; #featuredtexture { width: 100%; height: 362px; background : url('featuredtexture.png') repeat-x; #featuredlines { width: 100%; height: 362px; background : url('vertlines.png') repeat; #featuredcontent { width: 980px; margin: auto; } #featuredscreens { width: 980px; height: 294px; margin: auto; margin-top: -20px; background : url('featuredborder.png') no-repeat; } } } h1 { font-family: @text1; .textshadowdark; text-align: center; padding: 30px 0 0 0; font-size: @large; color: @white; } } div#header { } div.wrap { width : 970px; height : 200px; } div#slide-holder { z-index : 40; width : 993px; height : 299px; position : absolute; } div#slide-runner { top: 47px; left: 5px; width : 970px; height : 200px; overflow : hidden; position : absolute; } div#slide-holder img { margin : 0; display : none; position : absolute; } div#slide-controls { top: 264px; left: 40%; display : none; position : absolute; } p#slide-nav a { float : left; width : 24px; height : 24px; display : inline; font-size : @small; margin : 0 5px 0 0; line-height : 24px; font-weight : bold; text-align : center; text-decoration : none; color: @primary; .textshadowdark; } p#slide-nav a.on { background-position : 0 -24px; } p#slide-nav a:hover { background-position : 0 -24px; } p#slide-nav a { background-image : url(silde-nav.png); } #contentcontainer { background: url('burst.png')center no-repeat; min-height: 300px; } #content { width: 980px; margin: auto; padding-top: 50px; line-height: @avgheight; } #fullcontent { padding: 50px 20px 0; line-height: @avgheight; } #selected { width: 200px; float: left; line-height: @avgheight; p { margin: 0 0 20px 0; } a { color: @link2; } a:hover { text-decoration: underline; } } h2 { font-family: @text3; color: @link; font-size: @big; } #selected hr, #aboutcontainer hr { margin: 20px 0; } #workscontainer { width: 780px; float: left; a:hover { text-decoration: underline; } } #aboutcontainer { width: 740px; float: left; margin: 0 0 0 40px; img { border: solid 1px #e5e5e5; padding: 10px; background-color: #fff; margin: 0 0 20px 20px; } p { margin: 0 0 10px 0; } } #fullworkscontainer { float: left; position: absolute; margin: 0 0 0 200px; } .works { width: 220px; float: left; margin: 0 0 0 40px; a { color: @link2; } } .fullworks { margin: 0 0 0 40px; clear: both; float: left; } .thumbnail { border: solid 1px #e5e5e5; padding: 10px; background-color: #fff; } .thumbshadow { height: 10px; background: url('thumbshadow.png') right no-repeat; } .description { hr { margin: 5px 0 10px 0; } margin: 0 0 20px 0; } /*General Mosaic Styles*/ .mosaic-block { position:relative; overflow:hidden; width: 198px; height: 170px; background-color: #fff; a { color: @link; } } .mosaic-backdrop { display:none; position:absolute; top:0; height:100%; width:100%; background:#111; } .mosaic-overlay { display:none; z-index:5; position:absolute; width:100%; height:100%; background:#111; } .bar .mosaic-overlay { bottom: -30px; height: 30px; background:url(bg-black.png); } .details { h4 { margin: 5px 10px 0; font-size: @navsize; } a:hover { text-deocration: none; } } .skillsets { line-height: @tallheight; }