** ==================================== ABQDog.com style =========================================**/ /** NOTES: Generally, 1em = 12pt = 16px = 100% **/ /** UPDATES: - 02/02/11: changed li.square-small to {list-style-type: square; margin-left: -7px; *margin-left: -5px;} **/ html {background-color: #FFF;} body { background-color: #FFF; margin-left: 0; margin-top: 0; padding: 0; } h1 {font: 19px Arial, sans-serif; line-height: 20px; margin: 0; padding: 0; } /** was head **/ h2 {font: 17px Arial, sans-serif; line-height: 18px; margin: 0; padding: 0; } /** was subhead **/ h3 {font: 15px Arial, sans-serif; line-height: 16px; margin: 0; padding: 0; } /** was minihead **/ .santa {color: #F00;} .small {font: 10px Arial, Tahoma, Helvetica, sans-serif; } .small-red {color:#F00;font: 10px Arial, Tahoma, Helvetica, sans-serif; } .small-white {color: #FFF; font: 10px Arial, Tahoma, Helvetica, sans-serif; } .text {font: 11px Arial, Tahoma, Helvetica, sans-serif; } .text-white {color: #FFF; font: 10px Arial, Tahoma, Helvetica, sans-serif; } .body {font: 12px Arial, Tahoma, Helvetica, sans-serif; } .body-orange {color: #F1751A; font: 12px Arial, Tahoma, Helvetica, sans-serif;} .body-red {color: #F00; font: 12px Arial, Tahoma, Helvetica, sans-serif; } .body-white {color: #FFF; font: 12px Arial, Tahoma, Helvetica, sans-serif; } .bigbody {font: 15px Arial, Tahoma, Helvetica, sans-serif; } .bigbody-orange {color:#F1751A; font: 15px Arial, Tahoma, Helvetica, sans-serif; } .bigbody-red {color:#FF0000; font: 15px Arial, sans-serif; } .bigbody-white {color:#FFF; font: 15px Arial, Tahoma, Helvetica, sans-serif; } .colhead {font: bold 16px Arial, Tahoma, Helvetica, sans-serif;} .colhead-red {color: #F00; font: bold 16px Arial, Tahoma, Helvetica, sans-serif; } #page { background: #FFF; color: #000; font-family: Arial, Tahoma, Helvetica, sans-serif; height: auto; padding: 0; width: 780px; } #content { background: #FFF; color: #000; float: left; margin-left: 0; margin-top: 0; width: 670px; } #side-ads { background: #FFF; color: #000; float: left; font: 10px Arial, Tahoma, Helvetica, sans-serif; height: 750px; margin: 0; padding: 0; width: 100px; } #btm-nav { background: #FFF; color: #000; font: 10px Arial, Helvetica, sans-serif; height: 45px; padding: 0; width: 670px; } /** ============================================================ VERTICAL SPACING =============================================**/ .just1 {line-height: 1px;} .just2 {line-height: 2px; } .tiny {line-height: 2px; *line-height: 3px;} .eensy {line-height: 5px;} .item-space {font-size: 6px;} .time-space {font-size: 8px; } .news-space {font-size: 12px;} .ad-space {font-size: 17px; } .subject-space {font-size: 20px;} .space {font-size:40px; *font-size: 0;} .wide-space {font-size:15px; } /** ========================================================== ALIGNMENT =============================================**/ .hang-left { display: inline; float: left; padding: 0 4px 25px 0; *padding: 0 4px 0 0;} .hang-right { display: inline; float: right; padding: 0 0 25px 4px; *padding: 0 0 0 4px;} .move-left {display: inline; margin-left: 0px; } /** for some weird reason, this only works with DIV, not SPAN!! **/ .move-right {display: inline; margin-right: 0px; } /** for some weird reason, this only works with DIV, not SPAN!! **/ /** ========================================================== BOXES =============================================**/ .box { border: 1px solid; padding: 4px; } .box-black { border: 2px #000 solid; padding: 4px; } .box-red { border: 2px red solid; padding: 4px; } .box-small { border: 1px solid #000; padding: 4px; } .summer { background-image: url(/images/backgrounds/summer.gif); border: #F8C94C 1px dotted; color: #000; font: 9px Arial, sans-serif; padding: 5px;} .spring { background-image: url(/images/spring-flowers-bg.gif); border: #EF62D6 1px solid; color: #EF62D6; font: 12px Arial, Helvetica, sans-serif; height: auto; padding: 10px; width: auto; } .winter { background-image: url(/images/snowflake-bg.gif); border: #3AB7B5 1px dashed; color: #000; font: 12px Arial, Helvetica, sans-serif; height: auto; padding: 8px; width: auto; } /** ======================================= GRID FRAMEWORK =============================================**/ /** width of content page is 750px; there are two 110px-wide side bars for ads, giving a total width of the page of 960px **/ /** 5px gutter **/ .grid-1 { width: 65px; } .grid-2 { width: 140px; } .grid-3 { width: 180px; } .grid-4 { width: 265px; } .grid-5 { width: 325px;} .grid-6 { width: 365px; } .grid-7 { width: 440px; } .grid-8 { width: 520px; } /** tot = 670px **/ .grid-9 { width: 600px; } .grid-10 { width: 660px; } .column { float: left; margin: 0 5px; overflow: hidden; display: inline; } .row { margin: 0 auto; overflow: hidden; text-align: left; width: 670px; } /** ===================================================== FORMS =============================================**/ input { background-color: #F8F8F8; border: 1px solid #888; font-size: 12px; padding: 4px; } input:focus {background-color: #00FFFF; border: 1px solid #000; } /** ======================================= LISTS =============================================**/ ol.flat {margin-left: 15px; *margin-left: 35px; margin-top: 2px; padding: 0; } ul.flat {margin-left: 35px; margin-top: 3px; padding: 0; } li.flat {list-style-type: square; margin-left: 20px; *margin-left: 0.2em; } li.in {margin-left: 20em; *margin-left: 0.2em; } li.square { list-style-type: square; margin-left: 1em; } li.square-small {list-style-type: square; margin-left: -10px; *margin-left: -8px;} li.square-in {list-style-type: square; margin-left: -5px; *margin-left: -3px; } #none { background: #FFF; color: #000; font: 12px Arial, Helvetica, sans-serif; margin-left: 0; margin-bottom: 0; margin-top: 0; padding-left: 2px; } #none li{ list-style: none; margin: 0; } /** ======================================================= LINKS =============================================**/ a.top-arrow:link { text-decoration: none; font-size: 8pt; } /** black/turquoise/dark grey **/ a { color: #000; text-decoration: underline;} a:link { color: #000; text-decoration: underline; } a:hover {color: #009A9A; text-decoration: underline; } a:visited {color: #121212; text-decoration: underline; } /** white/turquoise/light grey **/ a.white {color: #FFF; text-decoration: underline; } a:link.white {color: #FFF; text-decoration: underline; } a:hover.white {color: #00FFFF; text-decoration: none; } a:visited.white {color: #00FFFF; text-decoration: none; } /** black/white/grey **/ a.b2w {color: #000;text-decoration: underline; } a:link.b2w {color: #000;text-decoration: underline; } a:hover.b2w {color: #FFF; text-decoration: underline; } a:visited.b2w {color: #454545; text-decoration: underline; } /** black/turquoise/black **/ a.arrow {color: #000; font-size: 8pt; text-decoration: none;} a:link.arrow {color: #000; font-size: 8pt; text-decoration: none;} a:hover.arrow {color: #00FFFF; text-decoration: underline;} a:visited.arrow {color: #000; text-decoration: none;} /** orange/black/grey **/ a.o2b {color: #F1751A;text-decoration: underline; } a:link.o2b {color: #F1751A;text-decoration: underline; } a:hover.o2b {color: #000; text-decoration: underline; } a:visited.o2b {color: #BA6222; text-decoration: underline; } /** santa: red/black/grey **/ a.santa {color: #FF0000;text-decoration: underline; } a:link.santa {color: #FF0000;text-decoration: underline; } a:hover.santa {color: #000; text-decoration: underline; } a:visited.santa {color: #bb1100; text-decoration: underline; } a:visited:hover.santa {color: #555; text-decoration: underline; } a.noborder {border: 0; text-decoration: none;} a:link.noborder {border: 0; text-decoration: none;} a:hover.noborderr {text-decoration: none; color: #0FF;} a:visited.noborder {text-decoration: none; color: #232323;} a:visited:hover.noborder {text-decoration: none; color: #099;}