help with drop down menu please

HTML & CSS
#1

this is my html code for the buttons[php]<?php
session_start();

if(isset($_SESSION['username'])){
	$username = $_SESSION['username'];
}

?>

site title 
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
	
	<link rel="stylesheet" href="css/demo.css">
	<link rel="stylesheet" href="css/font-awesome.css">
	<link rel="stylesheet" href="css/sky-mega-menu.css">
	
	<!--[if lt IE 9]>
		<link rel="stylesheet" href="css/sky-mega-menu-ie8.css">
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<!--[if lt IE 10]>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="js/jquery.placeholder.min.js"></script>
	<![endif]-->
<style type="text/css"></style>
</head>
<body class="bg-pink">
	<div class="body">
	
		<!-- mega menu -->
		<ul class="sky-mega-menu sky-mega-menu-anim-flip sky-mega-menu-response-to-icons">
			<!-- home -->
			<li>
	<a href="area.php">Home</a>
			</li>
			<!--/ home -->
			
			<!-- about -->
			<li aria-haspopup="true">
				<a href="#">Messages</a>
			</li>
			<!--/ about -->
			
			<!-- news -->
			<li aria-haspopup="true">
				<a href="#">Account</a>
			</li>
			<!--/ news -->
			
			<!-- portfolio -->
			<li aria-haspopup="true">
				<a href="#">Friends</a>
			</li>
			<!--/ portfolio -->
			
			<!-- blog -->

			<li>
				
                                   <a href="/forums/">Forums</a>
			</li>

			<!--/ blog -->
			
			<!-- contacts -->
			<li>
				<a href="/chat/">Chatroom</a>
			</li>
			<!--/ contacts -->
			
			<!-- contacts -->
			<li>
				<a href="#">Notifications</a>
			</li>
			<!--/ contacts -->
				<li class="right">

<?php if(isset($_SESSION['username'])){ echo " ".$_SESSION["username"].""; } ?> 

  • 				<a href="logout.php">Logout</a>
			</li>
			<!--/ contacts -->
		</ul>
		<!--/ mega menu -->
		
		
		<div id="container">
			<div id="left_col">
				<h1>Left Colomn</h1>
			</div>
			<div id="middle_col">
				<h1>Middle Colomn</h1>
			</div>
			<div id="left_col">
				<h1>Right Colomn</h1>
			</div>
		</div>
		
	
		
	</div>

	<footer style="width: 100%; background: #333;height:40px;margin-top: 40px"></footer>

	
	<style>
		#container{width: 100%; height:550px; padding-top: 20px; color:#fff}
		#left_col{ width: 25%; background: rgba(0,0,0,.7); height: 550px;float:left; text-align:center}
		#middle_col{ width: 50%; background: rgba(0,0,0,.5); height: 550px;float:left;text-align:center}
		
		span{color:#280409;text-transform: uppercase;}
		#screenName{text-align: right; font: 12px Verdana !important; width:100%; padding-top:0px }
	</style>
    [/php]

    and here are the .css files. how can i add a drop down menu to the account button.

    • #2

    sky-mega-menu.css

    [php]@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

    //
    /* defaults */
    /    /
    .sky-mega-menu,
    .sky-mega-menu * {
    margin: 0;
    padding: 0;
    outline: none;
    border: 0;
    background: none;
    }
    .sky-mega-menu {
    font-family: ‘Open Sans’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
    }

    //
    /* level 1 */
    /    /
    .sky-mega-menu {
    position: relative;
    z-index: 999;
    background: #333;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
    font-size: 0;
    line-height: 0;
    text-align: right;
    }
    .sky-mega-menu:after {
    content: ‘’;
    display: table;
    clear: both;
    }
    .sky-mega-menu li {
    position: relative;
    display: inline-block;
    float: left;
    padding: 5px;
    border-style: solid;
    border-color: #999;
    border-right-width: 1px;
    font-size: 13px;
    line-height: 45px;
    text-align: left;
    white-space: nowrap;
    }
    .sky-mega-menu li a {
    display: block;
    padding: 0 20px;
    text-decoration: none;
    color: #ccc;
    transition: background 0.4s, color 0.4s;
    -o-transition: background 0.4s, color 0.4s;
    -ms-transition: background 0.4s, color 0.4s;
    -moz-transition: background 0.4s, color 0.4s;
    -webkit-transition: background 0.4s, color 0.4s;
    }
    .sky-mega-menu li > div {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: -9999px;
    margin-top: 8px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    opacity: 0;
    -o-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    -o-transition: -o-transform 0.4s, opacity 0.4s;
    -ms-transition: -ms-transform 0.4s, opacity 0.4s;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    }
    .sky-mega-menu li > div:after {
    content: ‘’;
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 8px;
    background: transparent;
    }
    .sky-mega-menu li > div:before {
    content: ‘’;
    position: absolute;
    bottom: 100%;
    left: 24px;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(255,255,255,0.9);
    border-left: 5px solid transparent;
    }
    .sky-mega-menu li:hover > a,
    .sky-mega-menu li.current > a {
    background: #2da5da;
    color: #fff;
    }
    .sky-mega-menu li:hover > div {
    left: 0;
    opacity: 1;
    -webkit-transform: translate(0, 0);
    }
    .sky-mega-menu .right {
    float: none;
    border-right-width: 0;
    border-left-width: 1px;
    }
    .sky-mega-menu .right > div {
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
    }
    .sky-mega-menu .right:hover > div {
    right: 0;
    left: auto;
    }
    .sky-mega-menu .right:hover > div:before {
    right: 24px;
    left: auto;
    }
    .sky-mega-menu .switcher {
    display: none;
    }

    //
    /* level 2+ */
    /    /
    .sky-mega-menu li li {
    display: block;
    float: none;
    border-width: 0;
    border-top-width: 1px;
    line-height: 21px;
    white-space: normal;
    }
    .sky-mega-menu li li:first-child {
    border-top: 0;
    }
    .sky-mega-menu li li a {
    padding-top: 12px;
    padding-bottom: 12px;
    }
    .sky-mega-menu li li > div {
    top: 0;
    margin: 0 0 0 8px;
    }
    .sky-mega-menu li li > div:after {
    top: 0;
    right: 100%;
    bottom: auto;
    left: auto;
    width: 8px;
    height: 100%;
    }
    .sky-mega-menu li li > div:before {
    top: 22px;
    right: 100%;
    bottom: auto;
    left: auto;
    border-top: 5px solid transparent;
    border-right: 5px solid rgba(255,255,255,0.9);
    border-bottom: 5px solid transparent;
    }
    .sky-mega-menu li li:hover > div {
    left: 100%;
    }
    .sky-mega-menu .right li > div {
    margin: 0 8px 0 0;
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
    }
    .sky-mega-menu .right li > div:after {
    right: auto;
    left: 100%;
    }
    .sky-mega-menu .right li > div:before {
    right: auto;
    left: 100%;
    border-right: none;
    border-left: 5px solid rgba(255,255,255,0.9);
    }
    .sky-mega-menu .right li:hover > div {
    right: 100%;
    left: auto;
    }

    //
    /* positions */
    /    /
    .sky-mega-menu-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    }
    .sky-mega-menu-pos-bottom li > div {
    top: auto;
    bottom: 100%;
    margin: 0 0 8px;
    -o-transform-origin-y: 100%;
    -ms-transform-origin-y: 100%;
    -moz-transform-origin-y: 100%;
    -webkit-transform-origin-y: 100%;
    }
    .sky-mega-menu-pos-bottom li > div:after {
    top: 100%;
    bottom: auto;
    }
    .sky-mega-menu-pos-bottom li > div:before {
    top: 100%;
    bottom: auto;
    border-top: 5px solid rgba(255,255,255,0.9);
    border-right: 5px solid transparent;
    border-bottom: none;
    border-left: 5px solid transparent;
    }
    .sky-mega-menu-pos-bottom li li > div {
    top: auto;
    bottom: 0;
    }
    .sky-mega-menu-pos-bottom li li > div:before {
    top: auto;
    bottom: 22px;
    }
    .sky-mega-menu-pos-bottom.sky-mega-menu-fixed {
    top: auto;
    bottom: 0;
    }

    .sky-mega-menu-pos-left li,
    .sky-mega-menu-pos-right li {
    display: block;
    float: none;
    border-width: 0;
    border-top-width: 1px;
    }
    .sky-mega-menu-pos-left li:first-child,
    .sky-mega-menu-pos-right li:first-child {
    border-top: 0;
    }
    .sky-mega-menu-pos-left li > div,
    .sky-mega-menu-pos-right li > div {
    top: 0;
    }
    .sky-mega-menu-pos-left li > div {
    margin: 0 0 0 8px;
    }
    .sky-mega-menu-pos-right li > div {
    margin: 0 8px 0 0;
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
    }
    .sky-mega-menu-pos-left li > div:after,
    .sky-mega-menu-pos-right li > div:after {
    top: 0;
    bottom: auto;
    width: 8px;
    height: 100%;
    }
    .sky-mega-menu-pos-left li > div:after {
    right: 100%;
    left: auto;
    }
    .sky-mega-menu-pos-right li > div:after {
    right: auto;
    left: 100%;
    }
    .sky-mega-menu-pos-left li > div:before,
    .sky-mega-menu-pos-right li > div:before {
    top: 22px;
    bottom: auto;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    }
    .sky-mega-menu-pos-left li > div:before {
    right: 100%;
    left: auto;
    border-right: 5px solid rgba(255,255,255,0.9);
    }
    .sky-mega-menu-pos-right li > div:before {
    right: auto;
    left: 100%;
    border-left: 5px solid rgba(255,255,255,0.9);
    }
    .sky-mega-menu-pos-left li:hover > div {
    left: 100%;
    }
    .sky-mega-menu-pos-right li:hover > div {
    right: 100%;
    left: auto;
    }
    .sky-mega-menu-pos-left .bottom > div,
    .sky-mega-menu-pos-right .bottom > div {
    top: auto;
    bottom: 0;
    -o-transform-origin-y: 100%;
    -ms-transform-origin-y: 100%;
    -moz-transform-origin-y: 100%;
    -webkit-transform-origin-y: 100%;
    }
    .sky-mega-menu-pos-left .bottom > div:before,
    .sky-mega-menu-pos-right .bottom > div:before {
    top: auto;
    bottom: 22px;
    }
    .sky-mega-menu-pos-right li li > div {
    margin: 0 8px 0 0;
    -o-transform-origin-x: 100%;
    -ms-transform-origin-x: 100%;
    -moz-transform-origin-x: 100%;
    -webkit-transform-origin-x: 100%;
    }
    .sky-mega-menu-pos-right li li > div:after {
    right: auto;
    left: 100%;
    }
    .sky-mega-menu-pos-right li li > div:before {
    right: auto;
    left: 100%;
    border-right: none;
    border-left: 5px solid rgba(255,255,255,0.9);
    }
    .sky-mega-menu-pos-right li li:hover > div {
    right: 100%;
    left: auto;
    }
    .sky-mega-menu-pos-left.sky-mega-menu-fixed {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: auto;
    }
    .sky-mega-menu-pos-right.sky-mega-menu-fixed {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: auto;
    }

    //
    /* animations */
    /    /
    .sky-mega-menu-anim-slide li > div {
    -o-transform: translate(0, 60px);
    -ms-transform: translate(0, 60px);
    -moz-transform: translate(0, 60px);
    -webkit-transform: translate(0, 60px);
    }
    .sky-mega-menu-pos-bottom.sky-mega-menu-anim-slide li > div {
    -o-transform: translate(0, -60px);
    -ms-transform: translate(0, -60px);
    -moz-transform: translate(0, -60px);
    -webkit-transform: translate(0, -60px);
    }
    .sky-mega-menu-anim-slide li:hover > div {
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    }
    .sky-mega-menu-anim-scale li > div {
    -o-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    }
    .sky-mega-menu-anim-scale li:hover > div {
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    }
    .sky-mega-menu-anim-flip {
    perspective: 2000px;
    -o-perspective: 2000px;
    -moz-perspective: 2000px;
    -webkit-perspective: 2000px;
    }
    .sky-mega-menu-anim-flip li > div {
    transform-style: preserve-3d;
    -o-transform: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-75deg);
    -o-transform: rotateX(-75deg);
    -moz-transform: rotateX(-75deg);
    -webkit-transform: rotateX(-75deg);
    }
    .sky-mega-menu-anim-flip li:hover > div {
    transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    }

    //
    /* grid */
    /    /
    .sky-mega-menu .grid-column {
    float: left;
    border-color: #d9d9d9;
    border-left-width: 1px;
    border-left-style: solid;
    }
    .sky-mega-menu .grid-column:first-child {
    margin-left: 0;
    border-left: 0;
    }
    .sky-mega-menu .grid-column2,
    .sky-mega-menu .grid-container2 {
    width: 155px;
    }
    .sky-mega-menu .grid-column3,
    .sky-mega-menu .grid-container3 {
    width: 233px;
    }
    .sky-mega-menu .grid-column4,
    .sky-mega-menu .grid-container4 {
    width: 311px;
    }
    .sky-mega-menu .grid-column5,
    .sky-mega-menu .grid-container5 {
    width: 389px;
    }
    .sky-mega-menu .grid-column6,
    .sky-mega-menu .grid-container6 {
    width: 467px;
    }
    .sky-mega-menu .grid-column7,
    .sky-mega-menu .grid-container7 {
    width: 545px;
    }
    .sky-mega-menu .grid-column8,
    .sky-mega-menu .grid-container8 {
    width: 623px;
    }
    .sky-mega-menu .grid-column9,
    .sky-mega-menu .grid-container9 {
    width: 701px;
    }
    .sky-mega-menu .grid-column10,
    .sky-mega-menu .grid-container10 {
    width: 779px;
    }
    .sky-mega-menu .grid-column11,
    .sky-mega-menu .grid-container11 {
    width: 857px;
    }
    .sky-mega-menu .grid-column12,
    .sky-mega-menu .grid-container12 {
    width: 935px;
    }

    //
    /* icons */
    /    /
    .sky-mega-menu li a > .fa {
    display: block;
    float: left;
    width: 16px;
    margin: 0 10px 0 -4px;
    font-size: 16px;
    line-height: inherit;
    text-align: center;
    }
    .sky-mega-menu li a > .fa-single {
    float: none;
    margin: 0;
    }
    .sky-mega-menu li a > .fa-indicator {
    position: relative;
    top: -1px;
    float: none;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin: 0 -10px 0 10px;
    font-size: 9px;
    line-height: 1;
    text-align: right;
    }
    .sky-mega-menu li li a > .fa-indicator {
    top: 0;
    float: right;
    display: block;
    line-height: inherit;
    }

    //
    /* forms */
    /    /
    .sky-mega-menu form fieldset {
    display: block;
    padding: 25px 30px;
    }
    .sky-mega-menu form fieldset + fieldset {
    border-top: 1px solid rgba(0,0,0,.1);
    }
    .sky-mega-menu form section {
    margin-bottom: 20px;
    }
    .sky-mega-menu form .input,
    .sky-mega-menu form .textarea,
    .sky-mega-menu form .radio,
    .sky-mega-menu form .checkbox,
    .sky-mega-menu form .button {
    position: relative;
    display: block;
    }
    .sky-mega-menu form .input input,
    .sky-mega-menu form .textarea textarea {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    height: 39px;
    padding: 8px 10px;
    outline: none;
    border: 2px solid #e5e5e5;
    border-radius: 0;
    background: #fff;
    font: 13px/19px ‘Open Sans’, Helvetica, Arial, sans-serif;
    color: #404040;
    appearance: normal;
    -moz-appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.3s;
    -o-transition: border-color 0.3s;
    -ms-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    -webkit-transition: border-color 0.3s;
    }
    .sky-mega-menu form .textarea textarea {
    height: auto;
    resize: none;
    }
    .sky-mega-menu form .button {
    float: right;
    height: 39px;
    overflow: hidden;
    margin-left: 20px;
    padding: 0 20px;
    outline: none;
    border: 0;
    background-color: #2da5da;
    font: 300 13px/39px ‘Open Sans’, Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    }
    .sky-mega-menu form .fa-append {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 29px;
    height: 29px;
    padding-left: 3px;
    border-left: 1px solid #e5e5e5;
    font-size: 15px;
    line-height: 29px;
    text-align: center;
    color: #ccc;
    }
    .sky-mega-menu form .input .fa-append + input,
    .sky-mega-menu form .textarea .fa-append + textarea {
    padding-right: 46px;
    }
    .sky-mega-menu form .row {
    margin: 0 -15px;
    }
    .sky-mega-menu form .row:after {
    content: ‘’;
    display: table;
    clear: both;
    }
    .sky-mega-menu form .col {
    float: left;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    }
    .sky-mega-menu form .col-6 {
    width: 50%;
    }
    .sky-mega-menu form .input:hover input,
    .sky-mega-menu form .textarea:hover textarea,
    .sky-mega-menu form .checkbox:hover i {
    border-color: #8dc9e5;
    }
    .sky-mega-menu form .button:hover {
    opacity: 1;
    }
    .sky-mega-menu form .input input:focus,
    .sky-mega-menu form .textarea textarea:focus,
    .sky-mega-menu form .checkbox input:focus + i {
    border-color: #2da5da;
    }
    .sky-mega-menu .search {
    border-left: 0;
    }
    .sky-mega-menu .search .input {
    margin: 3px 3px 3px 3px;
    }
    .sky-mega-menu .search .input input {
    width: 240px;
    padding-right: 65px;
    }
    .sky-mega-menu .search .button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    }

    //
    /* pad */
    /    /
    @media screen and (max-width: 1000px) {
    .sky-mega-menu li a {
    padding: 0 15px;
    }
    .sky-mega-menu li a > .fa-indicator {
    margin-right: -5px;
    }

    .sky-mega-menu .grid-column2,
.sky-mega-menu .grid-container2 {
	width: 117px;
}
.sky-mega-menu .grid-column3,
.sky-mega-menu .grid-container3 {
	width: 176px;
}
.sky-mega-menu .grid-column4,
.sky-mega-menu .grid-container4 {
	width: 235px;
}
.sky-mega-menu .grid-column5,
.sky-mega-menu .grid-container5 {
	width: 294px;
}
.sky-mega-menu .grid-column6,
.sky-mega-menu .grid-container6 {
	width: 353px;
}
.sky-mega-menu .grid-column7,
.sky-mega-menu .grid-container7 {
	width: 412px;
}
.sky-mega-menu .grid-column8,
.sky-mega-menu .grid-container8 {
	width: 471px;
}
.sky-mega-menu .grid-column9,
.sky-mega-menu .grid-container9 {
	width: 530px;
}
.sky-mega-menu .grid-column10,
.sky-mega-menu .grid-container10 {
	width: 589px;
}
.sky-mega-menu .grid-column11,
.sky-mega-menu .grid-container11 {
	width: 648px;
}
.sky-mega-menu .grid-column12,
.sky-mega-menu .grid-container12 {
	width: 707px;
}

    }

    //
    /* phone */
    /    /
    @media screen and (max-width: 767px) {
    body {
    -webkit-text-size-adjust: none;
    }
    .sky-mega-menu .grid-column {
    float: none;
    width: auto;
    margin: 0;
    border: 0;
    border-top: 1px solid #d9d9d9;
    }
    .sky-mega-menu .grid-column:first-child {
    border-top: 0;
    }
    .sky-mega-menu form fieldset {
    display: block;
    padding: 15px 20px;
    }
    .sky-mega-menu form section {
    margin-bottom: 10px;
    }
    .sky-mega-menu form .row {
    margin: 0 -10px;
    }
    .sky-mega-menu form .col {
    padding-right: 10px;
    padding-left: 10px;
    }

    .sky-mega-menu-response-to-stack > li {
	display: block;
	float: none;
	border: 0;
	border-top: 1px solid #d9d9d9;
}
.sky-mega-menu-response-to-stack > li:first-child {
	border-top: 0;
}
.sky-mega-menu-response-to-switcher > li {
	display: none;
	float: none;
	border: 0;
}
.sky-mega-menu-response-to-switcher > .switcher {
	display: block;
}
.sky-mega-menu-response-to-switcher:hover > li {
	display: block;
	border-top: 1px solid #d9d9d9;		
}
.sky-mega-menu-response-to-switcher:hover > .switcher {
	display: none;	
}
.sky-mega-menu-response-to-stack li > div,
.sky-mega-menu-response-to-stack li > [class^="grid-container"],
.sky-mega-menu-response-to-switcher li > div,
.sky-mega-menu-response-to-switcher li > [class^="grid-container"] {
	top: 100%;
	bottom: auto;
	width: auto;
	margin: 8px 0 0 0;		
	-o-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
}
.sky-mega-menu-response-to-stack li > div:after,
.sky-mega-menu-response-to-switcher li > div:after {
	top: auto;
	right: auto;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 8px;
}
.sky-mega-menu-response-to-stack li > div:before,
.sky-mega-menu-response-to-switcher li > div:before {
	display: none;
}
.sky-mega-menu-response-to-stack li a > .fa,
.sky-mega-menu-response-to-switcher li a > .fa {
	margin: 0 15px 0 0;
}
.sky-mega-menu-response-to-stack li:hover > div,
.sky-mega-menu-response-to-stack li:hover > [class^="grid-container"],
.sky-mega-menu-response-to-switcher li:hover > div,
.sky-mega-menu-response-to-switcher li:hover > [class^="grid-container"] {
	right: 0;
	left: 51px;
}
.sky-mega-menu-response-to-stack li li > div,
.sky-mega-menu-response-to-switcher li li > div {
	top: 100%;
	width: auto;
	margin: 8px 0 0 0;
}
.sky-mega-menu-response-to-stack li li > div:after,
.sky-mega-menu-response-to-switcher li li > div:after {
	top: auto;
	right: auto;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 8px;
}
.sky-mega-menu-response-to-stack li li:hover > div,
.sky-mega-menu-response-to-switcher li li:hover > div {
	right: 0;
	left: 51px;
}
.sky-mega-menu-response-to-stack .search .input input,
.sky-mega-menu-response-to-switcher .search .input input {
	width: 100%;
}

    .sky-mega-menu-response-to-icons li {
    position: static;
    font-size: 0;
    }
    .sky-mega-menu-response-to-icons li a {
    padding: 0 10px;
    }
    .sky-mega-menu-response-to-icons li > div,
    .sky-mega-menu-response-to-icons li > [class^=“grid-container”] {
    width: 100%;
    }
    .sky-mega-menu-response-to-icons li > div:before {
    display: none;
    }
    .sky-mega-menu-response-to-icons li a > .fa {
    margin: 0;
    }
    .sky-mega-menu-response-to-icons li a > .fa-indicator {
    position: static;
    display: block;
    float: right;
    margin-left: 10px;
    line-height: 45px;
    }
    .sky-mega-menu-response-to-icons li li {
    position: relative;
    font-size: 13px;
    }
    .sky-mega-menu-response-to-icons li li > div,
    .sky-mega-menu-response-to-icons .right li > div {
    top: 100%;
    margin: 8px 0 0 0;
    }
    .sky-mega-menu-response-to-icons li li > div:after,
    .sky-mega-menu-response-to-icons .right li > div:after {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 8px;
    }
    .sky-mega-menu-response-to-icons li li:hover > div,
    .sky-mega-menu-response-to-icons .right li:hover > div {
    right: 0;
    left: 41px;
    width: auto;
    }
    .sky-mega-menu-response-to-icons li li a > .fa {
    margin-right: 10px;
    }
    .sky-mega-menu-response-to-icons li li a > .fa-indicator {
    margin-right: 0px;
    }
    .sky-mega-menu-response-to-icons.sky-mega-menu-anim-flip li li > div {
    top: 100%;
    margin: 8px 0 0 0;
    transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    }
    .sky-mega-menu-pos-bottom.sky-mega-menu-response-to-icons li li > div {
    top: auto;
    bottom: 100%;
    margin: 0 0 8px 0;
    }
    .sky-mega-menu-pos-bottom.sky-mega-menu-response-to-icons li li > div:after {
    top: 100%;
    bottom: auto;
    }
    }[/php]

    #3

    sky-forms.css

    [php]
    //
    /* defaults */
    /    /
    .sky-form {
    margin: 0;
    outline: none;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
    font: 13px/1.55 ‘Open Sans’, Helvetica, Arial, sans-serif;
    color: #666;
    }
    .sky-form header {
    display: block;
    padding: 20px 30px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    background: rgba(248,248,248,.9);
    font-size: 25px;
    font-weight: 300;
    color: #232323;
    }
    .sky-form fieldset {
    display: block;
    padding: 25px 30px 5px;
    border: none;
    background: rgba(255,255,255,.9);
    }
    .sky-form fieldset + fieldset {
    border-top: 1px solid rgba(0,0,0,.1);
    }
    .sky-form section {
    margin-bottom: 20px;
    }
    .sky-form footer {
    display: block;
    padding: 15px 30px 25px;
    border-top: 1px solid rgba(0,0,0,.1);
    background: rgba(248,248,248,.9);
    }
    .sky-form footer:after {
    content: ‘’;
    display: table;
    clear: both;
    }
    .sky-form a {
    color: #2da5da;
    }
    .sky-form .label {
    display: block;
    margin-bottom: 6px;
    line-height: 19px;
    font-weight: 400;
    }
    .sky-form .label.col {
    margin: 0;
    padding-top: 10px;
    }
    .sky-form .note {
    margin-top: 6px;
    padding: 0 1px;
    font-size: 11px;
    line-height: 15px;
    color: #999;
    }
    .sky-form .input,
    .sky-form .select,
    .sky-form .textarea,
    .sky-form .radio,
    .sky-form .checkbox,
    .sky-form .toggle,
    .sky-form .button {
    position: relative;
    display: block;
    }
    .sky-form .input input,
    .sky-form .select select,
    .sky-form .textarea textarea {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    height: 39px;
    padding: 8px 10px;
    outline: none;
    border-width: 2px;
    border-style: solid;
    border-radius: 0;
    background: #fff;
    font: 15px/19px ‘Open Sans’, Helvetica, Arial, sans-serif;
    color: #404040;
    appearance: normal;
    -moz-appearance: none;
    -webkit-appearance: none;
    }
    .sky-form .progress {
    float: right;
    margin-top: 10px;
    line-height: 39px;
    color: #232323;
    }

    //
    /* captcha inputs */
    /    /
    .sky-form .input-captcha img {
    position: absolute;
    top: 2px;
    right: 2px;
    border-left: 1px solid #e5e5e5;
    }

    //
    /* file inputs */
    /    /
    .sky-form .input-file .button {
    position: absolute;
    top: 4px;
    right: 4px;
    float: none;
    height: 31px;
    margin: 0;
    padding: 0 20px;
    font-size: 13px;
    line-height: 31px;
    }
    .sky-form .input-file .button:hover {
    box-shadow: none;
    }
    .sky-form .input-file .button input {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    font-size: 30px;
    cursor: pointer;
    opacity: 0;
    }

    //
    /* selects */
    /    /
    .sky-form .select i {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 11px;
    background: #fff;
    box-shadow: 0 0 0 12px #fff;
    pointer-events: none;
    }
    .sky-form .select i:after,
    .sky-form .select i:before {
    content: ‘’;
    position: absolute;
    right: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    }
    .sky-form .select i:after {
    bottom: 0;
    border-top: 4px solid #404040;
    }
    .sky-form .select i:before {
    top: 0;
    border-bottom: 4px solid #404040;
    }
    .sky-form .select-multiple select {
    height: auto;
    }

    //
    /* textareas */
    /    /
    .sky-form .textarea textarea {
    height: auto;
    resize: none;
    }
    .sky-form .textarea-resizable textarea {
    resize: vertical;
    }
    .sky-form .textarea-expandable textarea {
    height: 39px;
    }
    .sky-form .textarea-expandable textarea:focus {
    height: auto;
    }

    //
    /* radios and checkboxes */
    /    /
    .sky-form .radio,
    .sky-form .checkbox {
    margin-bottom: 4px;
    padding-left: 27px;
    font-size: 15px;
    line-height: 27px;
    color: #404040;
    cursor: pointer;
    }
    .sky-form .radio:last-child,
    .sky-form .checkbox:last-child {
    margin-bottom: 0;
    }
    .sky-form .radio input,
    .sky-form .checkbox input {
    position: absolute;
    left: -9999px;
    }
    .sky-form .radio i,
    .sky-form .checkbox i {
    position: absolute;
    top: 5px;
    left: 0;
    display: block;
    width: 13px;
    height: 13px;
    outline: none;
    border-width: 2px;
    border-style: solid;
    background: #fff;
    }
    .sky-form .radio i {
    border-radius: 50%;
    }
    .sky-form .radio input + i:after,
    .sky-form .checkbox input + i:after {
    position: absolute;
    opacity: 0;
    -ms-transition: opacity 0.1s;
    -moz-transition: opacity 0.1s;
    -webkit-transition: opacity 0.1s;
    }
    .sky-form .radio input + i:after {
    content: ‘’;
    top: 4px;
    left: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    }
    .sky-form .checkbox input + i:after {
    content: ‘\f00c’;
    top: -1px;
    left: -1px;
    width: 15px;
    height: 15px;
    font: normal 12px/16px FontAwesome;
    text-align: center;
    }
    .sky-form .radio input:checked + i:after,
    .sky-form .checkbox input:checked + i:after {
    opacity: 1;
    }
    .sky-form .inline-group {
    margin: 0 -30px -4px 0;
    }
    .sky-form .inline-group:after {
    content: ‘’;
    display: table;
    clear: both;
    }
    .sky-form .inline-group .radio,
    .sky-form .inline-group .checkbox {
    float: left;
    margin-right: 30px;
    }
    .sky-form .inline-group .radio:last-child,
    .sky-form .inline-group .checkbox:last-child {
    margin-bottom: 4px;
    }

    //
    /* toggles */
    /    /
    .sky-form .toggle {
    margin-bottom: 4px;
    padding-right: 61px;
    font-size: 15px;
    line-height: 27px;
    color: #404040;
    cursor: pointer;
    }
    .sky-form .toggle:last-child {
    margin-bottom: 0;
    }
    .sky-form .toggle input {
    position: absolute;
    left: -9999px;
    }
    .sky-form .toggle i {
    content: ‘’;
    position: absolute;
    top: 4px;
    right: 0;
    display: block;
    width: 49px;
    height: 17px;
    border-width: 2px;
    border-style: solid;
    border-radius: 12px;
    background: #fff;
    }
    .sky-form .toggle i:after {
    content: ‘OFF’;
    position: absolute;
    top: 2px;
    right: 8px;
    left: 8px;
    font-style: normal;
    font-size: 9px;
    line-height: 13px;
    font-weight: 700;
    text-align: left;
    color: #5f5f5f;
    }
    .sky-form .toggle i:before {
    content: ‘’;
    position: absolute;
    z-index: 1;
    top: 4px;
    right: 4px;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    opacity: 1;
    -ms-transition: right 0.2s;
    -moz-transition: right 0.2s;
    -webkit-transition: right 0.2s;
    }
    .sky-form .toggle input:checked + i:after {
    content: ‘ON’;
    text-align: right;
    }
    .sky-form .toggle input:checked + i:before {
    right: 36px;
    }

    //
    /* ratings */
    /    /
    .sky-form .rating {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 27px;
    color: #404040;
    }
    .sky-form .rating:last-child {
    margin-bottom: 0;
    }
    .sky-form .rating input {
    position: absolute;
    left: -9999px;
    }
    .sky-form .rating label {
    display: block;
    float: right;
    height: 17px;
    margin-top: 5px;
    padding: 0 2px;
    font-size: 17px;
    line-height: 17px;
    cursor: pointer;
    }

    //
    /* buttons */
    /    /
    .sky-form .button {
    float: right;
    height: 39px;
    overflow: hidden;
    margin: 10px 0 0 20px;
    padding: 0 25px;
    outline: none;
    border: 0;
    font: 300 15px/39px ‘Open Sans’, Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    }
    .sky-form .button-uploading {
    position: relative;
    color: transparent;
    cursor: default;
    }
    .sky-form .button-uploading:after {
    content: ‘Uploading…’;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    -o-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -webkit-animation: blink 1s linear infinite;
    }
    @-o-keyframes blink
    {
    0% {opacity: 1}
    50% {opacity: 0.3}
    100% {opacity: 1}
    }
    @-ms-keyframes blink
    {
    0% {opacity: 1}
    50% {opacity: 0.3}
    100% {opacity: 1}
    }
    @-moz-keyframes blink
    {
    0% {opacity: 1}
    50% {opacity: 0.3}
    100% {opacity: 1}
    }
    @-webkit-keyframes blink
    {
    0% {opacity: 1}
    50% {opacity: 0.3}
    100% {opacity: 1}
    }

    //
    /* icons */
    /    /
    .sky-form .icon-append,
    .sky-form .icon-prepend {
    position: absolute;
    top: 5px;
    width: 29px;
    height: 29px;
    font-size: 15px;
    line-height: 29px;
    text-align: center;
    }
    .sky-form .icon-append {
    right: 5px;
    padding-left: 3px;
    border-left-width: 1px;
    border-left-style: solid;
    }
    .sky-form .icon-prepend {
    left: 5px;
    padding-right: 3px;
    border-right-width: 1px;
    border-right-style: solid;
    }
    .sky-form .input .icon-prepend + input,
    .sky-form .textarea .icon-prepend + textarea {
    padding-left: 46px;
    }
    .sky-form .input .icon-append + input,
    .sky-form .textarea .icon-append + textarea {
    padding-right: 46px;
    }
    .sky-form .input .icon-prepend + .icon-append + input,
    .sky-form .textarea .icon-prepend + .icon-append + textarea {
    padding-left: 46px;
    }

    //
    /* grid */
    /    /
    .sky-form .row {
    margin: 0 -15px;
    }
    .sky-form .row:after {
    content: ‘’;
    display: table;
    clear: both;
    }
    .sky-form .col {
    float: left;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    }
    .sky-form .col-1 {
    width: 8.33%;
    }
    .sky-form .col-2 {
    width: 16.66%;
    }
    .sky-form .col-3 {
    width: 25%;
    }
    .sky-form .col-4 {
    width: 33.33%;
    }
    .sky-form .col-5 {
    width: 41.66%;
    }
    .sky-form .col-6 {
    width: 50%;
    }
    .sky-form .col-7 {
    width: 58.33%;
    }
    .sky-form .col-8 {
    width: 66.67%;
    }
    .sky-form .col-9 {
    width: 75%;
    }
    .sky-form .col-10 {
    width: 83.33%;
    }
    .sky-form .col-11 {
    width: 91.66%;
    }
    @media screen and (max-width: 600px) {
    .sky-form .col {
    float: none;
    width: 100%;
    }
    }

    //
    /* tooltips */
    /    /
    .sky-form .tooltip {
    position: absolute;
    z-index: 1;
    left: -9999px;
    padding: 2px 8px 3px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
    background: rgba(0,0,0,0.9);
    color: #fff;
    opacity: 0;
    -ms-transition: margin 0.3s, opacity 0.3s;
    -moz-transition: margin 0.3s, opacity 0.3s;
    -webkit-transition: margin 0.3s, opacity 0.3s;
    }
    .sky-form .tooltip:after {
    content: ‘’;
    position: absolute;
    }
    .sky-form .input input:focus + .tooltip,
    .sky-form .textarea textarea:focus + .tooltip {
    opacity: 1;
    }

    .sky-form .tooltip-top-right {
    bottom: 100%;
    margin-bottom: 15px;
    }
    .sky-form .tooltip-top-right:after {
    top: 100%;
    right: 16px;
    border-top: 4px solid rgba(0,0,0,0.9);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    }
    .sky-form .input input:focus + .tooltip-top-right,
    .sky-form .textarea textarea:focus + .tooltip-top-right {
    right: 0;
    left: auto;
    margin-bottom: 5px;
    }

    .sky-form .tooltip-top-left {
    bottom: 100%;
    margin-bottom: 15px;
    }
    .sky-form .tooltip-top-left:after {
    top: 100%;
    left: 16px;
    border-top: 4px solid rgba(0,0,0,0.9);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    }
    .sky-form .input input:focus + .tooltip-top-left,
    .sky-form .textarea textarea:focus + .tooltip-top-left {
    right: auto;
    left: 0;
    margin-bottom: 5px;
    }

    .sky-form .tooltip-right {
    top: 9px;
    white-space: nowrap;
    margin-left: 15px;
    }
    .sky-form .tooltip-right:after {
    top: 6px;
    right: 100%;
    border-top: 4px solid transparent;
    border-right: 4px solid rgba(0,0,0,0.9);
    border-bottom: 4px solid transparent;
    }
    .sky-form .input input:focus + .tooltip-right,
    .sky-form .textarea textarea:focus + .tooltip-right {
    left: 100%;
    margin-left: 5px;
    }

    .sky-form .tooltip-left {
    top: 9px;
    white-space: nowrap;
    margin-right: 15px;
    }
    .sky-form .tooltip-left:after {
    top: 6px;
    left: 100%;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid rgba(0,0,0,0.9);
    }
    .sky-form .input input:focus + .tooltip-left,
    .sky-form .textarea textarea:focus + .tooltip-left {
    right: 100%;
    left: auto;
    margin-right: 5px;
    }

    .sky-form .tooltip-bottom-right {
    top: 100%;
    margin-top: 15px;
    }
    .sky-form .tooltip-bottom-right:after {
    bottom: 100%;
    right: 16px;
    border-right: 4px solid transparent;
    border-bottom: 4px solid rgba(0,0,0,0.9);
    border-left: 4px solid transparent;
    }
    .sky-form .input input:focus + .tooltip-bottom-right,
    .sky-form .textarea textarea:focus + .tooltip-bottom-right {
    right: 0;
    left: auto;
    margin-top: 5px;
    }

    .sky-form .tooltip-bottom-left {
    top: 100%;
    margin-top: 15px;
    }
    .sky-form .tooltip-bottom-left:after {
    bottom: 100%;
    left: 16px;
    border-right: 4px solid transparent;
    border-bottom: 4px solid rgba(0,0,0,0.9);
    border-left: 4px solid transparent;
    }
    .sky-form .input input:focus + .tooltip-bottom-left,
    .sky-form .textarea textarea:focus + .tooltip-bottom-left {
    right: auto;
    left: 0;
    margin-top: 5px;
    }

    //
    /* normal state */
    /    /
    .sky-form .input input,
    .sky-form .select select,
    .sky-form .textarea textarea,
    .sky-form .radio i,
    .sky-form .checkbox i,
    .sky-form .toggle i,
    .sky-form .icon-append,
    .sky-form .icon-prepend {
    border-color: #e5e5e5;
    -ms-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    -webkit-transition: border-color 0.3s;
    }
    .sky-form .toggle i:before {
    background-color: #2da5da;
    }
    .sky-form .rating label {
    color: #ccc;
    -ms-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    }
    .sky-form .button {
    background-color: #2da5da;
    opacity: 0.8;
    -ms-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    }
    .sky-form .button.button-secondary {
    background-color: #b3b3b3;
    }
    .sky-form .icon-append,
    .sky-form .icon-prepend {
    color: #ccc;
    }

    //
    /* hover state */
    /    /
    .sky-form .input:hover input,
    .sky-form .select:hover select,
    .sky-form .textarea:hover textarea,
    .sky-form .radio:hover i,
    .sky-form .checkbox:hover i,
    .sky-form .toggle:hover i,
    .sky-form .ui-slider-handle:hover {
    border-color: #8dc9e5;
    }
    .sky-form .rating input + label:hover,
    .sky-form .rating input + label:hover ~ label {
    color: #2da5da;
    }
    .sky-form .button:hover {
    opacity: 1;
    }

    //
    /* focus state */
    /    /
    .sky-form .input input:focus,
    .sky-form .select select:focus,
    .sky-form .textarea textarea:focus,
    .sky-form .radio input:focus + i,
    .sky-form .checkbox input:focus + i,
    .sky-form .toggle input:focus + i {
    border-color: #2da5da;
    }

    //
    /* checked state */
    /    /
    .sky-form .radio input + i:after {
    background-color: #2da5da;
    }
    .sky-form .checkbox input + i:after {
    color: #2da5da;
    }
    .sky-form .radio input:checked + i,
    .sky-form .checkbox input:checked + i,
    .sky-form .toggle input:checked + i {
    border-color: #2da5da;
    }
    .sky-form .rating input:checked ~ label {
    color: #2da5da;
    }

    //
    /* error state */
    /    /
    .sky-form .state-error input,
    .sky-form .state-error select,
    .sky-form .state-error textarea,
    .sky-form .radio.state-error i,
    .sky-form .checkbox.state-error i,
    .sky-form .toggle.state-error i {
    background: #fff0f0;
    }
    .sky-form .state-error select + i {
    background: #fff0f0;
    box-shadow: 0 0 0 12px #fff0f0;
    }
    .sky-form .toggle.state-error input:checked + i {
    background: #fff0f0;
    }
    .sky-form .state-error + em {
    display: block;
    margin-top: 6px;
    padding: 0 1px;
    font-style: normal;
    font-size: 11px;
    line-height: 15px;
    color: #ee9393;
    }
    .sky-form .rating.state-error + em {
    margin-top: -4px;
    margin-bottom: 4px;
    }

    //
    /* success state */
    /    /
    .sky-form .state-success input,
    .sky-form .state-success select,
    .sky-form .state-success textarea,
    .sky-form .radio.state-success i,
    .sky-form .checkbox.state-success i,
    .sky-form .toggle.state-success i {
    background: #f0fff0;
    }
    .sky-form .state-success select + i {
    background: #f0fff0;
    box-shadow: 0 0 0 12px #f0fff0;
    }
    .sky-form .toggle.state-success input:checked + i {
    background: #f0fff0;
    }
    .sky-form .state-success + em {
    display: block;
    margin-top: 6px;
    padding: 0 1px;
    font-style: normal;
    font-size: 11px;
    line-height: 15px;
    color: #ee9393;
    }
    .sky-form .note-success {
    color: #6fb679;
    }

    //
    /* disabled state */
    /    /
    .sky-form .input.state-disabled input,
    .sky-form .select.state-disabled,
    .sky-form .textarea.state-disabled,
    .sky-form .radio.state-disabled,
    .sky-form .checkbox.state-disabled,
    .sky-form .toggle.state-disabled,
    .sky-form .button.state-disabled {
    cursor: default;
    opacity: 0.5;
    }
    .sky-form .input.state-disabled:hover input,
    .sky-form .select.state-disabled:hover select,
    .sky-form .textarea.state-disabled:hover textarea,
    .sky-form .radio.state-disabled:hover i,
    .sky-form .checkbox.state-disabled:hover i,
    .sky-form .toggle.state-disabled:hover i {
    border-color: #e5e5e5;
    }

    //
    /* submited state */
    /    /
    .sky-form .message {
    display: none;
    color: #6fb679;
    }
    .sky-form .message i {
    display: block;
    margin: 0 auto 20px;
    width: 81px;
    height: 81px;
    border: 1px solid #6fb679;
    border-radius: 50%;
    font-size: 30px;
    line-height: 81px;
    }
    .sky-form.submited fieldset,
    .sky-form.submited footer {
    display: none;
    }
    .sky-form.submited .message {
    display: block;
    padding: 25px 30px;
    background: rgba(255,255,255,.9);
    font: 300 18px/27px ‘Open Sans’, Helvetica, Arial, sans-serif;
    text-align: center;
    }

    //
    /* datepicker */
    /    /
    .ui-datepicker {
    display: none;
    padding: 10px 12px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    font: 13px/1.55 ‘Open Sans’, Helvetica, Arial, sans-serif;
    text-align: center;
    color: #666;
    }
    .ui-datepicker a {
    color: #404040;
    }
    .ui-datepicker-header {
    position: relative;
    margin: -10px -12px 10px;
    padding: 10px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    font-size: 15px;
    line-height: 27px;
    }
    .ui-datepicker-prev,
    .ui-datepicker-next {
    position: absolute;
    top: 0;
    display: block;
    width: 47px;
    height: 47px;
    font-size: 15px;
    line-height: 47px;
    text-decoration: none;
    cursor: pointer;
    }
    .ui-datepicker-prev {
    left: 0;
    }
    .ui-datepicker-next {
    right: 0;
    }
    .ui-datepicker-calendar {
    border-collapse: collapse;
    font-size: 13px;
    line-height: 27px;
    }
    .ui-datepicker-calendar th {
    color: #999;
    }
    .ui-datepicker-calendar a,
    .ui-datepicker-calendar span {
    display: block;
    width: 31px;
    margin: auto;
    text-decoration: none;
    color: #404040;
    }
    .ui-datepicker-calendar a:hover {
    background: rgba(0,0,0,.05);
    }
    .ui-datepicker-calendar span {
    color: #bfbfbf;
    }
    .ui-datepicker-today a {
    font-weight: 700;
    }
    .ui-datepicker-calendar .ui-state-active {
    background: rgba(0,0,0,.05);
    cursor: default;
    }
    .ui-datepicker-inline {
    border: 2px solid #e5e5e5;
    background: #fff;
    box-shadow: none;
    }
    .ui-datepicker-inline .ui-datepicker-header {
    line-height: 47px;
    }
    .ui-datepicker-inline .ui-datepicker-calendar {
    width: 100%;
    }

    //
    /* datepicker */
    /    /
    .sky-form .ui-slider {
    position: relative;
    height: 3px;
    border: 2px solid #e5e5e5;
    background: #fff;
    margin: 12px 6px 26px;
    }
    .sky-form .ui-slider-handle {
    position: absolute;
    width: 15px;
    height: 15px;
    margin: -8px 0 0 -8px;
    border: 2px solid #e5e5e5;
    outline: none;
    background: #fff;
    -ms-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    -webkit-transition: border-color 0.3s;
    }

    //
    /* modal */
    /    /
    .sky-form-modal {
    position: fixed;
    z-index: 1;
    display: none;
    width: 400px;
    }
    .sky-form-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    }

    //
    /* bootstrap compatibility */
    /    /
    .sky-form *,
    .sky-form *:after,
    .sky-form *:before {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    }
    .sky-form .label {
    border-radius: 0;
    font-size: 100%;
    text-align: left;
    white-space: normal;
    color: inherit;
    }
    .sky-form .radio,
    .sky-form .checkbox {
    font-weight: 400;
    }
    .sky-form .radio + .radio,
    .sky-form .checkbox + .checkbox {
    margin-top: 0;
    }[/php]

    #4

    font-awesome.css

    [php]/*!

    • Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
    • License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
      /
      /       FONT PATH
    • -------------------------- /
      @font-face {
      font-family: ‘FontAwesome’;
      src: url(’…/icons/fontawesome-webfontba72.eot?v=4.0.3’);
      src: url(’…/icons/fontawesome-webfontd41d.eot?#iefix&v=4.0.3’) format(‘embedded-opentype’), url(’…/icons/fontawesome-webfontba72.woff?v=4.0.3’) format(‘woff’), url(’…/icons/fontawesome-webfontba72.ttf?v=4.0.3’) format(‘truetype’), url(’…/icons/fontawesome-webfontba72.svg?v=4.0.3#fontawesomeregular’) format(‘svg’);
      font-weight: normal;
      font-style: normal;
      }
      .fa {
      display: inline-block;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      }
      /       makes the font 33% larger relative to the icon container /
      .fa-lg {
      font-size: 1.3333333333333333em;
      line-height: 0.75em;
      vertical-align: -15%;
      }
      .fa-2x {
      font-size: 2em;
      }
      .fa-3x {
      font-size: 3em;
      }
      .fa-4x {
      font-size: 4em;
      }
      .fa-5x {
      font-size: 5em;
      }
      .fa-fw {
      width: 1.2857142857142858em;
      text-align: center;
      }
      .fa-ul {
      padding-left: 0;
      margin-left: 2.142857142857143em;
      list-style-type: none;
      }
      .fa-ul > li {
      position: relative;
      }
      .fa-li {
      position: absolute;
      left: -2.142857142857143em;
      width: 2.142857142857143em;
      top: 0.14285714285714285em;
      text-align: center;
      }
      .fa-li.fa-lg {
      left: -1.8571428571428572em;
      }
      .fa-border {
      padding: .2em .25em .15em;
      border: solid 0.08em #eeeeee;
      border-radius: .1em;
      }
      .pull-right {
      float: right;
      }
      .pull-left {
      float: left;
      }
      .fa.pull-left {
      margin-right: .3em;
      }
      .fa.pull-right {
      margin-left: .3em;
      }
      .fa-spin {
      -webkit-animation: spin 2s infinite linear;
      -moz-animation: spin 2s infinite linear;
      -o-animation: spin 2s infinite linear;
      animation: spin 2s infinite linear;
      }
      @-moz-keyframes spin {
      0% {
      -moz-transform: rotate(0deg);
      }
      100% {
      -moz-transform: rotate(359deg);
      }
      }
      @-webkit-keyframes spin {
      0% {
      -webkit-transform: rotate(0deg);
      }
      100% {
      -webkit-transform: rotate(359deg);
      }
      }
      @-o-keyframes spin {
      0% {
      -o-transform: rotate(0deg);
      }
      100% {
      -o-transform: rotate(359deg);
      }
      }
      @-ms-keyframes spin {
      0% {
      -ms-transform: rotate(0deg);
      }
      100% {
      -ms-transform: rotate(359deg);
      }
      }
      @keyframes spin {
      0% {
      transform: rotate(0deg);
      }
      100% {
      transform: rotate(359deg);
      }
      }
      .fa-rotate-90 {
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
      }
      .fa-rotate-180 {
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
      }
      .fa-rotate-270 {
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      transform: rotate(270deg);
      }
      .fa-flip-horizontal {
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
      -webkit-transform: scale(-1, 1);
      -moz-transform: scale(-1, 1);
      -ms-transform: scale(-1, 1);
      -o-transform: scale(-1, 1);
      transform: scale(-1, 1);
      }
      .fa-flip-vertical {
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
      -webkit-transform: scale(1, -1);
      -moz-transform: scale(1, -1);
      -ms-transform: scale(1, -1);
      -o-transform: scale(1, -1);
      transform: scale(1, -1);
      }
      .fa-stack {
      position: relative;
      display: inline-block;
      width: 2em;
      height: 2em;
      line-height: 2em;
      vertical-align: middle;
      }
      .fa-stack-1x,
      .fa-stack-2x {
      position: absolute;
      left: 0;
      width: 100%;
      text-align: center;
      }
      .fa-stack-1x {
      line-height: inherit;
      }
      .fa-stack-2x {
      font-size: 2em;
      }
      .fa-inverse {
      color: #ffffff;
      }
      /       Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
      readers do not read off random characters that represent icons */
      .fa-glass:before {
      content: “\f000”;
      }
      .fa-music:before {
      content: “\f001”;
      }
      .fa-search:before {
      content: “\f002”;
      }
      .fa-envelope-o:before {
      content: “\f003”;
      }
      .fa-heart:before {
      content: “\f004”;
      }
      .fa-star:before {
      content: “\f005”;
      }
      .fa-star-o:before {
      content: “\f006”;
      }
      .fa-user:before {
      content: “\f007”;
      }
      .fa-film:before {
      content: “\f008”;
      }
      .fa-th-large:before {
      content: “\f009”;
      }
      .fa-th:before {
      content: “\f00a”;
      }
      .fa-th-list:before {
      content: “\f00b”;
      }
      .fa-check:before {
      content: “\f00c”;
      }
      .fa-times:before {
      content: “\f00d”;
      }
      .fa-search-plus:before {
      content: “\f00e”;
      }
      .fa-search-minus:before {
      content: “\f010”;
      }
      .fa-power-off:before {
      content: “\f011”;
      }
      .fa-signal:before {
      content: “\f012”;
      }
      .fa-gear:before,
      .fa-cog:before {
      content: “\f013”;
      }
      .fa-trash-o:before {
      content: “\f014”;
      }
      .fa-home:before {
      content: “\f015”;
      }
      .fa-file-o:before {
      content: “\f016”;
      }
      .fa-clock-o:before {
      content: “\f017”;
      }
      .fa-road:before {
      content: “\f018”;
      }
      .fa-download:before {
      content: “\f019”;
      }
      .fa-arrow-circle-o-down:before {
      content: “\f01a”;
      }
      .fa-arrow-circle-o-up:before {
      content: “\f01b”;
      }
      .fa-inbox:before {
      content: “\f01c”;
      }
      .fa-play-circle-o:before {
      content: “\f01d”;
      }
      .fa-rotate-right:before,
      .fa-repeat:before {
      content: “\f01e”;
      }
      .fa-refresh:before {
      content: “\f021”;
      }
      .fa-list-alt:before {
      content: “\f022”;
      }
      .fa-lock:before {
      content: “\f023”;
      }
      .fa-flag:before {
      content: “\f024”;
      }
      .fa-headphones:before {
      content: “\f025”;
      }
      .fa-volume-off:before {
      content: “\f026”;
      }
      .fa-volume-down:before {
      content: “\f027”;
      }
      .fa-volume-up:before {
      content: “\f028”;
      }
      .fa-qrcode:before {
      content: “\f029”;
      }
      .fa-barcode:before {
      content: “\f02a”;
      }
      .fa-tag:before {
      content: “\f02b”;
      }
      .fa-tags:before {
      content: “\f02c”;
      }
      .fa-book:before {
      content: “\f02d”;
      }
      .fa-bookmark:before {
      content: “\f02e”;
      }
      .fa-print:before {
      content: “\f02f”;
      }
      .fa-camera:before {
      content: “\f030”;
      }
      .fa-font:before {
      content: “\f031”;
      }
      .fa-bold:before {
      content: “\f032”;
      }
      .fa-italic:before {
      content: “\f033”;
      }
      .fa-text-height:before {
      content: “\f034”;
      }
      .fa-text-width:before {
      content: “\f035”;
      }
      .fa-align-left:before {
      content: “\f036”;
      }
      .fa-align-center:before {
      content: “\f037”;
      }
      .fa-align-right:before {
      content: “\f038”;
      }
      .fa-align-justify:before {
      content: “\f039”;
      }
      .fa-list:before {
      content: “\f03a”;
      }
      .fa-dedent:before,
      .fa-outdent:before {
      content: “\f03b”;
      }
      .fa-indent:before {
      content: “\f03c”;
      }
      .fa-video-camera:before {
      content: “\f03d”;
      }
      .fa-picture-o:before {
      content: “\f03e”;
      }
      .fa-pencil:before {
      content: “\f040”;
      }
      .fa-map-marker:before {
      content: “\f041”;
      }
      .fa-adjust:before {
      content: “\f042”;
      }
      .fa-tint:before {
      content: “\f043”;
      }
      .fa-edit:before,
      .fa-pencil-square-o:before {
      content: “\f044”;
      }
      .fa-share-square-o:before {
      content: “\f045”;
      }
      .fa-check-square-o:before {
      content: “\f046”;
      }
      .fa-arrows:before {
      content: “\f047”;
      }
      .fa-step-backward:before {
      content: “\f048”;
      }
      .fa-fast-backward:before {
      content: “\f049”;
      }
      .fa-backward:before {
      content: “\f04a”;
      }
      .fa-play:before {
      content: “\f04b”;
      }
      .fa-pause:before {
      content: “\f04c”;
      }
      .fa-stop:before {
      content: “\f04d”;
      }
      .fa-forward:before {
      content: “\f04e”;
      }
      .fa-fast-forward:before {
      content: “\f050”;
      }
      .fa-step-forward:before {
      content: “\f051”;
      }
      .fa-eject:before {
      content: “\f052”;
      }
      .fa-chevron-left:before {
      content: “\f053”;
      }
      .fa-chevron-right:before {
      content: “\f054”;
      }
      .fa-plus-circle:before {
      content: “\f055”;
      }
      .fa-minus-circle:before {
      content: “\f056”;
      }
      .fa-times-circle:before {
      content: “\f057”;
      }
      .fa-check-circle:before {
      content: “\f058”;
      }
      .fa-question-circle:before {
      content: “\f059”;
      }
      .fa-info-circle:before {
      content: “\f05a”;
      }
      .fa-crosshairs:before {
      content: “\f05b”;
      }
      .fa-times-circle-o:before {
      content: “\f05c”;
      }
      .fa-check-circle-o:before {
      content: “\f05d”;
      }
      .fa-ban:before {
      content: “\f05e”;
      }
      .fa-arrow-left:before {
      content: “\f060”;
      }
      .fa-arrow-right:before {
      content: “\f061”;
      }
      .fa-arrow-up:before {
      content: “\f062”;
      }
      .fa-arrow-down:before {
      content: “\f063”;
      }
      .fa-mail-forward:before,
      .fa-share:before {
      content: “\f064”;
      }
      .fa-expand:before {
      content: “\f065”;
      }
      .fa-compress:before {
      content: “\f066”;
      }
      .fa-plus:before {
      content: “\f067”;
      }
      .fa-minus:before {
      content: “\f068”;
      }
      .fa-asterisk:before {
      content: “\f069”;
      }
      .fa-exclamation-circle:before {
      content: “\f06a”;
      }
      .fa-gift:before {
      content: “\f06b”;
      }
      .fa-leaf:before {
      content: “\f06c”;
      }
      .fa-fire:before {
      content: “\f06d”;
      }
      .fa-eye:before {
      content: “\f06e”;
      }
      .fa-eye-slash:before {
      content: “\f070”;
      }
      .fa-warning:before,
      .fa-exclamation-triangle:before {
      content: “\f071”;
      }
      .fa-plane:before {
      content: “\f072”;
      }
      .fa-calendar:before {
      content: “\f073”;
      }
      .fa-random:before {
      content: “\f074”;
      }
      .fa-comment:before {
      content: “\f075”;
      }
      .fa-magnet:before {
      content: “\f076”;
      }
      .fa-chevron-up:before {
      content: “\f077”;
      }
      .fa-chevron-down:before {
      content: “\f078”;
      }
      .fa-retweet:before {
      content: “\f079”;
      }
      .fa-shopping-cart:before {
      content: “\f07a”;
      }
      .fa-folder:before {
      content: “\f07b”;
      }
      .fa-folder-open:before {
      content: “\f07c”;
      }
      .fa-arrows-v:before {
      content: “\f07d”;
      }
      .fa-arrows-h:before {
      content: “\f07e”;
      }
      .fa-bar-chart-o:before {
      content: “\f080”;
      }
      .fa-twitter-square:before {
      content: “\f081”;
      }
      .fa-facebook-square:before {
      content: “\f082”;
      }
      .fa-camera-retro:before {
      content: “\f083”;
      }
      .fa-key:before {
      content: “\f084”;
      }
      .fa-gears:before,
      .fa-cogs:before {
      content: “\f085”;
      }
      .fa-comments:before {
      content: “\f086”;
      }
      .fa-thumbs-o-up:before {
      content: “\f087”;
      }
      .fa-thumbs-o-down:before {
      content: “\f088”;
      }
      .fa-star-half:before {
      content: “\f089”;
      }
      .fa-heart-o:before {
      content: “\f08a”;
      }
      .fa-sign-out:before {
      content: “\f08b”;
      }
      .fa-linkedin-square:before {
      content: “\f08c”;
      }
      .fa-thumb-tack:before {
      content: “\f08d”;
      }
      .fa-external-link:before {
      content: “\f08e”;
      }
      .fa-sign-in:before {
      content: “\f090”;
      }
      .fa-trophy:before {
      content: “\f091”;
      }
      .fa-github-square:before {
      content: “\f092”;
      }
      .fa-upload:before {
      content: “\f093”;
      }
      .fa-lemon-o:before {
      content: “\f094”;
      }
      .fa-phone:before {
      content: “\f095”;
      }
      .fa-square-o:before {
      content: “\f096”;[/php]
    #5

    font-awesome.css (continued)

    [php]
    }
    .fa-bookmark-o:before {
    content: “\f097”;
    }
    .fa-phone-square:before {
    content: “\f098”;
    }
    .fa-twitter:before {
    content: “\f099”;
    }
    .fa-facebook:before {
    content: “\f09a”;
    }
    .fa-github:before {
    content: “\f09b”;
    }
    .fa-unlock:before {
    content: “\f09c”;
    }
    .fa-credit-card:before {
    content: “\f09d”;
    }
    .fa-rss:before {
    content: “\f09e”;
    }
    .fa-hdd-o:before {
    content: “\f0a0”;
    }
    .fa-bullhorn:before {
    content: “\f0a1”;
    }
    .fa-bell:before {
    content: “\f0f3”;
    }
    .fa-certificate:before {
    content: “\f0a3”;
    }
    .fa-hand-o-right:before {
    content: “\f0a4”;
    }
    .fa-hand-o-left:before {
    content: “\f0a5”;
    }
    .fa-hand-o-up:before {
    content: “\f0a6”;
    }
    .fa-hand-o-down:before {
    content: “\f0a7”;
    }
    .fa-arrow-circle-left:before {
    content: “\f0a8”;
    }
    .fa-arrow-circle-right:before {
    content: “\f0a9”;
    }
    .fa-arrow-circle-up:before {
    content: “\f0aa”;
    }
    .fa-arrow-circle-down:before {
    content: “\f0ab”;
    }
    .fa-globe:before {
    content: “\f0ac”;
    }
    .fa-wrench:before {
    content: “\f0ad”;
    }
    .fa-tasks:before {
    content: “\f0ae”;
    }
    .fa-filter:before {
    content: “\f0b0”;
    }
    .fa-briefcase:before {
    content: “\f0b1”;
    }
    .fa-arrows-alt:before {
    content: “\f0b2”;
    }
    .fa-group:before,
    .fa-users:before {
    content: “\f0c0”;
    }
    .fa-chain:before,
    .fa-link:before {
    content: “\f0c1”;
    }
    .fa-cloud:before {
    content: “\f0c2”;
    }
    .fa-flask:before {
    content: “\f0c3”;
    }
    .fa-cut:before,
    .fa-scissors:before {
    content: “\f0c4”;
    }
    .fa-copy:before,
    .fa-files-o:before {
    content: “\f0c5”;
    }
    .fa-paperclip:before {
    content: “\f0c6”;
    }
    .fa-save:before,
    .fa-floppy-o:before {
    content: “\f0c7”;
    }
    .fa-square:before {
    content: “\f0c8”;
    }
    .fa-bars:before {
    content: “\f0c9”;
    }
    .fa-list-ul:before {
    content: “\f0ca”;
    }
    .fa-list-ol:before {
    content: “\f0cb”;
    }
    .fa-strikethrough:before {
    content: “\f0cc”;
    }
    .fa-underline:before {
    content: “\f0cd”;
    }
    .fa-table:before {
    content: “\f0ce”;
    }
    .fa-magic:before {
    content: “\f0d0”;
    }
    .fa-truck:before {
    content: “\f0d1”;
    }
    .fa-pinterest:before {
    content: “\f0d2”;
    }
    .fa-pinterest-square:before {
    content: “\f0d3”;
    }
    .fa-google-plus-square:before {
    content: “\f0d4”;
    }
    .fa-google-plus:before {
    content: “\f0d5”;
    }
    .fa-money:before {
    content: “\f0d6”;
    }
    .fa-caret-down:before {
    content: “\f0d7”;
    }
    .fa-caret-up:before {
    content: “\f0d8”;
    }
    .fa-caret-left:before {
    content: “\f0d9”;
    }
    .fa-caret-right:before {
    content: “\f0da”;
    }
    .fa-columns:before {
    content: “\f0db”;
    }
    .fa-unsorted:before,
    .fa-sort:before {
    content: “\f0dc”;
    }
    .fa-sort-down:before,
    .fa-sort-asc:before {
    content: “\f0dd”;
    }
    .fa-sort-up:before,
    .fa-sort-desc:before {
    content: “\f0de”;
    }
    .fa-envelope:before {
    content: “\f0e0”;
    }
    .fa-linkedin:before {
    content: “\f0e1”;
    }
    .fa-rotate-left:before,
    .fa-undo:before {
    content: “\f0e2”;
    }
    .fa-legal:before,
    .fa-gavel:before {
    content: “\f0e3”;
    }
    .fa-dashboard:before,
    .fa-tachometer:before {
    content: “\f0e4”;
    }
    .fa-comment-o:before {
    content: “\f0e5”;
    }
    .fa-comments-o:before {
    content: “\f0e6”;
    }
    .fa-flash:before,
    .fa-bolt:before {
    content: “\f0e7”;
    }
    .fa-sitemap:before {
    content: “\f0e8”;
    }
    .fa-umbrella:before {
    content: “\f0e9”;
    }
    .fa-paste:before,
    .fa-clipboard:before {
    content: “\f0ea”;
    }
    .fa-lightbulb-o:before {
    content: “\f0eb”;
    }
    .fa-exchange:before {
    content: “\f0ec”;
    }
    .fa-cloud-download:before {
    content: “\f0ed”;
    }
    .fa-cloud-upload:before {
    content: “\f0ee”;
    }
    .fa-user-md:before {
    content: “\f0f0”;
    }
    .fa-stethoscope:before {
    content: “\f0f1”;
    }
    .fa-suitcase:before {
    content: “\f0f2”;
    }
    .fa-bell-o:before {
    content: “\f0a2”;
    }
    .fa-coffee:before {
    content: “\f0f4”;
    }
    .fa-cutlery:before {
    content: “\f0f5”;
    }
    .fa-file-text-o:before {
    content: “\f0f6”;
    }
    .fa-building-o:before {
    content: “\f0f7”;
    }
    .fa-hospital-o:before {
    content: “\f0f8”;
    }
    .fa-ambulance:before {
    content: “\f0f9”;
    }
    .fa-medkit:before {
    content: “\f0fa”;
    }
    .fa-fighter-jet:before {
    content: “\f0fb”;
    }
    .fa-beer:before {
    content: “\f0fc”;
    }
    .fa-h-square:before {
    content: “\f0fd”;
    }
    .fa-plus-square:before {
    content: “\f0fe”;
    }
    .fa-angle-double-left:before {
    content: “\f100”;
    }
    .fa-angle-double-right:before {
    content: “\f101”;
    }
    .fa-angle-double-up:before {
    content: “\f102”;
    }
    .fa-angle-double-down:before {
    content: “\f103”;
    }
    .fa-angle-left:before {
    content: “\f104”;
    }
    .fa-angle-right:before {
    content: “\f105”;
    }
    .fa-angle-up:before {
    content: “\f106”;
    }
    .fa-angle-down:before {
    content: “\f107”;
    }
    .fa-desktop:before {
    content: “\f108”;
    }
    .fa-laptop:before {
    content: “\f109”;
    }
    .fa-tablet:before {
    content: “\f10a”;
    }
    .fa-mobile-phone:before,
    .fa-mobile:before {
    content: “\f10b”;
    }
    .fa-circle-o:before {
    content: “\f10c”;
    }
    .fa-quote-left:before {
    content: “\f10d”;
    }
    .fa-quote-right:before {
    content: “\f10e”;
    }
    .fa-spinner:before {
    content: “\f110”;
    }
    .fa-circle:before {
    content: “\f111”;
    }
    .fa-mail-reply:before,
    .fa-reply:before {
    content: “\f112”;
    }
    .fa-github-alt:before {
    content: “\f113”;
    }
    .fa-folder-o:before {
    content: “\f114”;
    }
    .fa-folder-open-o:before {
    content: “\f115”;
    }
    .fa-smile-o:before {
    content: “\f118”;
    }
    .fa-frown-o:before {
    content: “\f119”;
    }
    .fa-meh-o:before {
    content: “\f11a”;
    }
    .fa-gamepad:before {
    content: “\f11b”;
    }
    .fa-keyboard-o:before {
    content: “\f11c”;
    }
    .fa-flag-o:before {
    content: “\f11d”;
    }
    .fa-flag-checkered:before {
    content: “\f11e”;
    }
    .fa-terminal:before {
    content: “\f120”;
    }
    .fa-code:before {
    content: “\f121”;
    }
    .fa-reply-all:before {
    content: “\f122”;
    }
    .fa-mail-reply-all:before {
    content: “\f122”;
    }
    .fa-star-half-empty:before,
    .fa-star-half-full:before,
    .fa-star-half-o:before {
    content: “\f123”;
    }
    .fa-location-arrow:before {
    content: “\f124”;
    }
    .fa-crop:before {
    content: “\f125”;
    }
    .fa-code-fork:before {
    content: “\f126”;
    }
    .fa-unlink:before,
    .fa-chain-broken:before {
    content: “\f127”;
    }
    .fa-question:before {
    content: “\f128”;
    }
    .fa-info:before {
    content: “\f129”;
    }
    .fa-exclamation:before {
    content: “\f12a”;
    }
    .fa-superscript:before {
    content: “\f12b”;
    }
    .fa-subscript:before {
    content: “\f12c”;
    }
    .fa-eraser:before {
    content: “\f12d”;
    }
    .fa-puzzle-piece:before {
    content: “\f12e”;
    }
    .fa-microphone:before {
    content: “\f130”;
    }
    .fa-microphone-slash:before {
    content: “\f131”;
    }
    .fa-shield:before {
    content: “\f132”;
    }
    .fa-calendar-o:before {
    content: “\f133”;
    }
    .fa-fire-extinguisher:before {
    content: “\f134”;
    }
    .fa-rocket:before {
    content: “\f135”;
    }
    .fa-maxcdn:before {
    content: “\f136”;
    }
    .fa-chevron-circle-left:before {
    content: “\f137”;
    }
    .fa-chevron-circle-right:before {
    content: “\f138”;
    }
    .fa-chevron-circle-up:before {
    content: “\f139”;
    }
    .fa-chevron-circle-down:before {
    content: “\f13a”;
    }
    .fa-html5:before {
    content: “\f13b”;
    }
    .fa-css3:before {
    content: “\f13c”;
    }
    .fa-anchor:before {
    content: “\f13d”;
    }
    .fa-unlock-alt:before {
    content: “\f13e”;
    }
    .fa-bullseye:before {
    content: “\f140”;
    }
    .fa-ellipsis-h:before {
    content: “\f141”;
    }
    .fa-ellipsis-v:before {
    content: “\f142”;
    }
    .fa-rss-square:before {
    content: “\f143”;
    }
    .fa-play-circle:before {
    content: “\f144”;
    }
    .fa-ticket:before {
    content: “\f145”;
    }
    .fa-minus-square:before {
    content: “\f146”;
    }
    .fa-minus-square-o:before {
    content: “\f147”;
    }
    .fa-level-up:before {
    content: “\f148”;
    }
    .fa-level-down:before {
    content: “\f149”;
    }
    .fa-check-square:before {
    content: “\f14a”;
    }
    .fa-pencil-square:before {
    content: “\f14b”;
    }
    .fa-external-link-square:before {
    content: “\f14c”;
    }
    .fa-share-square:before {
    content: “\f14d”;
    }
    .fa-compass:before {
    content: “\f14e”;
    }
    .fa-toggle-down:before,
    .fa-caret-square-o-down:before {
    content: “\f150”;
    }
    .fa-toggle-up:before,
    .fa-caret-square-o-up:before {
    content: “\f151”;
    }
    .fa-toggle-right:before,
    .fa-caret-square-o-right:before {
    content: “\f152”;
    }
    .fa-euro:before,
    .fa-eur:before {
    content: “\f153”;
    }
    .fa-gbp:before {
    content: “\f154”;
    }
    .fa-dollar:before,
    .fa-usd:before {
    content: “\f155”;
    }
    .fa-rupee:before,
    .fa-inr:before {
    content: “\f156”;
    }
    .fa-cny:before,
    .fa-rmb:before,
    .fa-yen:before,
    .fa-jpy:before {
    content: “\f157”;
    }
    .fa-ruble:before,
    .fa-rouble:before,
    .fa-rub:before {
    content: “\f158”;
    }
    .fa-won:before,
    .fa-krw:before {
    content: “\f159”;
    }
    .fa-bitcoin:before,
    .fa-btc:before {
    content: “\f15a”;
    }
    .fa-file:before {
    content: “\f15b”;
    }
    .fa-file-text:before {
    content: “\f15c”;
    }
    .fa-sort-alpha-asc:before {
    content: “\f15d”;
    }
    .fa-sort-alpha-desc:before {
    content: “\f15e”;
    }
    .fa-sort-amount-asc:before {
    content: “\f160”;
    }
    .fa-sort-amount-desc:before {
    content: “\f161”;
    }
    .fa-sort-numeric-asc:before {
    content: “\f162”;
    }
    .fa-sort-numeric-desc:before {
    content: “\f163”;
    }
    .fa-thumbs-up:before {
    content: “\f164”;
    }
    .fa-thumbs-down:before {
    content: “\f165”;
    }
    .fa-youtube-square:before {
    content: “\f166”;
    }
    .fa-youtube:before {
    content: “\f167”;
    }
    .fa-xing:before {
    content: “\f168”;
    }
    .fa-xing-square:before {
    content: “\f169”;
    }
    .fa-youtube-play:before {
    content: “\f16a”;
    }
    .fa-dropbox:before {
    content: “\f16b”;
    }
    .fa-stack-overflow:before {
    content: “\f16c”;
    }
    .fa-instagram:before {
    content: “\f16d”;
    }
    .fa-flickr:before {
    content: “\f16e”;
    }
    .fa-adn:before {
    content: “\f170”;
    }
    .fa-bitbucket:before {
    content: “\f171”;
    }
    .fa-bitbucket-square:before {
    content: “\f172”;
    }
    .fa-tumblr:before {
    content: “\f173”;
    }
    .fa-tumblr-square:before {
    content: “\f174”;
    }
    .fa-long-arrow-down:before {
    content: “\f175”;
    }
    .fa-long-arrow-up:before {
    content: “\f176”;
    }
    .fa-long-arrow-left:before {
    content: “\f177”;
    }
    .fa-long-arrow-right:before {
    content: “\f178”;
    }
    .fa-apple:before {
    content: “\f179”;
    }
    .fa-windows:before {
    content: “\f17a”;
    }
    .fa-android:before {
    content: “\f17b”;
    }
    .fa-linux:before {
    content: “\f17c”;
    }
    .fa-dribbble:before {
    content: “\f17d”;
    }
    .fa-skype:before {
    content: “\f17e”;
    }
    .fa-foursquare:before {
    content: “\f180”;
    }
    .fa-trello:before {
    content: “\f181”;
    }
    .fa-female:before {
    content: “\f182”;
    }
    .fa-male:before {
    content: “\f183”;
    }
    .fa-gittip:before {
    content: “\f184”;
    }
    .fa-sun-o:before {
    content: “\f185”;
    }
    .fa-moon-o:before {
    content: “\f186”;
    }
    .fa-archive:before {
    content: “\f187”;
    }
    .fa-bug:before {
    content: “\f188”;
    }
    .fa-vk:before {
    content: “\f189”;
    }
    .fa-weibo:before {
    content: “\f18a”;
    }
    .fa-renren:before {
    content: “\f18b”;
    }
    .fa-pagelines:before {
    content: “\f18c”;
    }
    .fa-stack-exchange:before {
    content: “\f18d”;
    }
    .fa-arrow-circle-o-right:before {
    content: “\f18e”;
    }
    .fa-arrow-circle-o-left:before {
    content: “\f190”;
    }
    .fa-toggle-left:before,
    .fa-caret-square-o-left:before {
    content: “\f191”;
    }
    .fa-dot-circle-o:before {
    content: “\f192”;
    }
    .fa-wheelchair:before {
    content: “\f193”;
    }
    .fa-vimeo-square:before {
    content: “\f194”;
    }
    .fa-turkish-lira:before,
    .fa-try:before {
    content: “\f195”;
    }
    .fa-plus-square-o:before {
    content: “\f196”;
    }
    [/php]

    #6

    demo.css
    [php]html, body {
    margin: 0;
    padding: 0;
    background-attachment: fixed;
    background-position: 50% 50%;
    background-size: cover;
    }
    a {
    text-decoration: underline;
    }
    a:hover {
    text-decoration: none;
    }

    .bg-pink {
    background-image: url(…/img/bg-pink.jpg);
    }

    .body {
    padding: 0px; height: auto;
    }
    .body-s {
    max-width: 400px;
    }
    @media screen and (max-width: 600px) {
    .body {
    padding: 20px;
    }
    }[/php]

    #7

    fixed

    example

    [php]


  • Account



    • [/php]
    Sponsor our Newsletter | Privacy Policy | Terms of Service