/* Te Puna Reo sytles Updated: 20.04.08 @ 8:50 a.m. Author: Michael Holmes (catchgraphics@gmail.com) ----------------------------------------------------*/ /* COLORS Body Background: #fff Main Text: #923e30 Links: To be specified Links (Hover): To be specified Headline H1: #923e30 Content background #b8e8f1 Footer text #b8e8f1 ----------------------------------------------------*/ /* ORDER OF ATTRIBUTES 1. Positioning (with coordinates) styles 2. Float/Clear styles 3. Display/Visibility styles 4. Spacing (margin, padding, border) styles 5. Dimensions (width, height) styles 6. Typography-related (line-height, color, etc.) styles 7. Miscellaneous (list-style, cursors, etc.) styles Order of link attributes: a link, a:visited, a:hover, a:active ----------------------------------------------------*/ /* =INDEX for CSS (can use prefix = to find section eg =Header ) -------------------------------------------------------------- GLOBAL-RESET GENERIC TYPOGRAPHY WRAPPER CONTAINER HEADER MENU1 CONTENT-MAIN SIDEBAR FORMS TABLES FOOTER */ /* =GLOBAL-RESET ----------------------------------------------------*/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;} blockquote:before,blockquote:after,q:before,q:after{content:"";} blockquote,q{quotes:"" "";} ol,ul{list-style:none;} table{border-collapse:collapse;border-spacing:0;} caption,th,td{text-align:left;font-weight:400;} abbr,acronym{border:0;} /* =GENERIC ---------------------------------------------------- */ /***** HTML elements styles *****/ html{} body{font:62.5%/1.7 Verdana, Arial, Helvetica, sans-serif; background:url(../images/easyGrassBg.gif) repeat-x top left; background-color:#409226;color:#333;} p, ul, ol, li, td{font-family:Verdana, Arial, Helvetica, sans-serif;} address,caption,cite,code,dfn,/*em,strong,*/th,var{font-style:normal;font-weight:400;} hr{margin:20px 0 20px; clear:both;} strong{font-weight:bold;font-family:Verdana, Arial, Helvetica, sans-serif;} em{font-style:italic; font-family:Verdana, Arial, Helvetica, sans-serif;} /***** Hidden Text elemtents *****/ #HEADER h1 {text-indent:-9999px;} /***** General styles *****/ .clear{clear:both;} span.clear,p.clear{display:block;overflow:hidden;height:0;margin:0;padding:0;} .alignTextRight{text-align:right;} .alignTextCenter{text-align:center;} /*.aligntextJustify{text-align:justify;}*/ .bold{font-weight:bold;} .italic{font-style:italic;} .underline{border-bottom:1px solid;} .highlight{/*background:#25702a;color:#fff;* To Specify*/} .noPadding{padding:0;} .noMargin{margin:0;} .noIndent{margin-left:0;padding-left:0;} .noBullet{list-style:none;list-style-image:none;} .noBorder{border-top:none;border-right:none;border-bottom:none;border-left:none;} .separatorLine{line-height:1px!important;clear:both;display:block;border-bottom:1px solid #923e30;padding-top:15px!important;margin:0 0 25px!important;} .hide{position:absolute;left:-9999px;} .hideText{text-indent:-9999px;} .sweeper{width:100%;clear:both;line-height:1%;margin:0;padding:0;} .imgLeft{float:left; margin:0 1em .4em 0; position:relative; top:.4em;} .imgRight{float:right; margin:0 0 .4em 1em; position:relative; top:.4em;} .required/*, .date*/{color:#009ee0;} .date{padding-bottom:0;} .superscript{position:relative; top:-0.8em; font-size:.5em;} .caption{font-size:1em; position:relative; top:-.7em;} .spacer{padding-bottom:20px!important;} /* =TYPOGRAPHY ----------------------------------------------------*/ h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:bold;color:#005fa9; padding:0 0 10px 0; font-family:Verdana, Arial, Helvetica, sans-serif;} #SIDEBAR h1 {padding:0 0 10px 0;} h1 {font-size:2em; line-height:1.8em;margin:0 0 10px 0;} h2 {font-size:1.2em; padding:0 0 10px; margin-top:15px;} h3 {font-size:1.2em; padding:0 0 10px; margin-top:15px;} a{text-decoration:underline;color:#409226; font-family:Verdana, Arial, Helvetica, sans-serif;} a:hover{/*text-decoration:underline;*/} #CONTENT-WRAPPER a {font-weight:bold;} #CONTENT-MAIN p,#SIDEBAR p, #CONTENT-MAIN ul, #CONTENT-MAIN ol {font-size:1.25em;line-height:1.7em;padding:0 0 10px;} #CONTENT-MAIN ul li {background:url(../images/tepunareoBullet.gif) no-repeat left .7em; padding:0 0 0 30px; list-style:none;} li a{} a:focus,a:active,input:focus{outline:0;} strong{font-weight:bold;} #CONTENT-MAIN p.expressionLink {padding:50px 0 0 80px;} p.expressionLink a {color:#ae9d20; text-transform:uppercase; font-weight:bold;} p.expressionLink a:hover {border-bottom:2px solid #ae9d20!important;} span.contactDetails {position:absolute; left:250px;} #CONTENT-WRAPPER span.contactDetails a {font-weight:normal;} /* =WRAPPER ----------------------------------------------------*/ #WRAPPER{ margin:10px auto 50px;width:750px; position:relative; border:solid 1px #fff; } /* =HEADER ----------------------------------------------------*/ #HEADER{position:relative; width:750px; height:130px; background:#fff;} #HEADER h1{background:url(../images/easygrasslogo.gif) no-repeat left top; width:261px; height:75px; position:absolute; top:28px; left:30px;} #HEADER h1 a {display:block; width:261px; height:75px; text-indent:-9999px;} #HEADER h1 span {position:absolute; left:-9999px;} #HEADER p {position:absolute; top:48px; right:50px; background:url(../images/easygrassbyline.gif) no-repeat top left; width:246px; height:36px; text-indent:-9999px;} /* =MENU-1 ----------------------------------------------------*/ #menu{list-style:none; width:750px; height:30px;background:#409226;} #menu li{float:left;position:relative;text-align:center;} #menu a{display:block;color:#fff;height:20px; padding:5px 16px;text-decoration:none;font-weight:700;font-size:12px; border-right:2px solid #005fa9;float:left;} #menu a.home{margin-left:30px;} /* ACTIVE STATES */ #home #menu a.home, #easygrassgallery #menu a.gallery, #contact #menu a.contact {background:#005fa9;} /* HOVER STATES */ #menu a.home:hover, #menu a.gallery:hover, #menu a.contact:hover {background:#3b8623;} /* =CONTENTWRAPPER ----------------------------------------------------*/ #CONTENT-WRAPPER {width:750px;background:url(../images/easygrasscontentbg.gif) repeat-y top right #fff;overflow:hidden;clear:both; padding-top:40px;} #easygrassgallery #CONTENT-WRAPPER {background:none #fff;} /* =CONTENT-MAIN ----------------------------------------------------*/ #CONTENT-MAIN{ float:left;width:454px;position:relative;padding-left:30px; padding-bottom:30px;} #home #CONTENT-MAIN h1.intro {background:url(../images/easygrasshomeH1.gif) no-repeat top left; width:454px; height:52px; text-indent:-9999px;} #easygrassgallery #CONTENT-MAIN{ width:690px;padding-left:79px; } #CONTENT-MAIN ul li {background:url(../images/bullet-drop.gif) no-repeat scroll 0pt 4px; padding:0pt 8px 12px 28px;} /* =SIDEBAR ----------------------------------------------------*/ #SIDEBAR {position: relative; width:176px; float:right; padding:0 29px;} #SIDEBAR img {width:174px; border:1px solid #fff;} .emphasis {font-size:1.4em;} /* =GALLERY ----------------------------------------------------*/ #SIDEBAR #gallery p, #CONTENT-MAIN #gallery p {padding-bottom:0;line-height:12px; clear:both;} #CONTENT-MAIN #gallery p {padding-bottom:30px;height:131px;} #gallery a {display:block; background:#fff; width:176px; float:left;} #CONTENT-MAIN #gallery a {margin-right:30px;} #CONTENT-MAIN #gallery a img {border:solid 3px #eee;} #gallery a:hover {border:solid 3px #409226;border-bottom:solid 2px #409226; background:#409226;} #CONTENT-MAIN #gallery a:hover {width:180px;} /* =FORMS ----------------------------------------------------*/ /* =TABLES ----------------------------------------------------*/ /* =FOOTER ----------------------------------------------------*/ #FOOTER{position:relative; width:750px; height:60px;clear:both; background:#409226; margin:0 auto; padding-top:18px;} #FOOTER p{color:#fff;text-align:center;font-size:1.2em;} #FOOTER a {color:#fff;} #FOOTER p#catch {position:absolute; top:90px; right:30px; font-size:1em;color:#006600;} #FOOTER p#catch a {text-decoration:none; color:#006600;} #FOOTER p#catch a:hover {text-decoration:none; color:#fff;}