/*--------------------------------------------------------------------------------------- Website: Cube Architecture Author: Bitmedia Created: ---------------------------------------------------------------------------------------*/ @import "default.css"; html { overflow-y: scroll;} body { background: #000000; } /*--------------------------------------------------------------------------------------- Base Typography ---------------------------------------------------------------------------------------*/ /*------------------------------------ Links ------------------------------------*/ a:link, a:visited, a:active { color: #ac1818; text-decoration: none; } a:hover { text-decoration: underline; } /*------------------------------------ Type ------------------------------------*/ body { font: 62.5% arial, tahoma, arial, helvetica; color: #999999; } #outerContainer { font-size: 1.2em; line-height: 1.4em; text-align: left; } p { padding: 0 0 1.4em 0; font-size: 1.2em; } /*------------------------------------ Headers ------------------------------------*/ h1, h2, h3, h4, h5, h6 { color: #fff; } h1, h2 { font-size: 1.8em; line-height: 1.2em; padding-bottom: 1em; } h1 span { font-size: .9em; } h3 { font-size: 1.4em; margin: 0 0 0.5em 0; font-weight: bold; padding: 0 0 5px 0; } /*--------------------------------------------------------------------------------------- Layout ---------------------------------------------------------------------------------------*/ /*------------------------------------ Layout Center ------------------------------------*/ #hcenter { width: 972px; margin: 0 auto; -webkit-box-shadow: 0px 0px 10px 5px rgba(000, 000, 000, .4); -moz-box-shadow: 0px 0px 10px 5px rgba(000, 000, 000, .4); box-shadow: 0px 0px 10px 5px rgba(000, 000, 000, .4); } #contentContainer { width: 972px; height: 422px; float: left; position: relative; background: url('../images/transbg-90.png'); positon: relative; z-index: 1; margin: 0px; padding: 0px; box-shadow: 0 -5px 5px 0px rgba(000, 000, 000, .2);} #randomBg { width: 940px; height: 390px; margin: 16px;} /*------------------------------------ LAYOUT ------------------------------------*/ /* Normal background */ .fullBg { position: fixed; top: 0; left: 0; overflow: hidden; } #innerContainer { position: absolute; top: 100px; left: 0; z-index: 50; width: 100%; } /* Header */ #header { width: 972px; position: relative; background: #000; border-bottom: 1px solid #fff; } #logo { float: left; margin: 0; padding: 15px 15px 12px; color: #FFFFFF; font: 12px "Arial Narrow"; letter-spacing: 3px; text-align: center; } /* Footer */ #footer { clear: both; background: url('../images/transbg.png'); text-align: center; } #footer p { text-align: center; font-size: 1.2em; color: #CCCCCC; padding: 7px 0 0 0; } #footer a:link, #footer a:visited { color: #FFFFFF; text-decoration: none; } #footer a:hover, #footer a:focus, #footer a:active { color: #eee; border-bottom: 1px dotted #FFFFFF; } #footer a.selected { border-bottom: 1px solid #FFFFFF; } .social { list-style: none; margin: 9px 0 0 0; padding: 0 0 5px; width: 100%; text-align: center;} .social li { display: inline-block;} .social li a { display: block; width: 16px; height: 16px; text-indent: -9999px; overflow: hidden;} .social li.facebook a { background: url('../images/facebook.png') no-repeat;} .social li.linkedin a { background: url('../images/linkedin.png') no-repeat;} .social li.twitter a { background: url('../images/twitter.png') no-repeat;} .social li a:hover { border-bottom: none !important; background-position: 0 -16px;} /******************************************************************************* Main Navigation Section *******************************************************************************/ ul#mainNav { margin: 20px 6px 0 0; padding: 0px; list-style: none; float: right; } ul#mainNav li { margin: 0; padding: 0px; display: inline; float: left; position: relative; } ul#mainNav li a:link, ul#mainNav li a:visited { display: block; text-decoration: none; color: #fff; font-size: 1.5em; margin: 0px; padding: 5px 19px 5px 19px; line-height: 30px; } ul#mainNav li a:hover, ul#mainNav li a:focus, ul#mainNav li a:active { color: #ac1818; } ul#mainNav li a.selected, body.projects a.projectsNav, body.onsite a.onsiteNav { color: #ac1818 !important; } /******************************************************************************* Footer Navigation Section *******************************************************************************/ ul#minorNav { list-style: none; position: relative; margin: 5px 0px 0px 0px; } ul#minorNav li { padding: 0 5px 0 0; margin: 0 5px 0 0; display: inline; border-right: 1px solid #999;} ul#minorNav li.last { border-right: 0;} ul#minorNav li a:link, { font-size: 1.2em; } /*--------------------------------------------------------------------------------------- Content ---------------------------------------------------------------------------------------*/ /*------------------------------------ Content - HOME ------------------------------------*/ body.homePage #content { position: absolute; top: 16px; left: 16px; width: 315px; height: 390px; padding: 0 16px; color: #fff; background: url('../images/transbg-80.png'); } body.homePage h1 { margin-top: 16px; padding-bottom: 2.8em; } /* Scroller */ body.homePage #scrollContainer { position: relative; overflow: hidden; height: 390px; width: 940px; padding: 16px; } body.homePage .scroll { position: relative; overflow: hidden; width: 940px; height: 390px; } body.homePage .scroll .items { width: 20000em; position: absolute; clear: both; } body.homePage .scroll .item { float: left; width: 940px; height: 390px; } body.homePage .scroll .caption { color: #fff; padding-left: 100px; margin-top: 10px; } body.homePage #scrollContainer .navi { position: absolute; cursor: pointer; height: 20px; top: 369px; right: 26px; background: url('../images/transbg-80.png'); padding: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } body.homePage #scrollContainer .navi a { display: block; width: 13px; height: 13px; float: left; margin: 3px; background: url('../images/navi.png') 0 0 no-repeat; font-size: 1px; } body.homePage #scrollContainer .navi a:hover { background-position: 0 -13px;} body.homePage #scrollContainer .navi a.active { background-position: 0 -26px;} /*------------------------------------ Content - INNER ------------------------------------*/ body.innerPage #content { position: absolute; width: 315px !important; height: 358px; color: #fff; background: url('../images/transbg-80.png'); top: 0; left: 0; padding: 16px;} /* Scroller */ body.innerPage #scrollContainer { position: relative; overflow: hidden; height: 390px; width: 940px; padding: 16px; } body.innerPage .scroll { position: relative; overflow: hidden; width: 940px; height: 390px; } body.innerPage .scroll .items { width: 20000em; position: absolute; clear: both; } body.innerPage .scroll .item { float: left; width: 940px; height: 390px; } body.innerPage .scroll .caption { color: #fff; padding-left: 100px; margin-top: 10px; } body.innerPage #scrollContainer .navi { position: absolute; cursor: pointer; height: 20px; top: 380px; left: 10px; background: #000; } body.innerPage #scrollContainer .navi a { display: block; width: 17px; height: 16px; float: left; margin: 3px; background: url('../images/scrollablenav.png') 0 0 no-repeat; font-size: 1px; } body.innerPage #scrollContainer .navi a:hover { background-position: 0 -16px; } body.innerPage #scrollContainer .navi a.active { background-position: 0 -32px; } /*------------------------------------ Content - PROJECTS ------------------------------------*/ body.projectsPage #content { position: absolute; left: 0; top: 0; width: 523px !important; height: 390px; padding: 0; overflow: auto; } /* Scroller */ body.projectsPage #scrollContainer { position: relative; overflow: hidden; height: 390px; padding: 10px; } body.projectsPage .scroll { position: relative; overflow: hidden; height: 280px; } body.projectsPage .scroll .items { width: 5000em; position: absolute; clear: both; } body.projectsPage .scroll .item { float: left; width: 940px; /*height: 320px;*/ padding: 0px; } body.projectsPage .scroll .item img { float: left; } body.projectsPage .scroll .item .text { padding: 0px 10px; height: 280px; overflow: auto; } body.projectsPage #scrollContainer .buttons { width: 940px; margin-top: 2px; background: #111111; font-size: .9em; overflow: hidden; position: absolute; top: 390px; text-align: center; } body.projectsPage #scrollContainer .buttons a { min-width: 100px; cursor: pointer; padding: 0px 20px; color: #FFFFFF; text-decoration: none; font-weight: bold; line-height: 20px; } body.projectsPage #scrollContainer .buttons a:hover { background: #990000; } body.projectsPage #scrollContainer .buttons .prev { float: left; text-align: left;/*padding-left: 10px;*/ } body.projectsPage #scrollContainer .buttons .next { float: right; text-align: right;/*padding-right: 10px;*/ } body.projectsPage .slideInfo { margin: 5px; overflow: hidden; text-align: justify; float: left; } body.projectsPage .slideInfo h3 { font-size: 1.4em; padding-bottom: 5px; margin: 0; font-weight: normal; border-bottom: none; } body.projectsPage .previewPane { margin: 0px; padding: 0px; margin-top: 10px; position: absolute; width: 100% !important; height: 100px; border-top: 1px solid #333333; text-align: center; overflow: auto; } body.projectsPage .previewPane ul.tabs { margin: 0px; padding: 0px; list-style: none; } body.projectsPage .previewPane ul.tabs li { margin: 0px; padding: 0px; display: inline; } body.projectsPage .previewPane img { width: 100px; height: 60px; margin: 5px; padding: 2px; border: 2px solid #333333; } body.projectsPage .previewPane img:hover, body.projectsPage .previewPane img.active { border-color: #CC0000; background-color: #990000; } table.info { width: 100%; border-collapse:collapse; } table.info td { } table.info td.leg { font-weight: bold; padding: 5px 0; width: 62px;} /*************************************************************************************************** Project Information Pane Stylings. ***************************************************************************************************/ #info_pane { float: left; width: 246px !important; height: 295px !important; border-left: 1px solid #333333; border-right: 1px solid #333333; overflow: hidden; padding: 0; margin: 16px 16px 16px 6px; position: relative; } #info_pane #content { width: 206px; height: 275px; padding: 10px; } #info_pane .jScrollPaneContainer { left: 20px; top: 0;} #info_pane .jScrollPaneContainer p, #info_pane .jScrollPaneContainer h1 { padding-right : 20px;} /*************************************************************************************************** Projects Navigation Pane Stylings. ***************************************************************************************************/ #projects_pane { float: right; width: 184px !important; height: 295px !important; text-align: right; overflow: hidden; font-size: 12px; margin: 16px 16px 0 0; } #projects_pane h2 { display: block; margin: 0px; padding: 0px; font-size: 13px; line-height: 28px; color: #999999; cursor: pointer; font-weight: bold;} #projects_pane h2:hover { color: #ac1818; } #projects_pane ul { display: none; list-style: none; margin-bottom: 10px; } #projects_pane .pane { list-style: none; display: block; margin: 0px 0; padding: 0px 20px; width: 160px; border-bottom: 1px solid #333333; } #projects_pane .pane.last { border: none; } #projects_pane .pane.selected ul { display: block; } #projects_pane a:link, #projects_pane a:visited { color: #CCCCCC; text-decoration: none; } #projects_pane a:hover, #projects_pane a:focus, #projects_pane a:active, #projects_pane a.selected { color: #ac1818 !important; } /*************************************************************************************************** Gallery Image Pane Stylings. ***************************************************************************************************/ #image_pane { float: left; width: 470px !important; height: 295px !important; margin: 16px; } #gallery_image { width: 100%; height: 100%; overflow: hidden; text-align: center; vertical-align: middle; } #gallery_image img { cursor: pointer;} /*************************************************************************************************** Gallery Thumbnail Pane Stylings. ***************************************************************************************************/ #gallery_pane { clear: both; height: 75px !important; border-top: 1px solid #333333; margin: 0 16px; } #gallery_pane .browse { float: left; display: block; width: 30px; height: 100px; } #gallery_pane .browse:hover { color: #ffffff; cursor: pointer; } #gallery_pane .prev { float: left; } #gallery_pane .next { float: right; } #gallery_pane .scrollable { position: absolute; overflow:hidden; width: 940px; padding: 16px 0; } #gallery_pane .scrollable .items { width: 9999px; float: left; overflow: hidden; } #gallery_pane .scrollable .items div { float: left; width: 940px;} #gallery_pane .scrollable .thumbnail { height: 60px; border: 1px solid #333333; margin: 0 15px 0 0; cursor: pointer; } #gallery_pane .scrollable .thumbnail.active { border: 1px solid #ac1818;} #gallery_pane .scrollable .thumbnail:hover { border: 1px solid #eee;} /*------------------------------------ Content - CONTACT ------------------------------------*/ body.contactPage #content { position: absolute; width: 507px; height: 358px; padding: 16px; color: #fff; background: url('../images/transbg-80.png'); top: 6px; left: 16px; margin: 0; } /* Scroller */ body.contactPage #scrollContainer { position: relative; overflow: hidden; height: 390px; width: 940px; padding: 16px; } body.contactPage .scroll { position: relative; overflow: hidden; width: 940px; height: 390px; } body.contactPage .scroll .items { width: 20000em; position: absolute; clear: both; } body.contactPage .scroll .item { float: left; width: 940px; height: 390px; } body.contactPage .scroll .caption { color: #fff; padding-left: 100px; margin-top: 10px; } body.contactPage #scrollContainer .navi { position: absolute; cursor: pointer; height: 20px; top: 380px; left: 10px; background: #000; } body.contactPage #scrollContainer .navi a { display: block; width: 17px; height: 16px; float: left; margin: 3px; background: url('../images/scrollablenav.png') 0 0 no-repeat; font-size: 1px; } body.contactPage #scrollContainer .navi a:hover { background-position: 0 -16px; } body.contactPage #scrollContainer .navi a.active { background-position: 0 -32px; } #contactInfo { float: left; width: 200px; margin-right: 50px; } #contactInfo a { color: #fff; text-decoration: underline; } #contactInfo a:hover { color: #fff; text-decoration: none; } #contactForm { float: left; width: 240px; } #contactForm .row { font-size: 1.2em; margin-bottom: 10px;} #contactForm .row label { display: block;} #contactForm .row input { margin: 3px 0 0px 0; } #contactForm textarea { height: 85px; min-height: 85px; max-height: 85px; } #contactForm .row input, #contactForm textarea { width: 220px; min-width: 220px; max-width: 220px; padding: 2px 5px; font-size: 1.2em; font-family: Verdana, Geneva, sans-serif; } #contactForm .submitButton input { margin: 0; float: right; margin-right: 5px; } /* Validation */ .form div.invalid { color: #CC0000; background: url('../images/icon_error.png') no-repeat 0 50% ; padding: 2px 0 2px 21px;} .form input.invalid, .form select.invalid, .form textarea.invalid { border: 1px solid #FF9999 !important;} #newsListing { } #newsListing .item { margin-bottom: 25px;} #newsListing h3 { padding: 0 0 0 0;} #newsListing h3 a { color: #fff;} #newsListing p { padding-bottom: 5px;} #newsListing .readMore { font-size: 1.2em;} .back { margin-bottom: 20px;} .back a { font-size: 1.2em; background: url('../images/back.png') no-repeat center left; padding: 0 0 0 24px; } /*--------------------------------------------------------------------------------------- Misc. ---------------------------------------------------------------------------------------*/ /*------------------------------------ Scroller ------------------------------------*/ /* Default scroll position */ .jScrollPaneContainer { height: 410px; overflow: hidden; position: absolute; left: 16px; top: 16px; width: 340px; outline: 0; } #content { margin-top: 10px !important; } /* add top margin by default */ .jScrollPaneContainer #content, body.homePage #content { margin-top: 0 !important; } /* remove margin on pages with scroll and on homepage */ .jScrollPaneContainer #content, body.innerPage #content { margin-top: 0 !important; } /* remove margin on pages with scroll and on inner page */ body.innerPage .jScrollPaneContainer { width: 380px; height: 340px; padding-right: 15px; } /*projects page scroll layout is different from default */ body.projectsPage .jScrollPaneContainer { height: 390px; margin: 10px 10px 0 0; overflow: hidden; position: absolute; left: 387px !important; top: 0; width: 563px !important; outline: 0; } /* scroller config */ .jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: #aaa; } .jScrollPaneDrag { position: absolute; background: #666; cursor: pointer; overflow: hidden; } .jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; } .jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; } a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; /*background-color: #666;*/ height: 9px; } a.jScrollArrowUp:hover { /*background-color: #f60;*/} a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; /*background-color: #666;*/ height: 9px; } a.jScrollArrowDown:hover { /*background-color: #f60;*/} a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { /*background-color: #f00;*/} /* scroller skin */ .jScrollPaneContainer .jScrollPaneTrack { background: url(../images/scroll/windows_track.png) repeat-y; } .jScrollPaneContainer .jScrollPaneDrag { background: url(../images/scroll/windows_drag_middle.png) no-repeat 0 50%; } .jScrollPaneContainer .jScrollPaneDragTop { background: url(../images/scroll/windows_drag_top.png) no-repeat; height: 10px; } .jScrollPaneContainer .jScrollPaneDragBottom { background: url(../images/scroll/windows_drag_bottom.png) no-repeat; height: 10px; } .jScrollPaneContainer a.jScrollArrowUp { height: 20px; background: url(../images/scroll/windows_arrow_up.png) no-repeat 0 0; } .jScrollPaneContainer a.jScrollArrowUp:hover { background-position: 0 -20px; } .jScrollPaneContainer a.jScrollArrowDown { height: 20px; background: url(../images/scroll/windows_arrow_down.png) no-repeat 0 0; } .jScrollPaneContainer a.jScrollArrowDown:hover { background-position: 0 -20px; } .jScrollPaneContainer a.jScrollActiveArrowButton, .jScrollPaneContainer a.jScrollActiveArrowButton:hover { background-position: 0 -40px; } .projects .jScrollPaneContainer .jScrollPaneTrack, .onsite .jScrollPaneContainer .jScrollPaneTrack { background: url(../images/scroll/light/windows_track.png) repeat-y; } .projects .jScrollPaneContainer .jScrollPaneDrag, .onsite .jScrollPaneContainer .jScrollPaneDrag { background: url(../images/scroll/light/windows_drag_middle.png) no-repeat 0 50%; } .projects .jScrollPaneContainer .jScrollPaneDragTop, .onsite .jScrollPaneContainer .jScrollPaneDragTop { background: url(../images/scroll/light/windows_drag_top.png) no-repeat; height: 10px; } .projects .jScrollPaneContainer .jScrollPaneDragBottom, .onsite .jScrollPaneContainer .jScrollPaneDragBottom { background: url(../images/scroll/light/windows_drag_bottom.png) no-repeat; height: 10px; } .projects .jScrollPaneContainer a.jScrollArrowUp, .onsite .jScrollPaneContainer a.jScrollArrowUp { height: 20px; background: url(../images/scroll/light/windows_arrow_up.png) no-repeat 0 0; } .projects .jScrollPaneContainer a.jScrollArrowUp:hover, .onsite .jScrollPaneContainer a.jScrollArrowUp:hover { background-position: 0 -20px; } .projects .jScrollPaneContainer a.jScrollArrowDown, .onsite .jScrollPaneContainer a.jScrollArrowDown { height: 20px; background: url(../images/scroll/light/windows_arrow_down.png) no-repeat 0 0; } .projects .jScrollPaneContainer a.jScrollArrowDown:hover, .onsite .jScrollPaneContainer a.jScrollArrowDown:hover { background-position: 0 -20px; } .projects .jScrollPaneContainer a.jScrollActiveArrowButton, .onsite .jScrollPaneContainer a.jScrollActiveArrowButton, .jScrollPaneContainer a.jScrollActiveArrowButton:hover { background-position: 0 -40px; } /*------------------------------------ ErrorPage ------------------------------------*/ body.errorPage #content { text-align: center; padding: 100px 0 0 0; } /* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #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; } #cboxTitle { margin:0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position:absolute; top:0; left:0; width:100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor:pointer; } .cboxPhoto { float:left; margin:auto; border:0; display:block; } .cboxIframe { width:100%; height:100%; display:block; border:0; } /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background:#000; } #colorbox { } #cboxContent { margin-top:20px; } #cboxError { padding:50px; border:1px solid #ccc; } #cboxLoadedContent { border:5px solid #000; background:#fff; } #cboxTitle { position:absolute; top:-20px; left:0; color:#ccc; } #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/colorbox/controls.png) no-repeat top left; 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/colorbox/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px; } #cboxNext.hover { background-position:bottom right; } #cboxLoadingOverlay { background:#000; } #cboxLoadingGraphic { background:url(../images/colorbox/loading.gif) no-repeat center center; } #cboxClose { position:absolute; top:5px; right:5px; display:block; background:url(../images/colorbox/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px; } #cboxClose.hover { background-position:bottom center; } #bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%;} .bgwidth { width: 100%; } .bgheight { height: 100%; }