/*

Item Name : Sticky Footer 

Author URI : http://codecanyon.net/user/Pixelworkshop

Item URI : http://codecanyon.net/item/sticky-footer/168476

Version : 2.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-color: #666666;

	bottom: 0px;

	height: 35px;

	font-family: "ff-kievit-web-1","ff-kievit-web-2", lucida grande;

	border-top: 1px solid #666666;

	padding:0;

	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;

	z-index: 999;

}

	.footer_fullwidth {

		width: 100%;

		margin:0;

	}

	.footer_fixedwidth {

		margin:0 auto;

		width: 980px;

		left:50%;

		margin-left:-490px;

		-moz-border-radius: 4px 4px 0px 0px;

		-webkit-border-radius: 4px 4px 0px 0px;

		border-radius: 4px 4px 0px 0px;

	}



#footer li {

	float:left;

	border-right:1px solid #666666;

	list-style:none;

}

#footer li:hover,

#footer li.active {

	background-color:#121212;

}

#footer li:hover a {

	color:#dddddd;

}

#footer li a {

	padding:0px 10px;

	line-height:35px;

	display:block;

}

		#footer li .dropup {

	font-family: "franklin-gothic-ext-comp-urw-1","franklin-gothic-ext-comp-urw-2", lucida grande;

	text-transform:uppercase;

	text-align: center;

	font-size: 1.3em;

	font-weight: bold;

	color: white;

	text-decoration:none;

	padding-right:30px;

	background:url("/img/arrow-footer.png") no-repeat right 15px;

		}



#footer li .footer_dropup {

	position: absolute;

	padding:15px 0px 0px 0px;

	margin: 0 0 0 -1px;

	left:-9999em;

	bottom:35px; /* 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 li:hover .footer_dropup  {

	left:auto;

}

#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;

	margin:0;

}

#footer p {

	font-size:.8em;

	margin-bottom: 1em;

}

#footer h1, #footer h2 {

	padding-bottom:12px;

}

#footer h1, #footer h2, #footer h3 {

	margin-bottom:18px;

}

#footer h4, #footer h5, #footer h6 {

	margin-top: 10px;

	margin-bottom:12px;

}

#footer h1 {

	font-size:36px;

}

#footer h2 {

	font-size:30px; 

}

#footer h3 {

	font-size:28px; 

}

#footer h4 {

	font-size:21px; 

	line-height:24px;

}

#footer h5 {

	font-size:18px; 

	line-height: 19px;

}

#footer h6 {

	font-family:"Lucida Grande","Lucida Sans Unicode",sans-serif;

	font-size:14px; 

	text-transform:uppercase;

}

#footer img {

	border:none;

}



/* Separator */



#footer hr {

	border-top:1px solid #000;

	border-bottom:1px solid #222;

	border-left:none;

	border-right:none;

	height: 0px;

	margin-bottom:16px;

	margin-top:0px;

}



/* Simple Lists */



#footer ul, #footer ol {

	list-style:none;

	padding:0;

	margin:0 0 12px 0;

}

#footer ul li, #footer ol 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 ul li a, #footer ol li a {

	padding:0;

	margin:0;

	display:inline;

	line-height:18px;

}

#footer 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("../img/icons/calendar.png") no-repeat 0px 5px}

#footer .note {background:url("../img/icons/note.png") no-repeat 0px 5px}

#footer .archive {background:url("../img/icons/archive.png") no-repeat 0px 5px}

#footer .search {background:url("../img/icons/search.png") no-repeat 0px 5px}

#footer .help {background:url("../img/icons/help.png") no-repeat 0px 5px}

#footer .delete {background:url("../img/icons/delete.png") no-repeat 0px 5px}

#footer .favorite {background:url("../img/icons/favorite.png") no-repeat 0px 5px}

#footer .lock {background:url("../img/icons/lock.png") no-repeat 0px 5px}

#footer .briefcase {background:url("../img/icons/briefcase.png") no-repeat 0px 5px}

#footer .user {background:url("../img/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;

	border-spacing: 0px;

	border-collapse: collapse;

}

#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:0 45px 0 0;

	padding:0;

	border:none;

}

#footer li#social ul {

	float:right; /* Positionning of the social icons container */

	width:auto;

	margin:8px 0;

}

#footer li#social:hover {

	background:none;

}

#footer li#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;

	line-height:24px;

	position:relative;

	height:24px;

	width:55px;

	text-align:center;

	background:url("../img/tooltip-footer.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:1000;

	bottom: 0px; 

	right: 10px;

	width:35px;

	height:35px;

	background:url("../img/footer_button_up.png") right no-repeat #666666;

	display: block;

	-moz-border-radius: 4px 4px 0px 0px;

    -webkit-border-radius: 4px 4px 0px 0px;

    border-radius: 4px 4px 0px 0px;

}

a.trigger_fixed{

	margin:0 auto;

	left:50%;

	margin-left:447px;

}



a#footer_trigger.trigger_active {

	background:url("../img/footer_button_down.png") right no-repeat #666666;

}







/*  _____________________________________________________________________________



    6. COLORED ELEMENTS

    _____________________________________________________________________________  */







/* Links within the content */



#footer li div.footer_dropup a {color:#6a82a3;}

#footer li div.footer_dropup a:hover {color:#536987;}