/* --------------------------------------------------------------------------------- Master Stylesheet Author: Justin Gray Website: www.justingraydesign.com --------------------------------------------------------------------------------- */ body { background: #e5e5e5; margin: 0; padding: 0; font-family: arial, helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.4em; color: #a41c24; font-weight: normal; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #a41c24; text-decoration: none; border: none; } h1 { font-size: 1.5em; line-height: 1.2em; margin: 0 0 0.6em 0; font-family: 'Open Sans', arial, sans-serif; } h2 { font-size: 0.9em; margin: 0 0 1.0em 0; font-family: 'Open Sans', arial, sans-serif; } h3, h4, h5, h6 { font-size: 0.7em; } a img { border: none; } p { font-size: 0.8em; color: #868686; line-height: 1.4em; margin: 0 0 1.4em 0; } a { color: #414141; text-decoration: none; } a:hover { color: #a41c24; } ul, ol { margin: 0 0 1.4em 0; padding: 0; } ul li, ol li { font-size: 0.8em; color: #868686; line-height: 1.4em; } #header-wrap { float: left; width: 100%; background: url(../images/header-bg.jpg) repeat-x center 0 #a61d24; } #header { width: 100%; max-width: 960px; padding: 0; margin: 0 auto; height: 65px; position: relative; z-index: 10; } #headline-wrap { float: left; width: 100%; background: url(../images/header-bg.jpg) repeat center -65px #a61d24; } #headline { width: 100%; max-width: 960px; padding: 29px 0; margin: 0 auto; position: relative; z-index: 10; text-align: center; } #headline p { font-size: 1.5em; line-height: 1.2em; margin: 0 0 25px 0; } #headline h1, #headline p { color: #fff; margin: 0; font-family: 'Open Sans', arial, sans-serif; padding: 0 60px; } #headline h1 a, #headline p a { color: #fff; } #headline h1 a:hover, #headline p a:hover { border-bottom: solid 1px #de756d; } #contact #headline p { padding: 0 70px; } #footer-wrap { float: left; width: 100%; padding: 0 0 30px 0; border-top: solid 1px #cecece; border-bottom: solid 1px #cecece; background: #fff; } #footer { width: 100%; max-width: 960px; padding: 0px; margin: 0 auto; } #project-wrap { float: left; width: 100%; padding-bottom: 10px; } #project { width: 100%; max-width: 960px; padding: 25px 0 20px 0; /* padding: 25px 20px 20px 20px;*/ margin: 0 auto; background: url(../images/folio-arrow.gif) no-repeat 30px 0; } #content-wrap { float: left; width: 100%; background: #fff; } #content { width: 100%; max-width: 960px; padding: 0; margin: 0 auto; } #content a { border-bottom: solid 1px #c1c1c1; } #content a:hover { border-bottom: solid 1px #e9888e; } #mid-wrap { float: left; width: 100%; } #mid { width: 100%; max-width: 960px; padding: 30px 0 0 0; margin: 0 auto; } #mid p a:hover { text-decoration: underline; } /* --------------------------------------------------------------------------------- HEADER --------------------------------------------------------------------------------- */ #logo { float: left; margin: 24px 0 0 30px; display: inline; } #logo a { float: left; } #logo a span { display: none; } #logo-print { display: none; } /* #navigation { position: absolute; top: 0; left: 320px; z-index: 100; width: 622px; } */ #header ul { float: right; margin: 0 30px 0 0; font-family: helvetica, arial, sans-serif; } #header ul li { float: left; list-style-type: none; padding: 0; text-transform: uppercase; padding: 0 0 0 30px; font-weight: bold; } #header ul li a { color: #ffa89e; float: left; display: block; padding: 26px 0 20px 0; outline: none; } #header ul li a:hover { color: #fff; } #home #header #n01 a, #about #header #n02 a, #folio #header #n03 a, #contact #header #n04 a, #blog #header #n05 a { color: #fff; } /* --------------------------------------------------------------------------------- LEFT --------------------------------------------------------------------------------- */ #folio-left { float: left; border: none; width: 551px; padding: 0; margin: 30px 0 25px 30px; } #left { float: left; border: none; width: 551px; padding: 0 0 20px 30px; } #left .red { color: #a41c24; } .hide { display: none; } .smTxt { font-size: 0.7em; } .align-right { margin-left: 20px; float: right; } #left .mypic { border: solid 5px #e3e3e3; } fieldset { margin: 0; padding: 0; border: none; float: left; width: 100%; } fieldset p { float: left; width: 100%; margin: 0 0 12px 0; } fieldset label { width: 100%; float: left; text-transform: uppercase; font-size: 0.85em; } fieldset .field, fieldset textarea { background: #fff; border: solid 1px #c7c7c7; border-left: solid 5px #af2224; padding: 5px; width: 250px; font-family: arial, helvetica, sans-serif; font-size: 1.0em; color: #868686; } fieldset .field:focus, fieldset textarea:focus { background: #fff9ea!important; border: solid 1px #dbbabc; border-left: solid 5px #af2224; color: #414141; } fieldset legend { color: #a41c24; font-size: 0.75em; font-weight: bold; margin: 0 0 1.0em 0; } #enquiry { border: solid 9px #cecece; margin: 0 30px 30px 0; display: inline; float: right; width: 301px; } #enquiry fieldset { border: solid 1px #b0b0b0; padding: 20px 0 20px 19px; width: 280px; } #enquiry .required, #questionaire .required { color: #a41c24; text-transform: none; } #enquiry #error, #questionaire #error { background: #000; color: #fff; text-align: center; float: left; width: 100%; padding: 10px 0; font-weight: bold; margin: 0; } #enquiry #successful, #questionaire #successful { color: #23a715; } #enquiry #successful { float: left; width: 241; background: #23a715; color: #fff; font-size: 1.3em; text-align: center; padding: 60px 30px; letter-spacing: -0.01em; } #questionaire .name { float: left; width: 272px; } #questionaire .email { float: right; width: 267px; } #questionaire .comment { width: 533px; } #questionaire .submitB { float: right; } #enquiry .email { float: left; width: 274px; } fieldset .field { width: 245px; } #enquiry .submit { margin: 0; } #enquiry .submitB { float: right; margin-right: 20px; } #enquiry #error { padding: 5px 0; } #questionaire label { text-transform: none; } #questionaire .required { font-weight: bold; font-family: verdana; } #questionaire .cReject { font-weight: bold; color: #6e0000; } #left .accolades { border-top: solid 1px #b0b0b0; padding-top: 25px; margin-top: 15px; float: left; width: 100%; } #left .accolades ul { float: left; margin: 0; padding: 0; } #left .accolades ul li { padding-right: 35px; font-size: 0.7em; list-style-type: none; } #full-width { float: left; width: 100%; padding: 0 30px 0 0; margin: 55px 0; } #cleft { float: left; width: 270px; background: #efefef; padding: 20px; } #cright { float: right; width: 530px; background: #efefef; padding: 20px; border: solid 10px #dbdbdb; margin-top: -10px; } #cleft .field { width: 253px; } #cright .field { width: 514px; } #cright textarea { width: 514px; } #cright .size3 { width: 350px; } /* --------------------------------------------------------------------------------- FOLIO --------------------------------------------------------------------------------- */ #myfolio { float: left; width: 100%; } #myfolio ul { margin: 0; float: left; padding-right: 32px; } #myfolio ul li { font-size: 0.7em; list-style-type: none; } #myfolio ul li a { border: none; color: #868686; } #myfolio ul li a:hover { color: #414141; border-bottom: solid 1px #c1c1c1; } #projectlist { float: left; width: 100%; } .project-20 #myfolio .f20 a, .project-19 #myfolio .f19 a, .project-18 #myfolio .f18 a, .project-17 #myfolio .f17 a, .project-16 #myfolio .f16 a, .project-15 #myfolio .f15 a, .project-14 #myfolio .f14 a, .project-13 #myfolio .f13 a, .project-12 #myfolio .f12 a, .project-11 #myfolio .f11 a, .project-10 #myfolio .f10 a, .project-09 #myfolio .f09 a, .project-08 #myfolio .f08 a, .project-07 #myfolio .f07 a, .project-06 #myfolio .f06 a, .project-05 #myfolio .f05 a, .project-04 #myfolio .f04 a, .project-03 #myfolio .f03 a, .project-02 #myfolio .f02 a, .project-01 #myfolio .f01 a { color: #a41c24; border: none; } #project h1 { font-size: 0.8em; margin: 0 0 1px 0; } #project #prev-next { float: right; margin: -2px 10px 0 0; } #project #prev-next a { display: block; width: 18px; height: 18px; margin-left: 5px; float: left; } #project #prev { background: url(../images/prev-project.gif) no-repeat 0 0; } #project #next { background: url(../images/next-project.gif) no-repeat 0 0; } #project #prev-next span { display: none; } #project #prev-next a:hover { background-position: 0 -18px; border: none; } #project-padd { padding: 0 20px; } #project-info { float: left; padding: 0 0 10px 0; width: 100%; position: relative; } #project-info .client { float: left; color: #a41c24; font-size: 0.7em; padding-left: 10px; } #project-info .client span { color: #868686; padding: 0 2px; } #project-info .client a { color: #868686; } #project-info .client a:hover { color: #414141; border-bottom: solid 1px #c1c1c1; } #project-info p, #top { font-size: 0.7em; margin: 0; color: #868686; } #project-info p a, #top a { color: #868686; } #project-info p a:hover, #top a:hover { color: #414141; border-bottom: solid 1px #c1c1c1; } #project-info .overview { position: absolute; top: 0px; left: 200px; width: 550px; color: #adadad; } #project-shots { float: left; margin: 0; padding: 0; width: 100%; } #project-shots p { font-size: 0.7em; } #project-shots .project-blurb { text-align: center; width: 500px; margin: 0 auto 40px auto; } #project-shots h2 { margin: 0; } #project-shots h3 { color: #868686; text-align: center; padding-top: 15px; } #project-shots li { float: left; width: 100%; list-style-type: none; background: url(../images/project-imgbtm.gif) no-repeat 0 bottom; margin: 0 0 45px 0; padding: 0 0 10px 0; } #project-shots .tight { width: 420px; margin: 0 auto; } .project-shot { float: left; padding: 44px 0 0 0; background: url(../images/project-top.jpg) no-repeat 0 0; width: 100%; } .project-shot span { padding: 0 10px; float: left; background: url(../images/project-imgbg.gif) repeat-y 0 0; } .project-shot img { width: 100%; } .overview { font-size: 1.0em; } .screenshot-split { float: left; width: 100%; margin: 0 0 45px 0; } .left-half { float: left; } .right-half { float: right; } .project-extra { float: left; width: 100%; padding: 0 0 40px 0; } .project-extra .img { float: right; } .project-extra-txt { float: left; width: 290px; padding: 20px 0 20px 10px; } .project-extra .no-margin { margin: 0; } /* --------------------------------------------------------------------------------- INSPIRATION --------------------------------------------------------------------------------- */ #years { float: left; width: 100%; margin: 0 0 25px 0; padding: 10px 0 10px 0; border-bottom: solid 1px #b0b0b0; border-top: solid 1px #b0b0b0; } #years li { float: left; padding-right: 15px; list-style-type: none; } #years li a { color: #868686; } #years .active a { color: #414141; font-weight: bold; } #years li a:hover { color: #a41c24; } #inspiration { padding: 0 30px; } #inspiration .gallery { float: left; width: 100%; margin: 0 0 20px 0; padding: 0; } #inspiration .gallery li { list-style-type: none; float: left; margin: 0 15px 15px 0; text-align: center; border: solid 1px #b0b0b0; background: #fff; } #inspiration .gallery li a { float: left; width: 200px; background: #fff; padding: 4px; color: #989898; text-transform: capitalize; font-size: 11px; } #inspiration .thumb { float: left; width: 200px; height: 140px; overflow: hidden; margin-bottom: 5px; } #inspiration .gallery li:hover { border: solid 1px #000; } #inspiration .gallery li a:hover { background: #000; } /* --------------------------------------------------------------------------------- RIGHT --------------------------------------------------------------------------------- */ #folio-right, #right { float: right; width: 292px; margin: 30px 30px 10px 0; display: inline; } #folio-right p, #right p { font-size: 0.7em; margin: 0; } #right { margin-top: 0; } #folio-right { border-left: solid 1px #e5e5e5; padding-left: 28px; } #right .red { color: #a41c24; } #right .topdash { border-top: dashed 1px #cecece; padding-top: 20px; margin-top: 5px; } #right .bold { font-weight: bold; } #right .shift { width: 45px; float: left; } #right #h2-about { background: url(../images/txt-aboutme.gif) no-repeat 0 0; width: 100%; height: 18px; margin: 0 0 20px 0; } #right #h2-about span { display: none; } #right #h2-sayhi { width: 100%; height: 23px; background: url(../images/txt-sayhi.gif) no-repeat 0 0; margin: 0 0 15px 0; } #right #h2-sayhi span { display: none; } #twitter { float: left; width: 175px; background: url(../images/twitter-icon.gif) no-repeat right 17px; padding: 38px 115px 10px 0; } #twitter p { color: #a9a9a9; background: url(../images/twitter-quote.gif) no-repeat 0 0; text-indent: 22px; padding-top: 2px; margin: 0 0 8px 0; } #twitter ul { margin: 0; padding: 0; min-height: 70px; } #twitter ul li { margin: 0 0 5px 0; list-style-type: none; font-size: 0.7em; color: #a9a9a9; background: url(../images/twitter-quote.gif) no-repeat 0 0; text-indent: 22px; padding-top: 2px; float: left; } #twitter ul li a { font-size: 11px!important; color: #a9a9a9; border-bottom: solid 1px #d6d6d6; } #twitter ul li a:hover { color: #a41c24; } #twitter .follow { float: left; } #twitter .follow, #twitter .follow:hover { border: none; } /* --------------------------------------------------------------------------------- FOOTER --------------------------------------------------------------------------------- */ #footer ul li, #footer p { font-size: 0.7em; margin: 0; color: #9d9d9d; } #footer ul { margin: 0 0 0 30px; float: left; width: 80%; } #footer ul li { float: left; padding: 30px 0 0 0; margin-right: 15px; list-style-type: none; } #footer ul li a { color: #676767; text-transform: uppercase; float: left; } #footer ul li a:hover { color: #000; } #footer p { float: left; padding-left: 30px; } #home #footer #f01, #about #footer #f02, #folio #footer #f03, #contact #footer #f04, #blog #footer #f05 { border-top: 10px solid #cecece; padding-top: 20px; } #footer #top { float: right; margin: -9px 30px 0 0; } #footer #top a { padding-right: 15px; background: url(../images/arrow-top.gif) no-repeat right 6px; } /* --------------------------------------------------------------------------------- HOME --------------------------------------------------------------------------------- */ /* #home #left { position: relative; } #home h1 { width: 100%; height: 81px; background: url(../images/txt-homeh1.gif) no-repeat 0 0; } #home h1 span { display: none; } #home-intro { width: 520px; float: left; } #home-intro h2 { padding-top: 10px; } */ #feature { float: left; width: 100%; overflow: hidden; height: 217px; padding-top: 32px; margin: -32px 0 0 0; } #feature p { font-size: 0.7em; width: auto; } #feature .panel { float: left; width: 550px; min-height: 217px; background: #e5e5e5; padding-bottom: 30px; } #feature .desc { width: 190px; float: left; border-top: solid 10px #cecece; padding: 30px 0 20px 30px; } #feature a, #feature a:hover { border: none; } #feature .thumb { float: right; width: 270px; margin: -32px 25px 0 0; height: 214px; background: url(../images/feature-thumbbg.png) no-repeat 0 0; padding: 5px; } #feature .thumb a { border: solid 5px #fff; float: left; } #feature .more { float: left; font-size: 0.65em; background: url(../images/btn-more.gif) no-repeat 0 0 #a61d24; color: #fff; width: 81px; height: 18px; padding: 4px 0 0 0; text-align: center; } #feature .more:hover { background-position: 0 bottom; } .stripViewer { /* This is the viewing window */ position: absolute; overflow: hidden; margin: auto; width: 550px; /* Also specified in .stripViewer .panelContainer .panel below */ height: 217px; clear: both; z-index: 100; left: 0px; top: 67px; } .stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS */ position: relative; left: 0; top: 0; width: 100%; list-style-type: none; z-index: 100; /* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */ } .stripNav { display: none; } #left .stripNavL a, #left .stripNavR a { width: 27px; height: 27px; text-indent: -5000px; display: block; position: absolute; top: 288px; z-index: 600; outline: none; border: none; } .stripNavL a { background: url(../images/arrow-left.gif) no-repeat 0 0; float: left; left: -15px; } .stripNavR a { background: url(../images/arrow-right.gif) no-repeat 0 0; float: right; left: 538px; } .stripNavL a:hover, .stripNavR a:hover { background-position: 0 -27px; cursor: hand; cursor: pointer; outline: none; }