/* Item Name : Pure CSS3 Sticky Footer Author URI : http://themeforest.net/user/Keliah Item URI : http://codecanyon.net/item/pure-css3-sticky-footer/128701 Version : 1.4 */ /* TABLE OF CONTENTS 01 FOOTER - GENERAL STYLES 02 FOOTER - DROP DOWN MENU (DROP UP) 03 FOOTER - COLUMNS CONTENT */ /* _______________________________________ 01 FOOTER - GENERAL STYLES _______________________________________ */ /* The #footer must stick to the bottom of the page, the fixed positionning is here necessary. If you modify the width of the footer, you'll need to change the margin-left value to center it. This value must be 50% of your width + 10px (because of the padding) */ #footer {position: fixed; bottom: 0px; margin: 0 auto; width: 780px; /* See info above */ left: 50%; margin-left: -400px; height: 40px; background: #626262; border-top: 00px solid #333333; padding: 0px 10px 0px 10px; font-family: Arial, Helvetica, sans-serif; text-shadow: 1px 1px 1px #000; /* CSS3 Stylings - Creates the double top border */ -moz-box-shadow: 0px -1px 0px #161616; -webkit-box-shadow: 0px -1px 0px #161616; box-shadow: 0px -1px 0px #161616; /* CSS3 Rounded Corners */ -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; /* CSS3 Stylings - Creates the gradient background */ background: -moz-linear-gradient(top, #626262, #626262); /* BACKGORUND COLOUR FOR MENU */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#626262), to(#626262));} /* BACKGORUND COLOUR FOR MENU */ /* General typography stylings, paragraphs and H2 tags */ #footer h2 {font-size: 24px; line-height: 24px; color: #ffffff; /* COLOUR OF "KONTAKBESONDERHEDE" */ letter-spacing: -1px; font-weight: 400; padding: 0px 10px 0px 10px; margin: 12px 0;} #footer p {color: #ffffff; /* Laerskool Totiusdal part */ font-size: 13px; padding: 0 10px 0 10px; line-height: 18px; float: left; margin: 10px 0;} #footer img {border: none;} #footer a {color: #ff6600; /* Link colour of "Laerskool Totiusdal" */ text-decoration: none;} #footer li ul {list-style: none; padding: 0; margin: 0 0 12px 0;} #footer .strong {font-weight: bold;} /* Forcing a bold text */ #footer .italic {font-style: italic;} /* Forcing an italic text */ .clear {clear: both; /* Use this class between rows of content when you use columns */ display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;} /* Images containers */ #footer .imgshadow {background: #ffffff; /* Better style on dark background */ padding: 4px; /* Makes the light borders thanks to the background color */ border: 1px solid #333333; margin-top: 5px; /* CSS3 shadow */ -moz-box-shadow: 0px 0px 5px #000000; -webkit-box-shadow: 0px 0px 5px #000000; box-shadow: 0px 0px 5px #000000;} #footer .img_left {width: auto; /* Image sticks to the left */ float: left; margin: 5px 15px 5px 0px;} #footer .img_right {width: auto; /* Image sticks to the right */ float: right; margin: 5px 0px 5px 15px;} /* Black background text box */ #footer .black_box {background-color: #111111; padding: 4px 6px 4px 6px; margin-bottom: 6px; /* CSS 3 Rounded Corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; /* CSS 3 Inset Shadow */ -webkit-box-shadow: inset 0 0 5px #000000; -moz-box-shadow: inset 0 0 5px #000000; box-shadow: inset 0 0 5px #000000;} /* Social Icons */ #footer #social {float: center; /* Positionning of the social icons container */ width: auto; margin: 5px 15px 0px; padding: 0px; overflow: hidden;} #footer #social li {margin-right: 12px; /* 12px is the space between each one of them */ _margin-right: 0px; /* IE6 only */ float: left; width: 24px; padding: 0px; height: 32px; list-style: none;} #footer #social li:hover {margin-top: -1px;} /* Icons move 1px up on hover, you can remove this if you don't like */ /* Tooltips for social icons */ a.tooltip:hover {text-decoration: none;} /* The "span" defines the text appearing on mouse hover, these are basic stylings */ a.tooltip span {display: none; padding: 5px; bottom: 44px; position: relative; width: 55px; text-align: center; /* CSS3 Rounded Corners */ -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;} a.tooltip:hover span {display: block; /* Facebook icon hover se settings */ position: absolute; border: 1px solid #333333; background: #57544d; color: #ffffff; font-size: 13px; margin-left: -20px;} /* _______________________________________ 02 FOOTER - DROP DOWN MENU (DROP UP) _______________________________________ */ #footer_menu {margin: 0; padding: 0; width: auto;} #footer_menu li {list-style: none; float: left; font-size: 12px; padding: 12px 14px 14px 14px; border-right: 1px solid #111111; border-left: 1px solid #444444; background: #3e3e3e; /* CSS3 Stylings - Creates the gradient background */ /* BACKGROUND COLOUR FOR MENU */ background: -moz-linear-gradient(top, #57544D, #57544D); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#57544D), to(#57544D));} /* BACKGROUND COLOUR FOR MENU */ #footer_menu li:hover {background: #313131; /* CSS3 Stylings - Creates the gradient background */ background: -moz-linear-gradient(top, #57544D, #57544D); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#57544D), to(#57544D));} #footer_menu li a {display: block; color: #ffffff; /* KLEUR VAN WOORDE IN DIE MENE VOOR DIE MUIS DAAROOR BEWEEG */ text-decoration: none;} #footer_menu li a:hover {color: #ffffff;} #footer_menu .imgmenu {padding: 5px 8px 0px 8px; /* Used for the home item, text is here hidden and replaced by an image */ border: none; background: none;} #footer_menu .imgmenu a {background: url("../footer-img/home2.png") top left no-repeat; /* Used for the home item, text is here hidden and replaced by an image */ width: 36px; height: 30px;} #footer_menu li.imgmenu:hover {background: none;} #footer_menu li.imgmenu a:hover {background: url("../footer-img/home.png") top left no-repeat;} /* Drop Up */ /* You may have heard about drop down menus, the principle is here the same except that the content is going up instead of down */ #footer_menu li ul.dropup {display: none; width: 15em;} /* WIDTH FOR RIGHT MENU */ #footer_menu li:hover ul.dropup {display: block; position: absolute; margin: 0 0 0 -16px; bottom: 40px; /* Distance to the bottom of the browser */ background-color: #57544d; /* SKAKELS SE HOVER MENU BACKGROUND COLOUR */ border: 1px solid #111111; border-bottom: none; /* CSS3 Stylings - Rounded Corners */ -moz-border-radius: 7px 7px 0px 0px; -webkit-border-radius: 7px 7px 0px 0px; border-radius: 7px 7px 0px 0px;} #footer_menu li:hover li {float: none; /* Drop up default lists */ background: none; border: none; border-bottom: 1px solid #161616; padding: 12px 10px 12px 10px;} #footer_menu li:hover a {color: #ff6600;} /* Link colour when mouse does NOT hover on the link */ #footer_menu li:hover a:hover {color: #ff8888; /* Link colours when the mouse hover on the link */ } #footer_menu li:hover p {margin: 6px 0;} /* Right Panel */ #footer_menu .right {float: right; /* Use the right class to push the content to the right */ right: 10px;} /* _______________________________________ 03 FOOTER - COLUMNS CONTENT _______________________________________ */ /* Following the principles of the 960 grid, we define here 3 containers which can contain from 1 to 3 columns */ #footer .dropdown_1column, #footer .dropdown_2columns, #footer .dropdown_3columns {margin: 4px auto; position: absolute; padding: 10px 5px 10px 5px; display: none; text-align: left;} /* Drop Downs Sizes */ #footer .dropdown_1column {width: 180px;} #footer .dropdown_2columns {width: 430px;} #footer .dropdown_3columns {width: 660px;} /* Showing Drop Down on Mouse Hover - Left aligned */ #footer_menu li:hover .dropdown_1column, #footer_menu li:hover .dropdown_2columns, #footer_menu li:hover .dropdown_3columns {display: block; position: absolute; margin: 0 0 0 -16px; bottom: 40px; background-color: #57544d; /* OTHER MENUS - HOVER BACKGROUND COLOUR */ border: 1px solid #111111; /* CSS3 Stylings - Rounded Corners */ -moz-border-radius: 7px 7px 0px 0px; -webkit-border-radius: 7px 7px 0px 0px; border-radius: 7px 7px 0px 0px;} /* Columns sizes, they have to be placed within a dropdown_columns DIV */ #footer .col_1, #footer .col_2, #footer .col_3 {display: inline; float: left; position: relative; margin-left: 5px; margin-right: 5px;} #footer .col_1 {width: 170px;} #footer .col_2 {width: 390px;} #footer .col_3 {width: 650px;} /* Lists stylings */ #footer_menu li ul.simple {margin-left: 5px;} /* Reset stylings for other lists inside columns */ #footer_menu li ul.simple li {border: none; padding: 0px; width: 180px; line-height: 24px; margin-left: 5px;}