@charset "UTF-8"; /* CSS Document */ .hide { display: none; } body { color: #FFFFFF; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 815px; } /*General HTML tags. Usually you style these tags within thier respective ID selectors but these are available if needed.*/ h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: 2e371c; margin-left: 50px; margin-top: 30px; } h2 { } h3 { } h4 { } p { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; margin-left: 50px; line-height: 1.5; } a:link { color: #ffffff; text-decoration: none; } a:visited { color: #FFFFFF; text-decoration: none; } a:hover { color: #2e371c; } a:active { color: #2e371c; text-decoration: none; } acronym { } /* Container */ /*The Container is the div that appears just above the body. This defines the space that all the content of the page is in */ #container { width: 815px; height: 580px; margin-left: auto; margin-right: auto; } /* Header */ /*Defines the header area of the pages. A great place to use image replacement to create a fancy graphic header */ #header { } #header h1 { } /* HINT the following rule is useful for image replacement, see the http://www.mezzoblue.com/tests/revised-image-replacement/ for image replacement techniques */ #header h1 span { } /*---------------------Navigation-------------------------------------------*/ /*This defines the space for the main navigation of the site. It is using the unordered List

based style of navigation. There are additional classes to allow you to create a "current page effect” for your navigation buttons.*/ /*HINT The Navigation is a Library object. It's markup is called mainnav.lbi document located in the library panel */ #navigation { width: 345px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; float: left; padding-top: 10px; padding-left: 42px; color: #336633; text-decoration: none; border-bottom: 1px solid #2e371c; } #navigation ul { margin: 0; padding: 0; list-style: none; } #navigation ul li { display: inline; position: relative; padding-left: 8px; } #navigation ul li ul { display: none; padding-left: 12px; width: 140px; } #navigation ul li a { padding: 3px 10px 2px 10px; color: #2e371c; text-decoration: none; } #navigation ul li a:hover { color: #ffffff; text-decoration: none; } /*This is for the sub navigation rules*/ #projectnavigation { width: 160px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; float: left; padding-top: 5px; padding-left: 220px; color: #336633; text-decoration: none; } #projectnavigation ul li a:link { color: #2e371c; } #projectnavigation ul li a:visited { color: #2e371c; } #projectnavigation ul { margin: 0; padding: 0; list-style: none; } #projectnavigation ul li a:hover { color: #ffffff; text-decoration: none; } #contact #navigation { width: 760px; } /*You are here effect. This is based on a techniques described on this site: http://www.hicksdesign.co.uk/else/cssnav/index.html Each section uses an ID in the tag to identify the section. Combine that with the IDs used in the mainnav.htm and subnav.htm to set the curent page state in the main and sub navigation. Combine the selectors separated by commas to apply the same effect to all current page links. The rule below is turning the "home" navigation link red on the index.shtml page*/ body#home #mainnav li#homeNav a { } /*rules for boxes*/ #projectlogoname { height: 100px; float: left; clear: both; margin-top: 35px; width: 385px; } #toptree { width: 322px; height: 483px; } #topleftbox { background-color: #4f7033; width: 93px; height: 580px; float: left; background-image: url(../assets/flower.jpg); background-repeat: no-repeat; background-position: 20px 118px; } #larimer #topleftbox { background-image: url(../assets/smallgreenflower.jpg); } #larimer #middlegreenbox { background-color: #A2BBC2; width: 385px; height: 580px; float: left; } #larimer #rightdarkgreenbox { background-color: #637D95; height: 580px; } #fireclay #topleftbox { background-image: url(../assets/smallgreenflower.jpg); } #fireclay #middlegreenbox { background-color: #AA8634; width: 385px; height: 580px; float: left; } #fireclay #rightdarkgreenbox { background-color: #550000; height: 580px; } #stoneridge #topleftbox { background-image: url(../assets/smallgreenflower.jpg); } #stoneridge #middlegreenbox { background-color: #C6C184; width: 385px; height: 580px; float: left; } #trio #rightdarkgreenbox { background-color: #000000; height: 580px; } #trio #topleftbox { background-image: url(../assets/smallgreenflower.jpg); } #trio #middlegreenbox { background-color: #A0A0A4; width: 385px; height: 580px; float: left; } #stoneridge #rightdarkgreenbox { background-color: #9A7200; height: 580px; } #middlegreenbox { background-color: #95a97e; width: 385px; height: 580px; float: left; } #contact #middlegreenbox { width: 800px; } #logoname { height: 100px; float: left; clear: both; width: 385px; margin-top: 86px; margin-bottom: 100px; } #smalllogoname { height: 100px; clear: both; width: 385px; margin-top: 20px; } #contact #logoname { height: 100px; float: left; width: 385px; margin-top: 96px; margin-bottom: 20px; } #home #logoname { height: 100px; float: left; clear: both; width: 385px; margin-top: 96px; margin-bottom: 40px; } #text { padding-top: 80px; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; } #services #logoname { margin-bottom: 20px; margin-top: 96px; } #services #text { line-height: 2; } #home #text.p { padding-top: 0px; float: left; clear: both; text-align: center; font-size: 14px; width: 365px; line-height: 2; margin: 0; } #contact #text { padding-top: 200px; } #projects #text { padding-top: 210px; line-height: 2; } #rightdarkgreenbox { background-color: #2e371c; width: 322px; height: 580px; float: left; } #toppicture { height: 210px; } #midpicture { height: 160px; clear: both; } #bottompicture { height: 210px; } #mrusbottompicture { height: 110px; padding-top: 100px; background-color: transparent; color: white; } #stoneridge #mrusbottompicture { height: 20px; padding-top: 20px; } #larimer #mrusbottompicture { height: 56px; } .centerimg { margin-top: 45px; margin-left: 86px; } .leftimg { float: left; } #rooftop { width: 322px; } #address { margin-top: 250px; margin-right: 0px; margin-bottom: 150px; padding: 0px; } #email { margin-top: 40px; font-size: 130%; height: 72px; margin-bottom: 150px; } #contact #logoname { margin-bottom: 0; } .style1 { font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; margin-top: 30px; } /*------------------------------Main Content------------------------------------*/ /* These are the rules that define the space that the actual content resides in.*/ #maincontent { } #maincontent h2 { } #maincontent h2 { } #maincontent h3 { } #maincontent h4 { } #maincontent p { } /*and so on... create a rule for any html tag you see inside the maincontent div */ /*Content link styles.*/ #maincontent a:link { } #maincontent a:visited { } #maincontent a:hover { } #maincontent a:active { } /*---------------------------Footer Styles---------------------------------------*/ /* Clear:both here if you want the footer to be at the bottom of the page...) */ /* The footer is a Library object. It's markup is contained in the footer libray.lbi document located in the library panel */ .clearthis { clear: both; height:0; line-height:0; } #footer { height: 20px; width: 800px; } #footer p { } #services #toptree { background-image: url(../assets/denvertree.jpg); }