/* Item Name : jQuery Sticky Footer Author URI : http://themeforest.net/user/Keliah Version : 1.0 */ /* TABLE OF CONTENTS 1. Footer General Styling 2. Drop Up Containers 3. Columns Grid 4. Footer Typography 5. Trigger Button 6. Colored Elements */ /* _____________________________________________________________________________ 1. FOOTER GENERAL STYLING _____________________________________________________________________________ */ #footer { position: fixed; background:url("../images/design/bgStickFooter.png") bottom repeat-x #234d88; bottom: 0px; margin:0 auto; width: 100%; height: 38px; padding:0px; z-index:9999 /*text-shadow: 1px 1px 1px #000; -moz-box-shadow: 0px 0px 5px #222222; -webkit-box-shadow: 0px 0px 5px #222222; box-shadow: 0px 0px 5px #222222;*/ } #footer ul { width: 940px; margin: 0 auto; padding: 0; } #footer li { float:left; margin: 0; list-style: none; } #footer li:hover { /*background-color:#121212;*/ } #footer li:hover a { color:#dddddd; } #footer li a { color:#fff; font-size:12px; text-decoration:none; padding:11px 14px 12px 14px; display:block; font-weight: bold; } #footer li .dropup { padding-right:40px; background:url("../images/design/arrow.png") no-repeat right 15px; } #footer li .footer_dropup { position: absolute; /*left:0;*/ /*left:auto;*/ display:none } #footer li:hover div.footer_dropup { display: block; padding:10px 0px 0px 0px; margin: 0 0 0 -1px; /*left:auto;*/ bottom:38px; /* Equal height of the footer */ /*background-color:#121212;*/ border-bottom:none; -moz-border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px; } #footer #footer_home a { padding-top:0; } /* _____________________________________________________________________________ 2. DROP UP CONTAINERS _____________________________________________________________________________ */ #footer .drop1column {width: 80px;} #footer .drop2columns {width: 160px;} #footer .drop3columns {width: 240px;} #footer .drop4columns {width: 320px;} #footer .drop5columns {width: 400px;} #footer .drop6columns {width: 480px;} #footer .drop7columns {width: 560px;} #footer .drop8columns {width: 640px;} #footer .drop9columns {width: 720px;} #footer .drop10columns {width: 800px;} #footer .drop11columns {width: 880px;} #footer .drop12columns {width: 960px;} /* _____________________________________________________________________________ 3. COLUMNS GRID _____________________________________________________________________________ */ #footer .col_1, #footer .col_2, #footer .col_3, #footer .col_4, #footer .col_5, #footer .col_6, #footer .col_7, #footer .col_8, #footer .col_9, #footer .col_10, #footer .col_11, #footer .col_12 { display:inline; float: left; position: relative; margin-left: 15px; margin-right: 15px; } #footer .col_1 {width:50px;} #footer .col_2 {width:130px;} #footer .col_3 {width:210px;} #footer .col_4 {width:290px;} #footer .col_5 {width:370px;} #footer .col_6 {width:450px;} #footer .col_7 {width:530px;} #footer .col_8 {width:610px;} #footer .col_9 {width:690px;} #footer .col_10 {width:770px;} #footer .col_11 {width:850px;} #footer .col_12 {width:930px;} .clear, .clear_push { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clear_push { /* Use this one to "clear" and add some space */ height: 12px; } /* _____________________________________________________________________________ 4. FOOTER TYPOGRAPHY _____________________________________________________________________________ */ #footer p, #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 { color:#FFFFFF; text-shadow: 1px 1px 1px #000; } #footer h1, #footer h2 { padding-bottom:12px; } #footer h1, #footer h2, #footer h3 { margin-bottom:18px; } #footer h4, #footer h5, #footer h6 { margin-bottom:12px; } #footer h1 { font-size:36px; line-height:36px; } #footer h2 { font-size:30px; line-height:42px; } #footer h3 { font-size:28px; line-height:28px; } #footer h4 { font-size:21px; line-height:24px; } #footer h5 { font-size:18px; line-height:28px; } #footer h6 { font-family:"Lucida Grande","Lucida Sans Unicode",sans-serif; font-size:14px; line-height:18px; text-transform:uppercase; } /* Separator */ #footer hr { border-top:1px solid #000; border-bottom:1px solid #222; border-left:none; border-right:none; height: 1px; margin-bottom:16px; margin-top:0px; } /* Simple Lists */ #footer li ul { list-style:none; padding:0; margin:0 0 12px 0; } #footer li ul li { font-size:12px; line-height:24px; position:relative; padding:0; margin:0; float:none; text-align:left; border:none; } #footer li div.footer_dropup a, #footer li ul li a { padding:0; margin:0; display:inline; } #footer li ul li:hover { color:#ffffff; } /* Other Lists */ #footer ul.list, #footer ul.list2, #footer ol.num, #footer ol.num2 { margin:0 0 18px 20px; color:#ffffff; font-size:12px; } #footer ul.list li, #footer ul.list2 li, #footer ol.num li, #footer ol.num2 li{ padding:0 0 0 12px; line-height:24px; border:none; } #footer .list li { list-style:disc; } #footer .list2 li { list-style:square; } #footer .num li { list-style:decimal; } #footer .num2 li { list-style:upper-latin; } #footer li div.footer_dropup ul.list li a, #footer li div.footer_dropup ul.list2 li a, #footer li div.footer_dropup ol.num li a, #footer li div.footer_dropup ol.num2 li a { color:#bbbbbb; } #footer li div.footer_dropup ul.list li a:hover, #footer li div.footer_dropup ul.list2 li a:hover, #footer li div.footer_dropup ol.num li a:hover, #footer li div.footer_dropup ol.num2 li a:hover { color:#dddddd; } #footer .black_box, #footer .black_box2 { background-color:#0C0C0C; color: #eeeeee; text-shadow: 1px 1px 1px #000; padding:6px 8px 6px 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } #footer .black_box { -webkit-box-shadow:inset 0 0 3px #000000; -moz-box-shadow:inset 0 0 3px #000000; box-shadow:inset 0 0 3px #000000; } /* Paragraphs with Icons */ /* #footer .calendar, #footer .note, #footer .help, #footer .delete, #footer .favorite, #footer .lock, #footer .archive, #footer .briefcase, #footer .search, #footer .user { padding-left:36px; margin-bottom:18px; } #footer .calendar {background:url("../images/design/icons/calendar.png") no-repeat 0px 5px} #footer .note {background:url("../images/design/icons/note.png") no-repeat 0px 5px} #footer .archive {background:url("../images/design/icons/archive.png") no-repeat 0px 5px} #footer .search {background:url("../images/design/icons/search.png") no-repeat 0px 5px} #footer .help {background:url("../images/design/icons/help.png") no-repeat 0px 5px} #footer .delete {background:url("../images/design/icons/delete.png") no-repeat 0px 5px} #footer .favorite {background:url("../images/design/icons/favorite.png") no-repeat 0px 5px} #footer .lock {background:url("../images/design/icons/lock.png") no-repeat 0px 5px} #footer .briefcase {background:url("../images/design/icons/briefcase.png") no-repeat 0px 5px} #footer .user {background:url("../images/design/icons/user.png") no-repeat 0px 5px} */ /* Image Shadow Effect */ #footer .imgshadow { background:#000000; padding:4px; border:1px solid #222222; margin-top:3px; margin-bottom:18px; -moz-box-shadow:0px 0px 5px #000000; -webkit-box-shadow:0px 0px 5px #000000; box-shadow:0px 0px 5px #000000; } /* Paragraphs with side images */ #footer .img_left { float:left; margin-right:12px; } #footer .img_right { float:right; margin-left:12px; } /* Paragraphs with borders */ #footer .dark, #footer .brown, #footer .yellow, #footer .red, #footer .blue, #footer .green { padding-left:15px; color:#cccccc; margin-bottom:18px; } #footer .dark {border-left:#3B3B3B solid 7px} #footer .brown {border-left:#8D8767 solid 7px} #footer .yellow {border-left:#DBA742 solid 7px} #footer .red {border-left:#C05D48 solid 7px} #footer .blue {border-left:#52878B solid 7px} #footer .green {border-left:#B0BD85 solid 7px} /* Simple Tables */ #footer #table_dark { width:100%; padding:0; margin:6px 0 18px 0; font-size:12px; } #footer #table_dark th { text-align:left; padding:12px 9px 12px 9px; font-weight:bold; font-size:12px; } #footer #table_dark { border:1px solid #000; border-bottom:none; } #footer #table_dark th { color:#FFF; border-bottom:1px solid #000; background:#0D0D0D; } #footer #table_dark td { border-bottom:1px solid #000; background:#0F0F0F; padding:12px 9px 12px 9px; color:#DDD; } /* Social Icons */ #footer li#social { float:right; /* Positionning of the social icons container */ width:auto; margin:7px 45px 0px; padding:0px; border:none; } #footer li#social:hover { background:none; } #footer #social li { margin-right:10px; /* 12px is the space between each one of them */ float:left; background:none; border:none; width:20px; height:20px; padding:0px; } /* Tooltips for social icons */ a.tooltip:hover { text-decoration:none; } a.tooltip span { /* The "span" defines the text appearing on mouse hover, these are basic stylings */ display:none; padding:0px 7px 5px 7px; bottom:30px; position:relative; height:24px; width:55px; text-align:center; background:url("../images/design/tooltip.png") no-repeat center top; position:absolute; color:#dddddd; font-size:12px; margin-left:-24px; } a.tooltip:hover span { display:block; } /* _____________________________________________________________________________ 5. TRIGGER BUTTON _____________________________________________________________________________ */ a#footer_trigger{ position: fixed; z-index:2; bottom: 0px; right: 10px; width:35px; height:35px; background:url("../images/design/footer_button_up.png") right no-repeat; display: block; -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } a#footer_trigger.active { background:url("../images/design/footer_button_down.png") right no-repeat; } /* _____________________________________________________________________________ 6. COLORED ELEMENTS _____________________________________________________________________________ */ /* Links within the content */ #footer li div.footer_dropup a {color:#6a82a3;} #footer li div.footer_dropup a:hover {color:#536987;}