/* css Coyote Creation Starry Night */ /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */ /* This file by Coyote Holmberg */ /* March 3, 2007*/ /* I woke up one morning with this page design in my head */ /*************************/ /* STARRY NIGHT THEME*/ /* 100% SCREEN WIDTH*/ /*COLOR SCHEMA: CREAM, CABERNET, AND BLACK */ /*color: #CCC; /* LIGHT GRAY*/ /*color:#666666; /*DARK GRAY*/ /*color: #CC0000; /*MAROON*/ /*color: #993300; /* CINNAMON*/ /************************/ /********************************************/ /* GLOBAL ELEMENTS */ /********************************************/ body { /* includes body background image*/ font: 10pt/14pt Garamond,fantasy; color: #222; background: #000 url( ) bottom left no-repeat; margin: 0px; } bodycontainer { /*GLOBAL CONTAINER */ color: #CCC; background: url( ); } p { /* most paragraphs */ font: 10pt/12pt Garamond,fantasy; color: #222;/*DARK GRAY*/ text-align:left; padding: 0 20px; } p.pintro{ /* introduction paragraphs. centered */ font: 10pt/12pt Garamond,fantasy; color: #222;/*DARK GRAY*/ text-align:center; padding: 5px 20px 0px 20px; } p.p1{ /* initial paragraphs with top spacing*/ font: 10pt/12pt Garamond,fantasy; color: #222;/*DARK GRAY*/ text-align:left; padding: 20px 20px 0px 20px; } p.p2{ /* secondary paragraphs */ font: 10pt/12pt Garamond,fantasy; text-align:left; padding: 0 20px; } h3 { font: bold 14pt Garamond,fantasy; letter-spacing: 1px; /*margin-bottom: 0px; */ color: #CCC;/*DARK GRAY*/ } a:link { font-weight: bold; text-decoration: none; color: #CC0000; /*MAROON*/ } a:visited { font-weight: bold; text-decoration: none; color: #993300;/* CINNAMON*/ } a:hover, a:active { text-decoration: underline; color: #993300;/* CINNAMON*/ } ******************************************************************** /********************************************/ /* BANNER STRUCTURE AND HEADER*/ /********************************************/ #bannerback { /* THIS TILES A SLICE IMAGE BEHIND THE BANNER FOR 100% WIDTH*/ background: transparent url( ) top center repeat-x; position: absolute; height: 200px; padding: 0px 95% 0px 0px; /* positions the main body content*/ top: 10px; right: 10px; left: 10px; z-index: 1; } #container{ /* BANNER IMAGE HERE*/ /*LET'S CHANGE THIS TO BANNERCONTAINER ON ALL CSS*/ background: transparent url(../images/starrynight-bnr.gif) top left no-repeat; /*BANNER 750x200*/ position:absolute; z-index: 2; height:200px; padding: 30px 75px 0px 200px; /* positions the main body content*/ margin: 10px; /* puts a margin on the page content, including the logo */ border: 2px #red; } #imageboxbnr { /* BANNER ACCENT GRAPHIC RIGHT SIDE*/ /*LET'S CHANGE THIS TO BANNERIMAGEBOX ON ALL CSS*/ background: transparent url( ) top right no-repeat; position: absolute; z-index: 3; top: 0px; right: 50px; width: 260px; height: 200px; } #intro { } /*TEXT CONTENT FOR BANNER IF NOT USING GRAPHIC FOR TEXT*/ #pageLogo { margin-bottom: 50px; } /* the banner logo/page logo if not using the container to hold the logo */ #pageLogo h1 { background: transparent url() no-repeat top left; margin-top: 10px; width: 219px; height: 87px; float: left; } /* Controls visibility of the banner logo text, if not using graphics for the font*/ #pageLogo h1 span { display:none; } /* page logo subtitle */ #pageLogo h2 { background: transparent url() no-repeat top left; margin-top: 58px; margin-bottom: 40px; width: 200px; height: 18px; float: right; } #pageLogo h2 span { display:none; } /********************************************/ /* NESTED IMAGE AND TEXT BOX*/ /********************************************/ #nestedTextBox { /* NESTED IMAGE AND TEXT BOX*/ clear:right; margin: 10px 0px 0px 30px; width: 200px; height:300px; float: right; overflow:hidden; background: #000 url('../images/tornpaper150x200.gif'); } #nestedTextBox h3 { font: bold 12pt/12pt Garamond,fantasy; text-align:center; padding: 20px 20px 0px 20px; color: #f33;/*RED*/ } #nestedTextBox p { } #nestedTextBox p.p2 { font:italic; text-align:center; /*padding: 0px 20px 20px 20px;*/ } #imagebox2 { /* This is the image that overlays the nested Text box */ /*LET'S CHANGE THIS TO NESTEDOVERIMAGEBOX ON ALL CSS*/ background: transparent url( ) top right no-repeat; position: absolute; z-index: 3; top: 340px; right: 80px; width: 80px; height: 180px; border: 2px #red; } /********************************************/ /* MAIN CONTENT*/ /********************************************/ #introduction { float: left; /*padding: 50px 10px 0px 10px;*/ width: 200px; height: 300px; margin: 10px 0px 0px 60px; color: #222;/*DARK GRAY*/ background: #000 url('../images/tornpaper150x200.gif'); } #introduction h3 { font: bold 12pt/12pt Garamond,fantasy; text-align:center; padding: 20px 20px 0px 20px; color: #f33;/*RED*/ } #mainContent { float:right; /*padding: 50px 10px 0px 10px;*/ width: 200px; height:300px; background: #000 url('../images/tornpaper150x200.gif'); margin: 10px 0px 0px 0px; overflow:hidden; } #mainContent h3 { font: bold 12pt/12pt Garamond,fantasy; text-align:center; padding: 20px 20px 0px 20px; color: #f33;/*RED*/ } #mainContent p { } /********************************************/ /* FOOTER*/ /********************************************/ #footer { display:block; clear:both; text-align: center; color:#ccc; margin-top:10px; } #footer a:link, #footer a:visited { margin-right: 20px; } /********************************************/ /* NAVIGATION LISTS */ /********************************************/ #ListNav { /* the Navigation list container */ margin-left: 5px; position: absolute; top: 0px; left: 5px; /* This positions it to the left or right*/ text-align:center; } #ListNav2 { /* the Select a Design list*/ font: 10px verdana, sans-serif; background: transparent url( ) top left repeat-y; padding: 10px; margin-top: 200px; /* top positioning*/ width: 140px; } #ListNav h3.select { background: transparent url() no-repeat top left; margin: 10px 0px 5px 0px; width: 97px; height: 16px; text-align:center; } #ListNav h3.select span { /* hide and seek */ /*display:none; */ text-align:center; } #ListNav h3.favorites { background: transparent url() no-repeat top left; margin: 25px 0px 5px 0px; width: 60px; height: 18px; } #ListNav h3.favorites span { /* hide and seek */ display:none } #ListNav h3.siteNav { background: transparent url() no-repeat top left; margin: 10px 0px 5px 0px; width:97px; height: 16px; text-align:center; } #ListNav h3.siteNav span { /* hide and seek */ /*display:none */ text-align:center; } #ListNav h3.resources { background: transparent url() no-repeat top left; margin: 10px 0px 10px 0px; width:97px; height: 20px; text-align:center; } #ListNav h3.resources span { /* hide and seek */ /*display:none */ text-align:center; } #ListNav ul { margin: 0px; padding: 0px; } #ListNav li { line-height: 2.5ex; list-style-type: none; /* background: transparent url(cr1.gif) no-repeat top center; */ display: block; padding-top: 5px; margin-bottom: 5px; } #ListNav li a:link { color: #CC0000; } #ListNav li a:visited { color: #993300; } /********************************************/ /* UNORDERED LISTS */ /********************************************/ #Owls { /* the list container */ margin-left: 5px; position: absolute; top: 0px; right: 20px; /* This positions it to the left or right*/ display:none; } #Owls2 { /* unordered lists list*/ font: 10px verdana, sans-serif; background: transparent url( ) top left repeat-y; padding: 10px; margin-top: 200px; /* top positioning*/ width: 140px; } #Owls h3.select { background: transparent url() no-repeat top left; margin: 10px 0px 5px 0px; width: 97px; height: 16px; text-align:center; } #Owls h3.select span { /* hide and seek */ /*display:none; */ text-align:center; } ul.Owls { margin: 0px; padding: 0px 30px 30px 40px; list-style-type:square; } li.Owls { line-height: 2.5ex; /* background: transparent url( ) no-repeat top center; */ /*display: block; */ padding-top: 0px; } #Owls li a:link { color: #lime; } #Owls li a:visited { color: #yellow; } /********************************************/ /* ORDERED LISTS */ /********************************************/ #oLists ul { margin: 0px; padding: 0px; border: 1px #lime; } #oLists li { line-height: 2.5ex; list-style-type: none; /* background: transparent url( ) no-repeat top center; */ /*display: block; */ padding-top: 5px; margin-bottom: 5px; } #oLists li a:link { color: #lime; } #oLists li a:visited { color: #yellow; } /********************************************/ /* EXTRA DIVS*/ /********************************************/ #imagebox3 { } #extraDiv3{ } #extraDiv4{ } #extraDiv5{ } #extraDiv6{ }