/* CSS Document */ /* 5.21.09 */ /* Author: www.randycaruso.com */ html { min-height: 100%; margin-bottom: 1px; } * { xmargin: 0; xpadding: 0; } html, body { height: 100%; } body { height: 100%; font-size: 62.5%; font-family: georgia, times, helvetica, sans-serif; margin: 0; padding: 0; background: Black url(../images/leaf.gif) repeat; } /* Content Architecure Typography Ephemera */ /* ================= Content ================= */ #content { float: right; width: 780px; xmargin: 0 42px 0 0; xdisplay: inline; xborder: 1px solid yellow; } /* -------------- HOME PAGE ----------------- */ #header h1, h2 { display:none; } .wood { background: url(../images/cuts/HilltopWeb_05.jpg) no-repeat; height: 140px; text-align: right; padding: 0px 30px 0 0; } .main-stage { background: url(../images/cuts/main-stage.jpg) no-repeat; height: 492px; width: 546px; } .core { background: url(../images/cuts/core.jpg) no-repeat; height: 127px; width: 825px; } .left { background: url(../images/cuts/left.gif) no-repeat; width: 30px; height: 645px; } .right { background: url(../images/cuts/right.gif) no-repeat; width: 32px; height: 645px; } .frametop { background: url(../images/cuts/core-06.jpg) no-repeat; width: 279px; height: 34px; } .frameright { background: url(../images/cuts/core-09.jpg) no-repeat; width: 52px; height: 318px; } .framebot { background: url(../images/cuts/core-10.jpg) no-repeat; width: 201px; height: 56px; } .frameleft { background: url(../images/cuts/core-07.jpg) no-repeat; width: 26px; height: 318px; } .chalkboard { background: url(../images/cuts/HilltopWeb_08.jpg) no-repeat; width: 201px; height: 262px; } .base { background: url(../images/cuts/base.gif) no-repeat; width: 825px; height: 26px; } /* -------------- CONTACT PAGE ----------------- */ .contact { text-indent: -100em; overflow: hidden; width: 367px; height: 38px; background: url(../images/contact-us.gif) no-repeat 0 7px; } #contactinfo { float: left; width: 230px; height: 300px; border-right: 1px solid #BDD9EA; margin: 0 0 10px 0; } #contactform { width: 370px; float: right; margin: 0 80px 0 0; color: white; font-size: 1.1em; display: inline; } .field { color: #506569; background-color: #E5E5E5; border: 0px solid #9E9E9E; font-size: 1.1em; font-family: arial, helvetica, sans-serif; } .single { height: 18px; width: 162px; margin: 0; padding: 3px; } .comment { height: 85px; width: 363px; padding: 3px 0 0 3px; overflow: hidden; !important: ; } /* -------------------- submit button with rollover -------------------- */ .submit { background: url(../images/send.gif) no-repeat; height: 17px; width: 82px; border: none; padding-top: 17px; float: right; cursor: pointer; margin: 0 3px 0 0; } .submit:hover { background: url(../images/send.gif) no-repeat 0 -17px; } /* -------------------- stupid table tricks -------------------- */ .cell { padding: 0px 0 12px 0; } .wide { width: 370px; } .one { width: 200px; padding: 0 30px 10px 0; } /* ============================= Architecure ============================ */ /* ------------ Centers the Block in the Page -------------- */ #distance{ float: left; width: 1px; height: 50%; margin-bottom: -322px; /* ENTER half of container's height */ } #column{ margin: 0 auto; clear: left; position: relative; text-align: left; width: 887px; height: 645px; /* ENTER full container height */ } /* -------------------- Header -------------------- */ #logo { float: left; width: 310px; height: 150px; margin: 0 auto; background: url(../images/logo.jpg) no-repeat 42px 18px; } #logo h1 { display:none; } /* -------------------- NAV -------------------- */ #nav { float: right; width: 562px; height: 27px; margin: 47px 42px 0 0; display: inline; } #nav ul { display: none; } /* -------------------- Footer -------------------- */ #footer { float: right; width: 780px; height: 100px; margin: 30px 42px 0 0; xpadding: 0 0 50px 0; display: inline; background: url(../images/footer.gif) no-repeat; } #footer p { display: none; text-align: right; } #contactemail { float: right; margin-right: 100px; width: 180px; height: 25px; } /* ================= Typography ================= */ /* -------------------- Headers -------------------- */ p { font-size: 1.2em; xfont-family: Helvetica, Arial, sans-serif; margin: 0 0 .7em 0; color: white; xline-height: 1.8em; } h1 { font-size: 2.4em; margin: 0 0 .3em 0; } h2 { font-size: 2.2em; margin: 0 0 .4em 0; } h3 { font-size: 2em; margin: 0 0 .4em 0; } h4 { font-size: 1.7em; margin: 0 0 .6em 0; color:black; } h5 { font-size: 1.5em; margin: 0 0 .6em 0; } h6 { font-size: 1.3em; margin: 0 0 .4em 0; } table { margin: 0 0 3px 0; } /* -------------------- LINKS -------------------- */ :focus { outline: 0; } a { border: 0 none; } a { color: white; text-decoration: none} a:hover { color: white; text-decoration: underline; } a:focus { color: #EC3B0F; } img { border: none; } /* -------------------- Custom Bullets -------------------- */ ul li { xfont-size: 1.2em; margin: 2px 0 0 -20px; list-style-type: none; padding: 0 0 0 14px; background: url(../images/bullet.gif) no-repeat 0 3px; /*adjust background position here, the first value is the x and the second the y position *//*adjust background position here, the first value is the x and the second the y position */ } /* -------------------- Blockquotes -------------------- */ blockquote { xmargin: 2em; color: #666; font-style: italic; padding: 5px 0 0 0; border-top: 1px solid #ccc; /* puts a line above and below*/ border-bottom: 1px solid #ccc; color: #666; } /* Actually puts quotes in the text!! */ blockquote *:first-child:before { content: "\201C"; } blockquote *:first-child:after { content: "\201D"; } /* ------------------- Fancy Bits ------------------- */ /* to create serif italic dramatic text, use this class */ .fancy { color: #666; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; font-style: italic; font-weight: normal; font-size: 1.2em; } /* creates small caps */ .caps { font-variant: small-caps; letter-spacing: 1px; text-transform: lowercase; font-size: 1.2em; font-weight: bold; padding: 0 2px; } /* -------------------- Ephemera ------------------- */ .social { padding: 5px 0 5px 10px; } img a { border: none; } caption { background:#eee;padding: 10px;} .small { font-size: .9em; margin-bottom: 1.875em; line-height: 1.875em; } .xsmall { font-size: 85%;} .large { font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;} .hide { display:none;} #hide { display:none;} .quiet {color:#666;} .loud {color:#000;} address { font-size: 1.3em; margin: 0 0 1.5em 1em; font-style: italic; } abbr, acronym {border-bottom: 1px dotted #666; } sup, sub {line-height:0;} .box { padding: 1.5em; margin-bottom: 1.5em; background: #E5ECF9; } .floatleft {float: left;} .floatright {float: right;} .center {text-align: center;} .picleft { float: left; padding: 0 8px 8px 0; } .picright { float: right; padding: 0 0 8px 8px; } #clear{ clear: both; } .clear {clear: both;} /*Opacity?? http://arbent.net/blog/css-tips-that-every-beginning-developer-should-know-about .class { opacity: 0.7; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.5; } */ /* ------------------------ hr fixes ------------------------*/ *+html hr { xmargin: 0em 0 -7px 0; /*IE 7 bugfix*/ } * html hr { xmargin: 0em 0 -7px 0; /*IE 6 bugfix*/ } hr { background: #ddd; margin: 25px 0 20px 0; clear: both; float: none; width: 100%; height: 2px; border: none; } *hr { background: #ddd; color: #ddd; clear: both; float: none; width: 100%; height: 2px; margin: 5px 0 1.45em 0; border: none; }