/* Studio Sprout CSS */ /* body tag should contain rules for the base font family & size, colors and have margins and padding set to 0 */ body { font-size: 85%; text-align: left; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 0px; padding: 0px; color: #757474; background-color: #fff; background-image: url(/images/StudioSproutBG.jpg); background-repeat: repeat; } .hide { display: none; } a:link { } a:visited { } a:hover { } a:active { } /* positioning, size and style of the page contents */ #container { margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; background-color:#ffffff; border: 1px solid #000000; line-height: 130%; width: 1024px; color: #49382a; } /* Begin header rules */ #header { height: 144px; width: 1024px; background-image: url(/images/banner.jpg); background-repeat: no-repeat; background-position: left center; } #header h1 { padding: 0; margin: 0; } #topnav { width: 1024px; height: 30px; background-color: #fff; vertical-align: middle; } /* Controls basic font style and alignment */ ul#nav { list-style-type: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; background-color: #fff; text-align: center; vertical-align: middle; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 30px; } /* Controls width height and direction */ ul#nav li { width: 130px; float:left; height: 30px; margin: 0px; padding: 0px; } /* Hides the drop down */ ul#nav li ul { display: none; margin: 0px; } /* Styles the top nav rollover */ ul#nav li a { text-decoration: none; background-color: #fff; display: block; color: #757474; text-align: center; vertical-align: middle; margin: 0px; } ul#nav li a:hover { text-decoration: none; color: #757474; display: block; } /* Styles drop down rollover */ ul#nav li ul li a { color: #fff; display: block; background-color: #BFDF95; background-image: none; padding: 6px; text-align: left; border: none; margin: 0px; } ul#nav li ul li a:hover { display: block; text-decoration: none; background-image: none; color: #708E40; background-color: #fff; padding: 5px; margin: 0px; } /* Displays and positions drop down */ ul#nav li:hover ul { display: block; list-style-type: none; position: relative; left: 35px; margin-top: 10px; } #leftsidebar { background-image:url(/images/VECTORTREE.jpg); width: 130px; float: left; height: 292px; background-repeat: no-repeat; background-position: right top; margin-top: 85px; margin-right: 0px; margin-bottom: 20px; margin-left: 30px; } #leftsidebar ul{ list-style-type: none; } #leftsidebar li{ margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-size: small; font-weight: normal; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } #leftsidebar li a{ color: #757474; text-decoration: none; padding-top: 0px; padding-right: 0px; padding-left: 0px; font-weight:normal; padding-bottom: 0px; } #leftsidebar li ul li a{ color: #757474; padding-top: 0px; padding-right: 0px; padding-left: 0px; font-weight: normal; padding-bottom: 0px; text-decoration: none; } #leftsidebar li a:hover{ color: #95C94F; } /*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.*/ body#home a#homenav, body#print a#printnav, body#web a#webnav, body#art a#artnav, body#about a#aboutnav, body#contact a#contactnav, body#logos a#logonav, body#notecards a#printnav{ color: #95C94F; text-decoration: none; } #active a { } /* Begin main content area rules */ /*Controls the size positioning, size and style of the content area*/ #maincontent { line-height: 130%; background-color: #ffffff; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 25px; margin-right: 0px; margin-bottom: 0px; margin-left:150px; } #h1{ } #h2{ } #maincontent h1 { background-repeat: no-repeat; background-position: left center; height:40px; padding-top: 10px; padding-bottom: 10px; } #home #maincontent h1 { background-image: url(/images/homeH1img2.jpg); } #print #maincontent h1 { background-image: url(/images/H1print.jpg); } #web #maincontent h1 { background-image: url(/images/H1multimedia.jpg); } #art #maincontent h1 { background-image: url(/images/H1art.jpg); } #logos #maincontent h1 { background-image: url(/images/H1logos.jpg); } #about #maincontent h1{ background-image: url(/images/H1about.jpg); } #contact #maincontent h1 { background-image: url(/images/H1contact.jpg); } /*image replacement h1. Name each page with a body id then use the body id for each image hi*/ #home h1 span, #print h1 span, #web h1 span, #art h1 span, #about h1 span, #logos h1 span, #contact h1 span{ display: none; } #maincontent p { padding: 0px; color: #757474; margin-left: 35px; margin-right: 35px; line-height: 150%; font-size: small; } #maincontent ul li{ color: #757474; margin-left: 35px; font-size: small; line-height: 150%; } #maincontent ul li a:link { padding: 0px; color: #95C94F; margin-left: 0px; list-style-type: none; text-decoration: none; } #maincontent ul li a:hover { color: #708E40; } #maincontent ul li a:visited { color: #708E40; text-decoration: none; } #maincontent h2 { color: #4B3A68; font-size: 130%; font-weight:lighter; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 35px; } #maincontent h3 { color: #3A3A3A; font-size: 110%; margin-left: 35px; } #maincontent a:link { color: #95C94F; text-decoration:none; } #maincontent a:visited { color: #708E40; text-decoration:none } #maincontent a:hover { color: #708E40; text-decoration:none } #maincontent a:active { } #flashbox { height: 450px; width: 600px; margin-left: 0px; border: thin solid #49382A; } #flashbox2 { height: 400px; width: 550px; margin-left: 0px; border: thin solid #49382A; } /*class for smaller photos*/ .smallgallerytext{ height: 175px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #49382A; padding: 0px; margin-bottom: 25px; } /*class keeps image text aligned regardless of image size*/ .text{ padding-left: 160px; padding-right:40px; } a .text{ decoration:none; } /*class for larger photos*/ .gallerytext{ height: 185px; border-bottom-width: thin; border-bottom-style: dotted; border-bottom-color: #95C94F; margin-bottom: 20px; padding: 0px; } /*class for ul li gallery photos*/ .smallimagelist{ list-style-type:none; text-decoration:none; } .smallimagelist ul{ display: block; width: 250px; } .smallimagelist li{ color: #49382A; padding: 0px; float: left; margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; } .smallimagelist img{ border: none; display: block; margin: 0px; } .smallimagelist ul li a { margin-top:10px; } a img { border:none; } /*forces capations to display below the images. To stop unwanted wrapping, set the width of the list tag