/* _************************************************************************************************************************************************_ */ /* ___________________Sticky Footer Properties_______________________________________________________________________________________________________ */ /* _************************************************************************************************************************************************_ */ /* must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser When coding sites for ASP.net where each page is inside a
tag, be sure to add the form tag to the height:100% statement, else it will break the sticky footer. Like this; html, body, form, #wrap {height: 100%;} */ /* ___________________________________________________________________ */ /* ____________________Essential Sticky Properties____________________ */ /* ___________________________________________________________________ */ * { margin:0; padding:0;} html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%; background:#ffffff url(images/interface/bg_header.jpg) top repeat-x;} #main {padding-bottom: 156px; /* must be same height as the footer */} #footer { position: relative; margin-top: -156px; /* negative value of footer height */ height: 156px; clear:both;} /* __________________________________________________________________________ */ /* ____________________End of Essential Sticky Properties____________________ */ /* __________________________________________________________________________ */ /* _________________________________________________________________ */ /* ____________________________Clear Fix____________________________ */ /* _________________________________________________________________ */ /*the clearfix class here is what is keeping the footer from floating up when using floated multi-column layouts and when resizing your browser window*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* _________________________________________________________________ */ /* _________________________End of Clear Fix________________________ */ /* _________________________________________________________________ */ /* _************************************************************************************************************************************************_ */ /* ___________________Sticky Footer Properties_______________________________________________________________________________________________________ */ /* _************************************************************************************************************************************************_ */ /* _________________________________________________________________ */ /* ______________________Generic Elements __________________________ */ /* _________________________________________________________________ */ body {font:9pt Tahoma, GeorgiaGeorgia, Times New Roman, serif; background-color:#ffffff; line-height:1.1em; color:#444444;} a img {border:none;} a:link {color: #0066ff; text-decoration:underline;} a:hover {color:#7A0A17; text-decoration:underline;} a:visited {color: #804249; text-decoration:underline;} p {margin:0px 0 0px 0;} ul {list-style-type: none;} .left {float:left;} .right {float:right;} .clear {clear:both;} /*____________________ End of Required Elements ____________________*/ /*#footer p.axe img, #footer2 p.axe img {margin-bottom:-7px;}*/ #footer { color:#0b5ffa; font-size:9px; font-family:Verdana, Arial, sans-serif; background: #444444 url(images/interface/bg_footer.jpg) repeat-x;} #footer a, #footer2 a {color:#0b5ffa; text-decoration:none;} #footer a:hover, #footer2 a:hover {color:#f98615; text-decoration:underline;} #footer a:visited, #footer2 a:visited {color:#71a3ff; text-decoration:none;} /*#footer p, #footer2 p {margin:0 0 0 0;}*/ /*#footer p.axe img, #footer2 p.axe img {margin-bottom:-7px;}*/ #foot {background: url(images/interface/bg_footer_mid.jpg) no-repeat; width:822px;margin:0 auto; height:21px; line-height:1.1em; padding:0 0px 0 0px;} #foot #left {width:250px;float:left; padding:20px 0 0 12px; } #foot #right {width:350px;float:right; text-align:right;padding:10px 25px 0 0;} #foot #right #copyright { color:#707070; font-weight:bold; font-size:11px; line-height:12px;text-decoration:none; float:right; } #foot #right #thirdParties { color:#707070; font-weight:normal; font-size:10px; line-height:12px;text-decoration:none} /*____________________ End of Footer ____________________*/ /*#footer .copyright { color:#707070; font-weight:bold; font-size:11px; text-decoration:none; float:right;} #footer .thirdParties { color:#707070; font-weight:normal; font-size:10px; text-decoration:none}*/ a img { border:0;} img {vertical-align:top;} .img_preview{padding:10px 0 0 8px;} .img_preview2{padding:0 0 0 0;} .img_preview3{padding:10px 0 0 10px;} .img_logo{padding:0 0 0 0; position:relative; top:0px;} #main_img { width:822px; height: 307px; padding: 0px; background: url(images/interface/pic.jpg) no-repeat; margin-left: 75px; } /* __________Main Interface Elements__________ */ h1 { font-family:Tahoma, Georgia, tahoma; font-size:24px; line-height:28px; color:#868686; } h6 { font-family:Tahoma, Georgia, tahoma; font-size:20px; line-height:28px; color:#868686; } h5 { font-family:Tahoma, Georgia, tahoma; font-size:16px; line-height:28px; color:#868686; } #header_background {} /* Content area holder */ #header .left { padding:0 0 0 0; position:relative; left: -43px; } /* Header left content*/ #header .right { padding:45px 11px 0 0; } /* Header right content*/ #header .right a { color:#868686; font-family:arial; font-size:12px; padding:0 29px 2px 0; } /* Header right a class content*/ #header_small .left { padding:0 0 0 0; position:relative; left: -43px; } /* Header left content*/ #header_small .right { padding:45px 11px 0 0; } /* Header right content*/ #header_small .right a { color:#868686; font-family:arial; font-size:12px; padding:0 29px 2px 0; } /* Header right a class content*/ a.logo { text-indent: -9999px; float: left; background: url(images/interface/logo.jpg); width: 417px; height: 88px; /*overflow:hidden;*/ cursor:pointer; /*z-index:1000;*/ } #header .content {background:url(images/pics/header_bg.jpg) top left no-repeat; padding:45px 20px 28px 434px; color:#505050; height:313px;} #header .content1 {background:url(images/pics/header_bg2.jpg) top left no-repeat; padding:45px 60px 28px 434px; color:#505050; height:313px;} #header .content2 {background:url(images/interface/header_bg2.jpg) top left no-repeat; padding:45px 60px 28px 434px; color:#505050; height:313px;} #header .content3{background:url(images/interface/header_bg3.jpg) top left no-repeat; padding:45px 60px 28px 434px; color:#505050; height:313px;} /*main image text */ #header .content .text {padding:50px 10px 33px 2px; float:right; width:220px;} #header .content1 .text {padding:50px 0 33px 2px; float:right; width:220px;} #header .content2 .text {padding:50px 0 33px 2px; float:right; width:220px;} #header .content3 .text {padding:50px 0 33px 2px; float:right; width:220px;} #header .content a img {float:right;} #header .content1 a img {float:right;} #header .content2 a img {float:right;} #header .content3 a img {float:right;} #middle { width:100%;} #middle2 { height: 5000px; width:100%;} a.clicklink_orange:link { height:12px; font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color:#707070; margin: 0px 0px 0px 0px; position: relative; top:0px; left:0px; float:left; text-decoration: none;border-style: none;} a.clicklink_orange:visited { height:12px; font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #707070; margin: 0px 0px 0px 0px; position: relative; top:0px; left:0px; float:left; text-decoration: none;border-style: none;} a.clicklink_orange:hover { height:12px; font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #0d80d0; margin: 0px 0px 0px 0px; position: relative; top:0px; left:0px; float:left; text-decoration: underline;border-style: none;} a.clicklink_orange:active { height:12px; font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal; color: #707070; margin: 0px 0px 0px 0px; position: relative; top:0px; left:0px; float:left; text-decoration: none;border-style: none;} .content_address_grey { height: 12px; float:left; color:#ffffff; } .spacer { height: 10px; width:100%;} .spacer2 { height: 40px; width:100%;} .spacerform { height: 1px; width:100%;} .border {background:url(images/interface/border_tall.gif) top repeat-x;} .border .btall {background:url(images/interface/border_tall.gif) bottom repeat-x;} .border .ltall {background:url(images/interface/border_tall.gif) left repeat-y;} .border .rtall {background:url(images/interface/border_tall.gif) right repeat-y;} .border .tleft {background:url(images/interface/border_tl.gif) top left no-repeat;} .border .tright {background:url(images/interface/border_tr.gif) top right no-repeat;} .border .bleft {background:url(images/interface/border_bl.gif) bottom left no-repeat;} .border .bright {background:url(images/interface/border_br.gif) bottom right no-repeat; width:100%;} .border .ind {padding:4px 4px 15px 2px;color:#868686;} .border a img {float:right;} .border2 {background:url(images/interface/border_tall2.gif) top repeat-x;} .border2 .btall2 {background:url(images/interface/border_tall2.gif) bottom repeat-x;} .border2 .ltall2 {background:url(images/interface/border_tall2.gif) left repeat-y;} .border2 .rtall2 {background:url(images/interface/border_tall2.gif) right repeat-y;} .border2 .tleft2 {background:url(images/interface/border_tl2.jpg) top left no-repeat;} .border2 .tright2 {background:url(images/interface/border_tr2.jpg) top right no-repeat;} .border2 .bleft2 {background:url(images/interface/border_bl2.gif) bottom left no-repeat;} .border2 .bright2 {background:url(images/interface/border_br2.gif) bottom right no-repeat; width:100%;} .border2 .ind2 {padding:4px 4px 15px 2px;color:#868686;} .border2 a img {float:right;} .border3 {background:url(images/interface/border_tall3.gif) top repeat-x;} .border3 .btall3 {background:url(images/interface/border_tall3.gif) bottom repeat-x;} .border3 .ltall3 {background:url(images/interface/border_tall3.gif) left repeat-y;} .border3 .rtall3 {background:url(images/interface/border_tall3.gif) right repeat-y;} .border3 .tleft3 {background:url(images/interface/border_tl3.jpg) top left no-repeat;} .border3 .tright3 {background:url(images/interface/border_tr3.jpg) top right no-repeat;} .border3 .bleft3 {background:url(images/interface/border_bl3.gif) bottom left no-repeat;} .border3 .bright3 {background:url(images/interface/border_br3.gif) bottom right no-repeat; width:100%;} .border3 .ind3 {padding:4px 4px 15px 2px;color:#868686;} .border3 a img {float:right;} .morebuttonpos {padding:0 0 0 0; position:relative; left: 150px; } /* More button position */ .morebuttonpos2 {padding:0 0 0 0; position:relative; left: 400px; } /* More button position */ #morebutton { overflow:hidden; /* wrap floats */ height:22px; /* trips haslayout, wrap floats IE */ list-style:none; background:url(images/interface/more.gif) 0 0 repear-x; font:bold 11px/22px sans-serif; } #morebutton li { display:inline; } #morebutton a { float:left; position:relative; padding-left:10px; margin-right:10px; text-decoration:none; color:#9f9f9f; background: url(images/interface/more.gif) 0 -22px no-repeat; } #morebutton a span { position:absolute; top:0; left:100%; width:10px; height:22px; background:url(images/interface/more.gif) -61px -22px no-repeat; } #morebutton .current a { color:#000; background-position:0 -66px; } #morebutton .current a span { background-position:-61px -66px; } #morebutton a:active, #morebutton a:focus, #morebutton a:hover { color:#6c6c6c; /* More button text colour */ background-position:0 -44px; } #morebutton a:active span, #morebutton a:focus span, #morebutton a:hover span { background-position:-61px -44px; } /*________________________*/ .paybuttonpos {padding:0 0 0 0; position:relative; left: 500px; } /* More button position */ #paybutton { width:160px; height:47px; list-style:none; } /*________________________*/ .h_text {margin-top:-2px;padding-bottom:2px;} .more {text-align:right;} .more a{background:url(images/interface/more_bg.gif) top right no-repeat; padding-right:13px; color:#000000; font-weight:bold;} .date {background:url(images/interface/date_bg.gif) no-repeat 0 0; padding:2px 0 2px 22px; color:#686868;} /* Link text e.g. on Index1*/ li { color:#989898;} li a {color:#b6b6b6; font-size:11px;} .bot_line {background:url(images/interface/h_text_bg.gif) bottom repeat-x;} .b_text {color:#505050;} /* template */ #template #middle .indent {padding:0px 0 19px 0;} #template #middle .columns1 .column1 .padding{padding:9px 13px 3px 15px;} #template #middle .columns1 .column2 .padding{padding:9px 13px 3px 15px;} #template #middle .columns1 .column3 .padding{padding:9px 13px 3px 15px;} #template #middle .columns1 .p1 {padding:1px 0 7px 0;} #template #middle .columns2 {padding:21px 0 0 0;} #template #middle .columns2 .column1 .padding {padding:14px 21px 0 17px;} #template #middle .columns2 .column2 .padding {padding:14px 18px 0 21px;} #template #middle .columns2 .column1 .p1 {padding:7px 0 15px 0;} #template #middle .columns2 .column2 .content {padding:10px 0 15px 0;} #template #middle .columns2 .column2 .p1 {padding:2px 0 1px 0;} /* template-1 */ #template_1 #middle .indent {padding:17px 0 20px 0;} #template_1 #middle .column1 .padding1 {padding:16px 20px 0 16px;} #template_1 #middle .column1 .padding1 .content{padding:14px 0 27px 1px;} #template_1 #middle .column1 .padding1 .p1 {padding:1px 0 0 0;} #template_1 #middle .column1 .padding1 .more {padding:0 6px 0 0;} #template_1 #middle .column1 .padding2 {padding:36px 20px 0 16px;} #template_1 #middle .column1 .padding2 .content{padding:16px 0 0 1px;} #template_1 #middle .cols .more {margin-top:-19px;} #template_1 #middle .cols .p1 {padding:21px 0 1px 0;} #template_1 #middle .cols {padding:14px 0 0 0;} #template_1 #middle .column2 .padding{padding:9px 13px 3px 15px;} #template_1 #middle .column2 ul li {font-weight:bold;} #template_1 #middle .column2 .p1 {padding:1px 0 8px 0;} #template_1 #middle .column2 .p2 {padding:12px 0 17px 0;} #template_1 #middle .column2 .p3 {padding:17px 0 17px 0;} /* template-2 */ #template_2 #middle .indent {padding:17px 0 20px 0;} #template_2 #middle .columns1 .column1 .padding{padding:9px 13px 3px 15px;} #template_2 #middle .columns1 .column2 .padding{padding:9px 13px 3px 15px;} #template_2 #middle .columns1 .column1 ul {margin-bottom:7px;} #template_2 #middle .columns1 .column1 .p1 {padding:1px 0 0 0;} #template_2 #middle .columns1 .column2 .p1 {padding:1px 0 7px 0;} #template_2 #middle .columns2 {padding:21px 0 0 0;} #template_2 #middle .columns2 .column1 .padding {padding:14px 21px 0 17px;} #template_2 #middle .columns2 .column2 .padding {padding:14px 18px 0 21px;} #template_2 #middle .columns2 .column1 .p1 {padding:8px 0 10px 0;} #template_2 #middle .columns2 .column1 .p2 {padding:0 0 4px 0;} #template_2 #middle .columns2 .column2 .content {padding:7px 0 15px 0;} #template_2 #middle .columns2 .column2 ul {margin-bottom:1px;} /* template-3 */ #template_3 #middle .indent {padding:17px 0 20px 0;} #template_3 #middle .column1 .padding1 {padding:0px 15px 0 23px;} #template_3 #middle .column1 .padding1 .content{padding:5px 0 5px 1px;} #template_3 #middle .column1 .padding1 .p1 {padding:1px 0 0 0;} #template_3 #middle .column1 .padding1 .pd {padding:14px 0 0 0;} #template_3 #middle .column1 .padding1 .pd2 {padding:10px 0 0 0;} #template_3 #middle .column1 .padding1 .pd3 {padding:13px 0 0 0;} #template_3 #middle .column1 .padding1 .more {padding:0 6px 0 0;} #template_3 #middle .column1 .padding2 {padding:36px 20px 0 16px;} #template_3 #middle .column1 .padding2 .content{padding:16px 0 0 1px;} #template_3 #middle .cols .more {margin-top:-19px;} #template_3 #middle .cols .p1 {padding:21px 0 1px 0;} #template_3 #middle .cols {padding:14px 0 0 0;} #template_3 #middle .column2 .padding{padding:9px 13px 8px 15px;} #template_3 #middle .column2 .p1 {padding:1px 0 11px 0;} #template_3 #middle .column2 .p2 {padding:12px 0 11px 0;} #template_3 #middle .column2 .p3 {padding:13px 0 6px 0;} /* template-4 */ #template_4 #middle .indent {padding:17px 0 20px 0;} #template_4 #middle .column1 .padding1 {padding:16px 22px 0 16px;} #template_4 #middle .column1 .padding1 .content{padding:14px 0 34px 1px;} #template_4 #middle .column1 .padding1 .more {padding:0 2px 0 0; line-height:12px;} #template_4 #middle .column1 .padding2 {padding:34px 23px 0 16px;} #template_4 #middle .column1 .padding2 .content{padding:6px 0 0 1px;} #template_4 #middle .column1 .padding2 .more {margin-top:9px;} #template_4 #middle .column2 .padding{padding:9px 13px 3px 15px;} #template_4 #middle .column2 .margin .padding{padding:9px 12px 2px 15px;} #template_4 #middle .column2 ul {margin:0 0 2px 1px;} #template_4 #middle .column2 .margin {padding-top:6px;} #template_4 #middle .column2 .p1 {padding:0 0 8px 0;} /* template-5*/ #template_5 #middle .indent {padding:17px 0 20px 0;} #template_5 #middle .columns1 .column1 .padding{padding:9px 13px 16px 15px;} #template_5 #middle .columns1 .column2 .padding{padding:9px 13px 0 15px;} #template_5 #middle .columns1 .column1 ul {margin-bottom:7px;} #template_5 #middle .columns1 .column1 .p1 {padding:1px 0 0 0;} #template_5 #middle .columns1 a{color:#868686; font-size:11px; text-decoration:none;} #template_5 #middle .columns1 a:hover {text-decoration:underline;} #template_5 #middle .columns1 .column2 strong{font-size:11px;} #template_5 #middle .columns2 {padding:22px 0 0 0;} #template_5 #middle .columns2 .padding {padding:14px 15px 0 17px;} #template_5 #middle .columns2 .p1 {padding:14px 0 10px 0;} #template_5 #middle .columns2 .p2 {padding:0 0 4px 0;} /* template-6 */ #template_6 #middle .indent {padding:33px 15px 17px 17px;} #template_6 #middle .p1 {padding:6px 0 0 0;} #template_6 #middle .columns1 a{color:#868686; font-size:11px; text-decoration:none;} #template_6 #middle .columns1 a:hover {text-decoration:underline;}