/* * I belong to: http://www.presseye.com * Filename: main.css * Author: Glen Campbell (glen@cargostudios.com) * Author URL: http://www.cargostudios.com * Created: 10/02/10 * Last edited: 09/09/10 ---------------------------------------------------------------------- IN ORDER OF APPEARANCE #1.0 IMPORT #2.0 FOUNDATIONS #3.0 TYPOGRAPHY #4.0 COMMON UI #5.0 FORMS --section specific-- #6.0 HOME #7.0 PHOTOGRAPHY SERVICES #8.0 PORTFOLIO #9.0 LIBRARY (see library.css) #8.0 GET IN TOUCH #9.0 ABOUT #10.0 PHOTOGRAPHER #11.0 BOOK ---------------------------------------------------------------------- */ /* #1.0 IMPORT ------------------------------------------------------------------*/ @import url(reset.css); @import url(library.css); @import url(clearfix.css); /* #2.0 FOUNDATIONS ------------------------------------------------------------------*/ html {} body {font : 75%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;background:#e8e8e8 url(../img/bg_body.png) repeat;color:#222;} /* #3.0 TYPOGRAPHY ------------------------------------------------------------------*/ h1,h2,h3,h4,h5 {font-weight:700;text-shadow: #b0b0b0 1px 1px 1px ;line-height:150%;} h1 {font-size:2.1em;margin:0 0 1em 0;text-transform: uppercase;} h2 {font-size:1.8em;margin:0 0 0.3em 0;text-transform: uppercase;} h3 {font-size:1.59em;margin:0 0 0.3em 0;text-transform: uppercase;} h4 {font-size:1.29em;margin:0 0 0.3em 0;} h5 {font-size:1.4em;margin:0 0 0.3em 0;} p {font-size:1.1em;margin:0 0 1.1em;text-shadow:1px 1px 0 #fff;} p a {border-bottom:;font-weight: bold} a,a:visited, a:active {text-decoration:none;color:#165493;} em {font-style:italic;} a { outline: none; } a, a:visited {} a:hover {border:none;color:#FF0066;} p a:active {position: relative;top:1px;left:1px;} ul,ol {margin-bottom:1.6em;}; li {text-shadow:1px 1px 0 #fff;} /* #4.0 COMMON UI ------------------------------------------------------------------*/ /* Accessability */ #access {display:none;} /* header */ #head {background:url(../img/bg_head.png) bottom left repeat-x; clear: both;margin: 0 0 0; padding:2em 0 1em 0;} #head h1,#head h2 {margin:0 0 0.8em; height: 46px; width: 379px;padding: 0;} #head h1 a,#head h2 a {background: url(../img/photography_northern_ireland.png); display:block; height: 46px; text-indent: -2000px; width: 379px; } #head #nav {margin:0 0 0;float: right;} #head #nav li {float:left;position:relative;} #head #nav a {border-right:1px #ccc solid;padding:7px 10px;font-size:1.2em;display:block;float:left;font-weight: bold;border-bottom:none;} #head #nav li:last-child a {border: none;padding-right: 0;} #head .current {color:#FF0066;font-style:;} #head #tools {margin:0 0 0 0;font-size:1em;border-bottom:;position:absolute;top:0.4em;right:0;padding: 0.5em 0;} #head #tools li {background:#f1f1f1;border: 1px solid #ebebeb;float:left;position:relative;margin:0 0 0 12px;-moz-border-radius: 5px;-webkit-border-radius: 5px;} #head #tools, #tools p {} #head #miniBasket {margin:0 0 0 0;padding:5px 8px 5px 4px;} #head #miniBasket a {background: url(../img/ico_basket.png) left center no-repeat ;margin:0 4px 0 0;font-weight:bold;padding:0 0 0 25px;} #head #userMenu {background:;padding:5px 8px 5px 4px;} #head #userMenu span {margin:0 6px;color:#ccc;} #head #userMenu .login {background: url(../img/ico_login.png) left center no-repeat;padding:0 0 0 18px} #head #eventKey {padding:5px 8px 5px 4px;} #head #eventKey a {background: url(../img/ico_passcode.png) left center no-repeat;padding:0 0 0 18px} #head p {padding: 0.6em 0;} /* footer */ #foot {margin:2.8em 0 0 0;padding:2.4em 0 1.4em 0;background:#222 url(../img/bg_homeintro_wrap.png) repeat ;clear: both;} #foot h2 {color:#e1e1e1;margin-bottom: 1.6em;} #foot h3 {color:#e1e1e1;text-shadow: none;font-weight: 600;} #foot p {color:#e1e1e1;font-size:1em;text-shadow: none;} #foot a {color:#f3f9ff;} #foot .footNav {width:200px;margin:0 20px 0 0;float:left;position: relative;} #foot .footNav ul {color:#e1e1e1;border-top:1px dotted #333;} #foot .footNav li {font-size:1em;border-bottom:1px dotted #333;padding:5px 2px;} #foot .vcard {color:#e1e1e1;float: left;margin:0 0 0 0; position: relative;width:240px;} #foot .vcard span {clear:both;} #foot .copyright {float:left;position: relative;width: 260px;} #foot .copyright p {font-size: 1em;} /* Social share */ .facebook,.twitter,.linkedin,.email {padding:2px 0 3px 22px;} .facebook {background:url(../img/social_ico/facebook.png) left center no-repeat; } .twitter {background:url(../img/social_ico/twitter.png) left center no-repeat; } .linkedin {background:url(../img/social_ico/digg.png) left center no-repeat; } .digg {background: url(../img/social_ico/digg.png) left center no-repeat;} .stumble {background: url(../img/social_ico/stumble.png) left center no-repeat;} .email {background: url(../img/social_ico/email.png) left center no-repeat;} /* bottom */ #foot .legal {clear: left;margin-top:1.4em;padding: 2em 0;} #foot .legal li {float: left;position: relative;margin: 0 18px 0 0;} #foot .book {float:right;padding: 2em 0;} /* common layout */ .wrap {width:940px;margin:0 auto;position:relative;} .pageHead {background:#222 url(../img/bg_homeintro_wrap.png) center top;color:#f1f1f1; width: 100%;margin-bottom: 2em;} .pageHead .wrap {background: url(../img/bg_homeintro.png) center top;padding: 2em 0 2.4em;} .pageHead h1 {margin:0 0 0 0;text-shadow: #000 1px 1px 1px;font-weight:600;padding-top: 4px;} .pageHead h2 {font-size:2.3em;font-weight:600;line-height:150%;margin:0 0 0 0;text-shadow: #000 1px 1px 1px;} .pageHead fieldset a {color: #ccc;} .pageHead ul {margin: 8px 0 0 0;} .pageHead .bookNow {float: right;margin: 0 0 0 0;} .bookNow a,.bookNow-span a {background:url(../img/b_book.png);display:block;height: 46px;text-indent: -2000px; width: 200px;} #footnote {border-bottom:1px dotted #999;border-top:1px dotted #999;padding: 8px 10px;} #footnote p {font-size:1.2em;margin-bottom: 0;padding:12px 0 ;} #footnote .bookNow {float: right;padding:0 0 ;} .end {margin: 0 0 0 0;} /* Info columns & features */ .main {background:url(../img/bg_sidebar.png) top right repeat-y; float:left; padding: 0 30px 3em 0; width: 540px;} .sidebar {float: left; width: 340px;padding: 0 0 3em 30px ;} /* #5.0 FORMS ------------------------------------------------------------------*/ /* general form elements */ label {font-size: 1.1em;font-weight:bold;padding: 4px 0;margin: 0 0 0.2em 0;display: block;} input[type=text],input[type=password] {background: #fff; padding:4px 4px;font-size: 1em;background:;} textarea {font:1.1em "helvetica", arial; padding: 4px;} select {padding: 4px;} button {background:#FF0066 url(../img/bg_action.png) repeat-x;padding: 4px 7px;font-size:1.2em;color:#fff;-moz-border-radius: 5px;-webkit-border-radius: 5px;border:2px solid #e20057;border-right:2px solid #c1004a;border-bottom:2px solid #c1004a;text-transform: uppercase;font-weight: bold;cursor: pointer; } p button,label button {font-size: inherit;} p input {font-size: inherit;} form {margin: 0 0 2em 0;} form li {margin:0 0 1em;} form ol {margin: 0 0 0 0;} form ol button {margin:.0.5em 0 0 0;} form > button {margin:1em 0 0 0;} /* form for main content of page */ .pageForm {background: #f1f1f1;padding: 1em 20px 2em 20px;} .pageForm fieldset {border-bottom: 1px dotted #999;margin-bottom:1em;padding-bottom: 1em;} .pageForm legend {font-size:1.4em; font-weight: bold; margin: 0 0 0.6em;} .pageForm li {width: 100%;} .pageForm input[type=text] {width: 60%;background: #fff;} .pageForm textarea {width: 85%;} .pageForm input.txtSM {width:100px;} .pageForm input.txtM {width:220px;} .pageForm label span {color:#444;float: left; padding: 4px 0;width:25%;} .pageform fieldset ol li:last-child {margin:0 0 0 0;} .pageForm .floats label {float: left;margin-right: 5px;} .miniForm fieldset { } .miniForm legend {font-size:1.4em; font-weight: bold; margin: 0 0 0.6em;} .miniForm label {width: 100%;} .miniForm input[type=text] {width: 220px;} .miniForm textarea {width: 400px;} .miniForm input.txtSM {width:100px;} .miniForm span {color:#444;float: left; padding: 4px;width:100px;} /* #6.0 HOME ------------------------------------------------------------------*/ #home #head {background: ;margin: 0 0 0 0;} #homeIntro {background:#222 url(../img/bg_homeintro_wrap.png) repeat ;margin:0 0 0;border-bottom:2px solid #d0d0d0;border-top:3px solid #d0d0d0;} #homeIntro .wrap {background: url(../img/bg_homeintro.png) top center no-repeat ;padding:3.6em 10px 5.4em 10px;} #homeIntro h2 {color:#fcfcfc;font-size:280%;line-height:142%; margin:0 0 0.3em 0;width: ;text-align: center;text-transform: none;text-shadow: none;font-weight:600;} .location {background:url(../img/bg_homep1.png) center center no-repeat;color:#e1e1e1;text-align:center;font:1.2em georgia;margin-bottom:3.4em;font-style:italic;padding:9px 4px;text-shadow:none;} #homeIntro h3 {color:#fcfcfc;margin-bottom: 1em;text-shadow: none;font-weight:600;} #homeIntro .service {position: relative;} #homeIntro .service div {background:;width:300px;margin-right:20px;float: left;} #homeIntro .service div p {font:1.3em georgia;line-height:160%;color:#f1f1f1;margin-bottom: 0.2em;text-shadow: none;} #homeIntro .service div p a {color:#FF0066;font:1em georgia,times,serif;border-bottom: 1px dotted #FF0066; margin-bottom: 0;} #homeIntro .service div:last-child {margin:-70px 0 0 0;position: relative;} .slide {width:460px;margin: 1.4em 0 0 0;text-align: right;} #homePreview .myPhotos {right:0;position: absolute;padding:16px 10px;} .whatwedo li {background:url(../img/bp_home-intro.png) left center no-repeat; color: ; font-size: 1.3em; font-weight:bold; margin: 0 0 0.8em 0; padding: 0 0 0 5px;text-shadow: #fff 1px 1px 1px ;} .whatwedo {margin: 0 0 1.8em;} #midbar .wrap {border-bottom:1px solid #ccc;margin-bottom:2.4em;padding: 12px 10px;} #midbar p {font-size:1.2em;float:left;padding: 16px 0 0 0;margin: 0 0 0 0;} #midbar ul {float:left;margin:0 0 0 10px;padding:16px 0 0 0;} #midbar li {float: left;font-size:1.1em;margin:0 10px 0 0;} #midbar .bookNow {float: right;} #homeLibrary {background:rgba(255,255,255,0);margin:0 0 0 -10px;float: left;width: 620px;padding:12px 10px 0 10px;position: relative;border-right: 1px solid #ccc;} #homeLibrary div {float: left;margin-right:20px;width: 280px;padding-right: 20px;border-right: 1px dotted #ccc;} #homeLibrary div:last-child {margin-right:0px;padding-right: 0px;border-right:none;margin-top: 1em;} #homeLibrary img {margin:0 0 0.5em 0;} #homeLibrary > p {float: right;margin-bottom: 0;} #homeLibrary > p > a {background: url(../img/bg_b_homelib.png) center center no-repeat;display:block;padding: 6px 18px;} #homeLibrary ul {margin-bottom: 0.8em} #homeLibrary li { padding:6px 10px 6px 10px;background: rgba(255,255,255,0.5);margin-bottom: 4px;} #homeLibrary li a {font-size:1.2em;font-weight: bold;} #homeLibrary li a strong {color:#888;display:block;font-size:80%;font-weight: normal;} #homeLibrary .search {background: #f1f1f1; display:block;margin-top:10px;padding: 8px 10px;-moz-border-radius: 5px;-webkit-border-radius: 5px;} #homeContact {width:270px;float: left;padding: 12px 10px 12px 29px;} #homeContact ul {font-size: 1.1em;} #homeContact li {font-weight: ;list-style: disc;text-shadow: 1px 1px 1px #fff;margin-bottom: 0.6em;} #homeContact dd {margin-bottom: 1em;} /* #7.0 PHOTOGRAPHY SERVICES ------------------------------------------------------------------*/ #serviceMenu {padding-top:1em;position: relative;width:179px;z-index: 10;} #serviceMenu > ul > li {font-size:1.2em;font-weight:bold;margin-bottom: 0.4em;} #serviceMenu > ul > li > a {display: block; padding: 10px 8px;width: 184px;} #serviceMenu .current a {background:url(../img/service_menubg.png) no-repeat right center;color: #fff;} #serviceMenu .book {padding: 10px 8px;} #serviceMenu .book {color: #444;} #serviceMenu .book li {font-size: 1.1em;margin-bottom: 0.4em;} #services {border-left:1px solid #ccc;float: right;padding:1em 0 1em 60px;width:700px;} #services .intro,#services .port,#services .columns div {float: left;margin-bottom: 2em;} #services .intro {width:460px;margin-right: 20px;} #services .intro p {font: 1.3em georgia,times,serif;line-height: 160%;} #services .intro ul {margin-bottom: 0;} #services .intro li {margin-bottom: 0.8em;font-size: 1.1em;list-style: disc;width:50%;float: left;font-weight: bold;} #services .port {width:220px;} #services .columns {width:100%;clear: left;} #services .columns div {background:rgba(255,255,255,0.6);width:200px;margin-right: 20px;padding: 8px 10px; } #services .columns h3 {margin-bottom: 1em;} #services .columns h4 {text-transform: uppercase;} #services .columns .clients {margin-right:0;width:440px;} #services .columns div img {margin-bottom: 0.3em;} #services .columns div:last-child {margin-right: 0; } /* #8.0 PORTFOLIO ------------------------------------------------------------------*/ /* portfolio categories */ #categories li {background:#fafafa url(../img/bg_portfolio-li.png) bottom left repeat-x; float: left; margin: 0 20px 1.6em 0; padding: 10px; text-align: center; width:200px;} #categories li p, #categories .end {margin: 0 0 0 0;} #categories span {font:bold 1.2em helvetica,arial;margin: 0 0 0.2em 0;text-transform: uppercase;} #categories img {height: 133px; margin: 0 0 0.2em; width: 200px;} #categories h2 {font-size: 1.2em;text-align: left;margin-top:0.5em;} /* 8.2 portfolio */ #portGallery li {float:left;width:300px;margin:0 20px 20px 0;text-align: center;} #portGallery .end {margin:0 0 20px 0;} /* #9.0 LIBRARY ------------------------------------------------------------------*/ /* see library.css */ /* #10.0 CONTACT ------------------------------------------------------------------*/ /* 10.1 hcard */ #vcard {margin: 0 0 1.4em;} .adr {margin: 0 0 1.2em 0;} /* NB. see 5.2 FORMS for general page form */ /* #11.0 ABOUT ------------------------------------------------------------------*/ #about {border-right:1px solid #ccc;float: left;margin-right:30px;padding:1em 19px 1em 0;width:600px;} #about p:first-child {font: 1.3em georgia,times,serif;line-height: 160%;} #about #columns div {float:left;background:rgba(255,255,255,0.4);width:166px;margin:0 20px 2em 0;padding: 8px 10px;} #about #columns div:last-child {margin-right: 0;} #about #columns h2 {margin: 1em 0;} #aboutSide {width: 280px;float: left;padding: 1em 0;} #aboutSide img {margin-bottom: 1.2em;} /* #12.0 PHOTOGRAPHERS ------------------------------------------------------------------*/ #photographers {float:left;width:700px ;margin-right: 40px;} #photographers li {float: left;width:220px ;margin: 0 20px 1.8em 0;padding-top: 1em;border-top: 5px #ccc solid;} #photographers ul li:nth-child(3n) {margin: 0 0 1em 0;} #photographers span {display: block;font: 50% "helvetica",arial,sans-serif;} #photoside {width: 200px;float: left;} /* #13.0 BOOK A PHOTOGRAPHER ------------------------------------------------------------------*/ /* NB. see 5.2 FORMS for general page form */ /* Old */