/*------------------------------------------------------------ Eyecatcher Arts Main Style Sheet version: 2.0 client: eyecatcher arts email: karen@eyecatcherarts.com.au website: http://eyecatcherarts.com.au author: stephen grabner email: info@pronkingantelope.net website: http://pronkingantelope.net ------------------------------------------------------------*/ body {/* background: #7d7d7d url(../images/bg/bg_body.jpg) repeat-x; */} /* BASIC STRUCTURAL LAYOUT ----------------------------------*/ #wrapper { position: relative; font-family: "Helvetica Neue", Helvetica, Tahoma, Geneva, Arial, sans-serif; font-size: 10pt; color: #454545; width: 800px; margin: 0px auto; } /* Wrapper background images */ #home #wrapper {background: white url(../images/bg/bg_Bu.jpg) no-repeat;} #prop #wrapper {background: white url(../images/bg/bg_Pu.jpg) no-repeat;} #sign #wrapper {background: white url(../images/bg/bg_Pu.jpg) no-repeat;} #table #wrapper {background: white url(../images/bg/bg_Pu.jpg) no-repeat;} #av #wrapper {background: white url(../images/bg/bg_Bl.jpg) no-repeat;} #hire #wrapper {background: white url(../images/bg/bg_Gr.jpg) no-repeat;} #glass #wrapper {background: white url(../images/bg/bg_Gr.jpg) no-repeat;} #flowers #wrapper {background: white url(../images/bg/bg_flowers.jpg) no-repeat;} #contact #wrapper {background: white url(../images/bg/bg_Aq.jpg) no-repeat;} #cv #wrapper {background: white url(../images/bg/bg_Aq.jpg) no-repeat;} #links #wrapper {background: white url(../images/bg/bg_Aq.jpg) no-repeat;} #copyright #wrapper {background: white url(../images/bg/bg_Aq.jpg) no-repeat;} /* Header styling ------------------*/ #header { position: relative; height: 390px; } /* Neg indent hiding text heading (Image replacement) unless styles off/images on */ #header p, #header h1 { text-indent: -5000px; } /* Header logo positioning */ #header a { display: block; position: absolute; top: 44px; left: 40px; width: 160px; height: 160px; background: url(../images/bg/logo_btn.png) top left no-repeat; } #header a:hover { background: url(../images/bg/logo_btn.png ) top right no-repeat; } #search { position: absolute; top: 10px; right: 40px; } /* LINKS styles in Left & Right columns on info pages */ #leftcol a {font-weight: bold; color: blue;} #leftcol a:hover {border-bottom:1px dotted blue;} #hire.info .hiredetails a:hover, #flowers #leftcol a:hover {border: none;} /* CONTENT BLOCK -------------------- */ #home #content {min-height: 300px; position: relative; /* top:3em; */ margin: 0 50px; clear: both;} .info #content, .info2Col { position: relative; top: -70px; margin: 0 10px 0 50px; /* width: 740px; */ min-height: 300px; position: relative; clear: both; } /* FOOTER LAYOUT STYLES --------------------------------------------------- */ #footer { clear: both; margin: 30px 0px 0 0px; border-top: thin #ccc solid; padding: 10px 0px; text-align: center; } /* TITLE COLUMN STYLES --------------------------------------------------- */ #titleblock {margin: 0 0px 100px 0px;} #contact #titleblock, #links #titleblock, #cv #titleblock {margin-bottom: 50px; margin-left: 180px;} /* tagline under title */ #titleblock p {font-size: 1.3em; line-height: 120%; font-weight: normal; text-align: left;} #titleblock img {float: left; margin: 0px 20px 20px 0;} /* LEFT COLUMN STYLES --------------------------------------------------- */ /* Left column layout ---------- */ #leftcol {float: left;} #home #leftcol {width: 390px; margin-left: 50px; margin-right: 40px; text-align: justify;} #flowers #leftcol {margin-left: 150px;} .info #leftcol {margin: 0px 20px 50px 0px; width: 400px; float: left;} div.eg {border-top: silver solid 1px; padding: 10px 10px 10px 10px; } #leftcol .eg p{ margin-left: 120px;} #leftcol .eg img {float: left; margin-top: -6px;} .eg h2 {font: bold italic 1.2em Georgia; color: gray; padding: 3px 0 15px 0px; margin: 0 0 0 -10px; } /* Copyright info page layout styles ------- */ #copyright.info #leftcol {width: 305px; margin: 0 20px 0 50px; overflow: hidden;} #copyright.info #rightcol {width: 305px; margin: 0 0 0 20px;} /* Hire info page layout styles ------------ */ #hire.info #leftcol {width: 650px; margin: 0 20px 0 0px; overflow: hidden;} #hire.info #rightcol {/* width: 305px; margin: 0 0 0 20px; */ display: none;} #hire.info table.hiredetails {width: 590px; margin: 0px 0 70px 0px; font-size: 0.9em;} #hire.info .hiredetails caption {text-align: left; font-size: 1.6em; color: #555; padding: 0; margin-top: 0; margin-bottom: 30px;} #hire.info .hiredetails .description {text-align: left;} #hire.info .hiredetails tr { border-bottom: 1px #bfbfbf solid;} #hire.info .hiredetails img {margin-top: 2px; margin-left: 5px;} /* Contact page layout styles ---------------*/ #contact #leftcol {width: 350px; margin-left: 180px; padding: 20px; background:url(../images/bg/box_bg.jpg) no-repeat; border: 1px solid #deebf4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius:4px;} /* Links page layout styles ----------------*/ #links #leftcol {width: 400px; margin-left: 180px; padding: 20px; background:url(../images/bg/box_bg.jpg) no-repeat; border: 1px solid #deebf4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius:4px;} /* CV page layout styles -------------------*/ #cv #leftcol {width: 400px; margin-left: 180px; padding: 20px; background:url(../images/bg/box_bg.jpg) no-repeat; border: 1px solid #deebf4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius:4px;} /* Flower page styles -----------------------*/ .flowerimages img {margin-right: 20px; margin-top: 15px; border: 1px solid #bfbfbf;} /* Indent style -----------------------------*/ /* Used when less text in leftcol for left justification */ .indent {margin-left: 110px;} /* General purpose element styles ---------- */ /* title of page */ h1 { font: bold 2em Georgia, "Time New Roman", serif; color: #555; margin-bottom: 5px; } h2 { font-weight: normal; font-size: 1.4em; color: #555; padding-top: 0.8em; margin-top: 1em; margin-bottom: 1em; } h2.first {margin-top: 0px; padding-top: 0; border: none;} h3 {font-size: 1.2em; margin-bottom: 1em;} h4 {font-size: 1.1em;} h5 {font-size: 1em;} h6 {font-size: 1em;} p {margin: 0 0 1.3em 0; line-height: 1.2em; opacity: 1; } li {line-height: 1.2em;} /* RIGHT COLUMN STYLES ---------------------------------------------------- */ /* Right column layout style ----------*/ #rightcol { float: left; } #home #rightcol { width: 200px; margin: 1.4em 0 0 0; text-align: justify; } .info #rightcol {padding-left: 7px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; margin-left: 50px; margin-top:0em; border: solid 1px #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius:4px; background-color:#fafafa;} .info #rightcol img {margin: 0 0 7px 7px;} #rightcol div {position: relative; text-align: center;} .info #rightcol h3 {text-align:center; color: #984e18;} /* EQUAL COLUMN STYLES --------------------------------------------------------- */ /* Note: left column equal is for 2 equal columns, each of 355px width and 15px of padding on the appropriate side. The columns are given a class of "equal" to allow them to be selected with their id of "leftcol" and "rightcol". ---------------------------------------------------------------------------------*/ #home .leftcolequal {float: left; width: 335px; padding: 0; margin-right: 15px; line-height: 2em; min-height: 100px;} #home .rightcolequal {float: right; width: 335px; margin-left: 15px; padding: 0px; line-height: 2em; min-height: 150px;} /* typographic styles for the equal columns */ #home .leftcolequal h2, #home .rightcolequal h2 {margin-left: 110px; margin-top: 10px; margin-bottom: 10px; padding-top: 0px;} #home .leftcolequal p, #home .rightcolequal p {margin-left: 110px; font-size: 1em;} /* image styles for equal columns */ #home .leftcolequal img, #home .rightcolequal img {float: left; margin-top: 5px; margin-left: -5px;} /* INFOBOXES styling */ /* infoBoxes are equal width boxes on info pages contained within leftCol. They display small snippets of info that go well in a side-by-sid3 box format. Used only in Props so far, for the client and Services sections. (These sections are lists, so a side-by-side format fills the space well) */ /* They utilise a light gradient background */ /* TODO: make the edges rounded (webkit/moz/css3 or normal techniques) */ .infoBoxes {margin-top: 30px;} /* common styles */ .infoBoxes .infoBoxesL, .infoBoxes .infoBoxesR {width:180px; padding-top:0.5em; padding-left:10px; float:left; background:url(../images/bg/box_bg.jpg) no-repeat; border: 1px solid #deebf4 /* #dbe8f1 *//* #d0dce4 *//* #ebf4fb */; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius:4px;} /* individual styling, for different L/R margins */ .infoBoxes .infoBoxesL {margin-right:10px; min-height: 20em;} .infoBoxes .infoBoxesR {margin-left:0px; min-height: 20em;} /* h3 styling for infoboxes heading */ .infoBoxes h3 {margin-top: -0.5em; margin-left:-10px; padding:5px 10px; text-align:center; border-bottom:solid 1px #deebf4;} /* list styling in infoboxes */ .infoBoxes li {margin-bottom: 0.6em;} /* HOME page button styles and function */ div.propsLink a.btn {width:90px; height: 90px; float: left; margin-top: 10px; display: block; background: url(../images/id/props_btn.jpg) top left no-repeat;} div.propsLink a.btn:hover {background: url(../images/id/props_btn.jpg) top right no-repeat;} div.tableLink a.btn {width:90px; height: 90px; float: left; margin-top: 10px; display: block; background: url(../images/id/table_btn.jpg) top left no-repeat;} div.tableLink a.btn:hover {width:90px; height: 90px; float: left; display: block; background: url(../images/id/table_btn.jpg) top right no-repeat;} div.signsLink a.btn {width:90px; height: 90px; float: left; margin-top: 10px; display: block; background: url(../images/id/signs_btn.jpg) top left no-repeat;} div.signsLink a.btn:hover {width:90px; height: 90px; display: block; background: url(../images/id/signs_btn.jpg) top right no-repeat;} div.hireLink a.btn {width:90px; height: 90px; float: left; margin-top: 10px; display: block; background: url(../images/id/hire_btn.jpg) top left no-repeat;} div.hireLink a.btn:hover {width:90px; height: 90px; display: block; background: url(../images/id/hire_btn.jpg) top right no-repeat;} div.avLink a.btn {width:90px; height: 90px; float: left; margin-top: 10px; display: block; background: url(../images/id/av_btn.jpg) top left no-repeat;} div.avLink a.btn:hover {width:90px; height: 90px; display: block; background: url(../images/id/av_btn.jpg) top right no-repeat;} div.flowersLink a.btn {width:90px; height: 90px; float: left; margin-top: 10px; display: block; background: url(../images/id/flowers_btn.jpg) top left no-repeat;} div.flowersLink a.btn:hover {width:90px; height: 90px; display: block; background: url(../images/id/flowers_btn.jpg) top right no-repeat;} /* FOOTER TYPE STYLES -------------------------------------------------------- */ #footer p {font-size: 0.8em;} /* MENU BAR FUNCTION & STYLING ------------------------------------------------*/ /* works for all major browsers */ /* NAV1 - Functions & positioning */ #nav1 {position: absolute; top: 0; left: 0; width: 800px; z-index: 2;} #nav1 ul {float: left;} #nav1 ul li {float: left; text-transform: capitalize;} #nav1 li a {float: left; display: block; padding: 0 1em; line-height: 1.6em; color: white;} #nav1 li a:hover {color: black; line-height: 1.8em;} /* Styles for correct tab colour on relevant page */ #home #nav1 a {background: url(../images/tabs/Bu/tab-right.png) no-repeat bottom right;} #prop #nav1 a, #sign #nav1 a, #table #nav1 a {background: url(../images/tabs/Pu/tab-right.png) no-repeat bottom right;} #av #nav1 a {background: url(../images/tabs/Bl/tab-right.png) no-repeat bottom right;} #hire #nav1 a, #glass #nav1 a {background: url(../images/tabs/Gr/tab-right.png) no-repeat bottom right;} #flowers #nav1 a {background: url(../images/tabs/Wh/tab-right.png) no-repeat bottom right;} #contact #nav1 a, #links #nav1 a, #copyright #nav1 a, #cv #nav1 a {background: url(../images/tabs/Aq/tab-right.png) no-repeat bottom right;} /* styles for menu button accent on relevant page */ #home #nav1 .home a {background: url(../images/tabs/Bu/tab-right-accent.png) no-repeat bottom right; color: black;} #prop #nav1 .prop a, #sign #nav1 .sign a, #table #nav1 .table a {background: url(../images/tabs/Pu/tab-right-accent.png) no-repeat bottom right; color: black;} #av #nav1 .av a {background: url(../images/tabs/Bl/tab-right-accent.png) no-repeat bottom right; color: black;} #hire #nav1 .hire a, #glass #nav1 .hire a {background: url(../images/tabs/Gr/tab-right-accent.png) no-repeat bottom right; color: black;} #flowers #nav1 .flower a {background: url(../images/tabs/Wh/tab-right-accent.png) no-repeat bottom right; color: black;} #contact #nav1 .contact a, #links #nav1 .links a, #copyright #nav1 .copyright a, #cv #nav1 .cv a {background: url(../images/tabs/Aq/tab-right-accent.png) no-repeat bottom right; color: black;} /* Styles for menu button highlight function with colour for relevant page */ #home #nav1 a:hover {background: url(../images/tabs/Bu/tab-right-accent.png) no-repeat bottom right;} #prop #nav1 a:hover, #sign #nav1 a:hover, #table #nav1 a:hover {background: url(../images/tabs/Pu/tab-right-accent.png) no-repeat bottom right;} #av #nav1 a:hover {background: url(../images/tabs/Bl/tab-right-accent.png) no-repeat bottom right;} #hire #nav1 a:hover, #glass #nav1 a:hover {background: url(../images/tabs/Gr/tab-right-accent.png) no-repeat bottom right;} #flowers #nav1 a:hover {background: url(../images/tabs/Wh/tab-right-accent.png) no-repeat bottom right;} #contact #nav1 a:hover, #links #nav1 a:hover, #copyright #nav1 a:hover, #cv #nav1 a:hover {background: url(../images/tabs/Aq/tab-right-accent.png) no-repeat bottom right;} /* NAV2 - Services -----------------------------------------------------------*/ /* for home page nav2, and set defaults */ #nav2 {font-weight: bold; position: relative; top: -80px; text-shadow: white 0px 0px 5px;} /* for info pages nav2 - lift up due to tag image not being on info pages */ .info #nav2, .info2col #nav2 {top:-150px;} #nav2 ul {float: right;} #nav2 ul li {float: left; margin: 0 0px;} #nav2 li a {line-height: 1.2em; display: block; padding: 0.5em 0.6em 0.3em 0.6em; color: #444; border-left: dotted transparent 1px; border-bottom: dotted black 1px;} #nav2 li a:hover, #prop .prop a, #sign .sign a, #table .table a, #av .av a, #hire .hire a, #glass .glass a, #flower .flower a {color: black; text-shadow: white 0px 0px 2px;} /* This section for highlights - are coloured highlights appropriate for the services menu nav2? */ #prop .prop a, #nav2 .prop a:hover {border-bottom: solid #639 5px; padding-bottom: 0.2em; margin-bottom: -0.2em; text-shadow: white 0px 1px 3px;} #sign .sign a, #nav2 .sign a:hover {border-bottom: solid #639 5px; padding-bottom: 0.2em; margin-bottom: -0.2em;} #table .table a, #nav2 .table a:hover {border-bottom: solid #639 5px; padding-bottom: 0.2em; margin-bottom: -0.2em;} #av .av a, #nav2 .av a:hover {border-bottom: solid #06f 5px; padding-bottom: 0.2em; margin-bottom: -0.2em;} #hire .hire a, #nav2 .hire a:hover {border-bottom: solid #3c3 5px; padding-bottom: 0.2em; margin-bottom: -0.2em;} #glass .glass a, #nav2 .glass a:hover {border-bottom: solid #3c3 5px; padding-bottom: 0.2em; margin-bottom: -0.2em;} #flowers .flower a, #nav2 .flower a:hover {border-bottom: solid #999 5px; padding-bottom: 0.2em; margin-bottom: -0.2em;} /* Menu bar 'this page' stylings */ /* Mark for deletion - possible old code 090717 */ /* #contact .b2 a {background: url(../images/menu/button_2.png) no-repeat center;} #glass .b3 a {background: url(../images/menu/button_3.png) no-repeat center;} #av .b4 a {background: url(../images/menu/button_4.png) no-repeat center;} #table .b5 a {background: url(../images/menu/button_5.png) no-repeat center;} #signs .b6 a {background: url(../images/menu/button_6.png) no-repeat center;} #props .b7 a {background: url(../images/menu/button_7.png) no-repeat center;} #flowers .b8 a {background: url(../images/menu/button_8.png) no-repeat center;} */ /*----------------------------------------------------------------------*/ /* Image styling */ /* --------------*/ .images img {border: silver thin solid; padding: 10px; background: url(../images/boxes/imagebox.gif) no-repeat; background-position: center center;} /*----------------------------------------------------------------------*/ /* Miscellaneous styling */ /* --------------*/ .clear {clear: both; width: 100%; height: 1px;} /* email obsfucation - for email addresses without mailto: links */ span.email {color: inherit;} span.email span { display: none; } span.email:hover {color: #0e64c9 /* #1e90ff */;} /* UL styling for lists in content */ #rightcol ul, #leftcol ul {margin-bottom: 2em;}