﻿/*
Item Name: Sticky Header
Author: Mapalla
Author Url: http://codecanyon.net/user/Mapalla
Version: 1.1
*/

/* _______________________________________

	CONTAINER
__________________________________________*/

/* STICKY HEADER CONTAINER */
#header {
	position: fixed;
	top :0;
	left: 0;
	width: 100%;
	min-width :850px;
	height :40px;
	margin: 0;
	padding :0;
	text-align :center ;
	font-family:Arial, Helvetica, sans-serif;
	z-index :9999;
	
	
	/* background */
	background: #536987;  
	background: -moz-linear-gradient(top, #536987, #4B5E7A); /* Firefox */
	background: -ms-linear-gradient(#536987, #4B5E7A); /* IE10 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#536987), to(#4B5E7A)); /* Safari & Chrome */
	background: -webkit-linear-gradient(#536987, #4B5E7A); /* Safari 5.1+, Chrome 10+ */
	background: -o-linear-gradient(#536987, #4B5E7A); /* Opera 11.10 */
	background: linear-gradient(#536987, #4B5E7A); /* the standard */
	
	/* drop shadow */
	-webkit-box-shadow: 0px 0px 5px #000;  
    -moz-box-shadow: 0px 0px 5px #000;  
    box-shadow: 0px 0px 5px #000;  	
}

/* _________________________________________________

	MINIMIZE AND MAXIMIZE CONTROL 
____________________________________________________*/


/* MINIMIZE CONTROL */
#header #minimize
{
	position :absolute ;
	right :20px;
	top :0px;
	width :40px;
	height :40px;
	border :0;
	background :url("images/up.png") no-repeat center;
	cursor :pointer ;
}

#header #minimize:hover
{
	background-color :#647893;
}

/* MAXIMIZE CONTROL */
#header #maximize
{
	position: absolute;
	top :-45px;
	right :20px;
	width: 40px;
	height :40px;
	margin: 0;
	padding :0;
	cursor :pointer ;
	z-index :9999;
	
	/* Rounded Corners */
	-moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px;
    -khtml-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
	
	/* background */
	background:#536987 url("images/down.png") no-repeat center;  
		
	/* drop shadow */
	-webkit-box-shadow: 0px 0px 5px #000;  
    -moz-box-shadow: 0px 0px 5px #000;  
    box-shadow: 0px 0px 5px #000;  
}

#header #maximize:hover
{
	background-color :#647893;
}

/* ______________________________________________

	MENU
_________________________________________________ */

#menu 
{
	list-style:none;
	width:850px;
	height:100%;
	margin :0 auto;
	position:relative;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFFFFF;
}

#menu li 
{
	float:left;
	margin:0;
	border:none;
	padding-right : 10px;
}

#menu li:hover, #menu li.click
{
	background:#647893;
}

#menu li img.logo
{
	border :0;
	padding: 4px 0;
}

#menu li a 
{
	font-size:12px;
	color:#F5F5F5;
	text-shadow:1px 1px 1px #000;
	outline:0;
	font-weight: 700;
	text-decoration:none;
	display:block;
	line-height :40px;
	padding-left :10px;
}

#menu p
{
	margin-top: 1.5em;
}

#menu p a
{
	display:inline ;
	text-shadow: none;
	outline:0;
	font-weight:normal;
	text-decoration: underline;
	line-height :0px;
	padding-left :0px;
}

/* DROP MENU*/
#menu li a.drop 
{
	padding-right:15px;
	background:url("images/drop.png") no-repeat right center;
}

/* RIGHT ALIGNED MENU ITEM */
#menu li.right 
{
	float:right;
}

/* MENU ICON */
#menu li.icon
{
	padding :0;
	margin :0;
}

#menu li.icon:hover
{
	background :#647893;
}

#menu li.icon a
{
	padding :0 5px;
	margin :0;
}

#menu li.icon img
{
	border :0;
	padding :8px 0;
}

/* Tooltips for icons */
a.tooltip:hover {
	text-decoration:none;
}

/* The span defines the tooltip appearing on mouse hover */
#header a.tooltip span {
	display:none;
	top:44px;
	padding :0 5px;
	min-width :40px;
	height :24px;
	line-height :24px;
	text-align:center;
	
	/* CSS3 Rounded Corners */
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3PX;
	border-radius: 3px;
}

/* The hover state */
#header a.tooltip:hover span {
	display:block;
	position:absolute;
	border:0;
	background: #647893;
	color:#fff;
	font-size:10px;
	margin-left:-20px;
}

/* SEPARATOR */
#menu li.separator
{
	border-left :solid 1px #44556E;
	border-right :solid 1px #647893;
	height :30px;
	margin :5px 5px 0 5px;
	padding :0;
}

#menu li.separator:hover
{
	background :none;
}

/* ______________________________________________________

	MEGA DROP DOWN MENU
_________________________________________________________*/

/* Drop Down Container */
#menu li .dropcontent {
	margin:0px auto;
	position:absolute;
	left:-9999em;
	top:40px;
	z-index:9997; 
	padding:10px 0;
	text-align:left;
	background:#647893;
	
	/* Rounded Corners */
	-moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px;
    -khtml-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    
}

#menu li:hover .dropcontent {left:auto;}

#menu li .align_right {right:0px;}

#menu li:hover .align_right {
	left:auto;
	right:0px;
}

/* LARGE MENU */
#menu li .fullwidthdropcontent {
	float: left;
	position: absolute;
	left:-9999em;
	top:40px; 
	z-index:9997; 
	padding:10px 0;
	text-align:left;
	background:#647893;
	
	/* Rounded Corners */
	-moz-border-radius: 0px 0px 4px 4px;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
}

#header #menu li:hover .fullwidthdropcontent {left:0;}


/* MEGA MENU CONTAINER */
#menu .column1container {width: 80px;}
#menu .column2container {width: 160px;}
#menu .column3container {width: 240px;}
#menu .column4container {width: 320px;}
#menu .column5container {width: 400px;}
#menu .column6container {width: 480px;}
#menu .column7container {width: 560px;}
#menu .column8container {width: 640px;}
#menu .column9container {width: 720px;}
#menu .column10container {width: 800px;}
#menu .column11container {width: 880px;}
#menu .column12container {width: 960px;}

/* MEGA MENU COLUMN */
#menu .column1,
#menu .column2,
#menu .column3,
#menu .column4,
#menu .column5,
#menu .column6,
#menu .column7,
#menu .column8,
#menu .column9,
#menu .column10,
#menu .column11,
#menu .column12 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}

#menu .column1 {width:60px;}
#menu .column2 {width:140px;}
#menu .column3 {width:220px;}
#menu .column4 {width:300px;}
#menu .column5 {width:380px;}
#menu .column6 {width:460px;}
#menu .column7 {width:540px;}
#menu .column8 {width:620px;}
#menu .column9 {width:700px;}
#menu .column10 {width:780px;}
#menu .column11 {width:860px;}
#menu .column12 {width:940px;}

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}



/* ________________________________________________________
	
	MULTI LEVEL DROP DOWN MENU 
___________________________________________________________ */
   
#menu li ul.dropdown 
{
	display: none;
	position :absolute ;
	list-style :none;
	
	padding :0;
	margin :0;
	width: 160px;
	text-align :left ;
	background-color:#647893;
	
	/* CSS3 Rounded Corners */
	-moz-border-radius: 0px 0px 4px 4px;
	-webkit-border-radius: 0px 0px 4px 4px;
	-khtml-border-radius: 0px 0px 4px 4px;
	border-radius: 0px 0px 4px 4px;	
}

#menu li:hover ul.dropdown  {
	display: block;
	top:40px;
	
	
}

#menu ul.dropdown li  
{
	position :relative ;
	float :none;
	margin :0;
	padding :0;
}

#menu li.icon ul.dropdown li
{
	padding :0 5px;
}

#menu ul.dropdown li:last-child
{
	/* CSS3 Stylings - Rounded Corners */
	-moz-border-radius: 0px 0px 4px 4px;
	-webkit-border-radius: 0px 0px 4px 4px;
	-khtml-border-radius: 0px 0px 4px 4px;
	border-radius: 0px 0px 4px 4px;
}

#menu ul.dropdown li:hover 
{
	background : #74869E;
}

#menu a.parent
{
	margin-right :20px;
	background :url("images/multidrop.png") no-repeat right center;
}

/* DROP DOWN MENU CHILD LEVEL */
ul.dropdown li ul
{
	list-style :none;
	position :absolute ;
	display: none;
	padding :0;
	margin :0;
	width: 160px;
	text-align :left ;
	left :150px;
	top :0px;
	background-color:#647893;
	border :solid 1px #4B5E7A;
	
	/* CSS3 Stylings - Rounded Corners */
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

ul.dropdown li:hover>ul {
	display: block;
}

/* ___________________________________________________________

	SEARCH FORM
______________________________________________________________ */

#menu li.search
{
	position :relative ;
	margin-left :10px;
}

#menu li.search:hover
{
	background :none;
}

/* TEXT INPUT */
#menu li.search #text_search
{
	font-family:Arial,Helvetica,sans-serif; 
	font-size:12px; 
	padding:6px;
	padding-right :30px; 
	margin:5px 0 5px 0;
	width :190px;
	background :#fff url('images/glass.png') no-repeat 96% center;
	
	/* border #2E3849*/
	border:1px solid #191919; 
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 4px;
	
	/* drop shadow */
	-webkit-box-shadow: 0px 1px 0px #647893;  
    -moz-box-shadow: 0px 1px 0px #647893;  
    box-shadow: 0px 1px 0px #647893;  
}

/* SEARCH BUTTON */
li.search #submit_search
{
	z-index :10;
	position :absolute ;
	top :10px;
	right :17px;
	width :20px;
	height :20px;
	border :0;
	margin :0;
	padding :0;
	background :transparent;
	cursor :pointer ;
}

/* __________________________________________________________
	
	SIGN IN FORM
_____________________________________________________________ */

#menu form.signin {
	margin:0;
	padding:0px;
	font-size :12px;
}

form.signin fieldset {
	margin:0;
	padding :0;
	border:none;
}

form.signin input#username, form.signin input#password1
{	
	font-family:Arial,Helvetica,sans-serif; 
	font-size:12px; 
	padding:4px; 
	margin:5px 0 5px 0;
	border:1px solid #191919; 
	width :208px;
	
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 4px;
}

/* _______________________________________________________________

	CONTACT FORM 
__________________________________________________________________ */

#menu form.contact {
	margin:0;
	padding:0;
}

#menu form.contact fieldset {
	margin:0;
	padding :0;
	border:none;
}	

#menu form.contact p {
	margin:10px 0;
	overflow:hidden;
}
	
#menu form.contact label {
	float:left;
	display:block;
	text-align:left;
	width:50px;
}	

#menu form.contact input,
#menu form.contact textarea {	
	margin:0;	
	width:200px;
	float:right;
	border:1px solid #191919;
	padding:4px;
	font-family:Arial,Helvetica,sans-serif; 
	font-size :12px;

	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 4px;
}		
#menu form.contact textarea {
	height:100px;
	overflow:auto;
}					

#menu form.contact button {
	float:right;
	margin:0px;
}

/* ____________________________________________________________

	CONTENT 
_______________________________________________________________ */

/* IMAGE POSITION */
.img_left { /* Image sticks to the left */
	width:auto;
	float:left;
	margin-right :10px;
}

.img_right { /* Image sticks to the right */
	width:auto;
	float:right;
	margin-left :10px;
}

/* LIST ITEM WITH BLUE BOX */
#menu ul.bluebox
{
	margin :0;
	padding :0;
}

#menu ul.bluebox li 
{
	list-style-type : none;
	width :140px;
	height :20px;
	margin: 5px 0;
	padding: 5px 0;
	
	border :solid 1px #4B5E7A;
	
	-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
	
}

#menu ul.bluebox li:hover {
	background:#74869E;
	
}

#menu ul.bluebox li a
{
	margin :0 5px;
	padding :0;
	line-height :20px;
}

/* HEADING */
#menu h2
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:21px;
	line-height:21px;
	margin-top :10px;
	margin-bottom:10px;
	padding:0 0 10px 0;
	border-bottom:1px solid #4B5E7A;
	color :#f5f5f5;
}

/* SIMPLE LIST */
#menu ul.simple
{
	margin :0;
	padding :0;
}

#menu ul.simple li 
{
	list-style-type : none;
	width :140px;
	height :20px;
	margin: 5px 0;
	padding: 0;	
}

#menu ul.simple li a
{
	margin :0 5px;
	padding :0;
	line-height :20px;
}

#menu ul.simple li a:hover
{
	text-decoration :underline;
}

/* __________________________________________________________________________ */

/* _________________________________________________________________

	COLORS
____________________________________________________________________ */

/* BLACK */

#header.black
{
	background: #191919;  
	background: -moz-linear-gradient(top, #333333, #191919); /* Firefox */
	background: -ms-linear-gradient(#333333, #191919); /* IE10 */  
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#191919));
	background: -webkit-linear-gradient(#333333, #191919); /* Safari 5.1+, Chrome 10+ */
	background: -o-linear-gradient(#333333, #191919); /* Opera 11.10 */
	background: linear-gradient(#333333, #191919); /* the standard */	
}

#header.black #menu li:hover, #header.black #menu li.click
{
	background:#4d4d4d;
}

#header.black #menu li.search:hover
{
	background :none;
}

#header.black #menu li.search #text_search
{
	-webkit-box-shadow: 0px 1px 0px #4d4d4d;  
    -moz-box-shadow: 0px 1px 0px #4d4d4d;  
    box-shadow: 0px 1px 0px #4d4d4d;  
}

#header.black #menu li ul.dropdown  {
	background-color:#4d4d4d;	
}

#header.black #menu ul.dropdown li:hover 
{
	background : #5f5f5f;
}

#header.black ul.dropdown li ul
{
	background-color:#4d4d4d;
	border :solid 1px #191919;
}

#header.black #menu li .dropcontent 
{
	background-color :#4d4d4d;
}

#header.black #menu li .fullwidthdropcontent 
{
	background-color :#4d4d4d;
}

#header.black #menu h2
{
	border-bottom:1px solid #191919;
}

#header.black #menu ul.bluebox li 
{
	border :solid 1px #191919;	
}

#header.black #menu ul.bluebox li:hover {
	background:#5F5F5F;
}

#header.black a.tooltip:hover span {
	background: #4d4d4d;
}

#header.black #maximize
{
	background-color:#333;    
}

#header.black #minimize:hover
{
	background-color :#4d4d4d;
}

#header.black #maximize:hover
{
	background-color :#4d4d4d;
}

#header.black #menu li.separator
{
	border-left :solid 1px #191919;
	border-right :solid 1px #333333;
	height :30px;
	margin :5px 5px 0 5px;
	padding :0;
}
