/*
Template Name : Meezio - An horizontal and vertical scrolling theme
Template URI : http://themeforest.net/item/meezio/83681
Author URI : http://themeforest.net/user/Keliah
Version : 3.1
*/

/*

TABLE OF CONTENTS

01 CSS RESET
02 GRID
03 GENERAL STYLES
04 SCROLL PANE (INTERNAL SCROLLBARS)
05 HEADER AND MENU
   1. Header
   2. Menu
   3. Submenus
06 IMAGES
07 TYPOGRAPHY
08 TABS
09 CONTACT
10 FOOTER
11 LEFT ALIGNED LAYOUT
12 VERTICAL LAYOUT
13 COLORS

*/



/*  _______________________________________

	01 CSS RESET
    _______________________________________  */



html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, ul, li, ol,
dl, dt, dd, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline}
:focus{outline:0}
body{line-height:1; color:black; background:white}
table{border-collapse:separate; border-spacing:0}
caption, th, td{text-align:left; font-weight:normal}
blockquote:before, blockquote:after, 
q:before, q:after{content:""}
blockquote, q{quotes:""""}



/*  _______________________________________

	02 GRID
    _______________________________________  */



/*
	Variable Grid System.
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/
	Licensed under GPL and MIT.
*/
.container{width:860px; height:500px; margin:50px auto; position:relative;border:z-index:200;}
.grid_260, 
.grid_540, 
.grid_820{display:inline; float:left; position:relative; margin-left:20px;border:0px solid black;z-index:0;}
.container .grid_260{width:260px}
.container .grid_540{width:540px}
.container .grid_820{width:820px}
.clear{clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0}
.clearfix:after{clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}



/*  _______________________________________

	03 CONTAINERS
    _______________________________________  */



html{overflow:hidden} /* Hides scrolling bars in IE */
img{border:none; margin:0; padding:0}
body{
	height:100%; 
	width:100%; 
	margin:0; 
	padding:0; 
	overflow:hidden; 
	font-family:"Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif; 
	color:#2B2B2B; 
	background:#f2f2f2 url("../images/background/pattern2.jpg") repeat;
}
/*  The following containers are all required to display properly the scrolling layout.
	The "mask" extends the layout in percentages, and "item" gives the width and the height of 1 single section.
	In the default theme, we have 2 rows containing 5 sections, for a total of 10 sections.
	So we extend the width by 5 (5 columns, or 5 section in a row) and the height by 2 (to get 2 rows).
	You could also have 4 rows containing each 10 sections, and we would have :
	
	#mask {	
		width:1000%;
		height:400%;
	}
	.item {
		width:10%;
		height:25%;
		float:left;
	}
*/

#wrapper{
	width:100%; 
	height:100%; 
	position:absolute; 
	top:0; 
	left:0; 
	overflow:hidden;
}
#mask{
	width:2000%;
	height:2000%;
}
.item{
	width:5%; 
	height:5%; 
	float:left;
}
.content{
	width:100%; 
	height:100%; 
	margin:0 auto; 
	position:relative;
}
.frame{z-index:100;}
.news{
z-index:100;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
border:1px solid #454545;
}



/*  _______________________________________

	04 SCROLL PANE (INTERNAL SCROLLBARS)
    _______________________________________  */



.scroll-pane {
	height:480px;
}
.jspContainer{overflow:hidden; position:relative}
.jspPane{position:absolute}
.jspVerticalBar{position:absolute; top:0; right:0; width:10px; height:100%}
.jspVerticalBar *{margin:0; padding:10}
.jspCap{display:none}
.jspTrack{background:#DDD; position:relative; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
.jspDrag{background:#333 url("../images/icons/drag.png") no-repeat 50% 50%; position:relative; top:0; left:0; cursor:pointer; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}	
	


/*  _______________________________________

	05 HEADER AND MENU
    _______________________________________  */



/* 1. Header */

#header { /* Container to display the background on the whole browser width */
	width:100%;
	height:80px;
	margin:0;
	padding:0;
	position:fixed;
	z-index:999;
}
	#header_box { /* Centered container for the header, contains the menu and the logo */
		width: 820px;
		margin:0px auto;
		position: relative;
		padding:0px 10px 0px 10px;/* Some left and right paddings to fix an alignment issue */
	}
	

/* 2. Menu */

#menu {
	background:none;
	margin:10px 0px 0px 0px; /* Some top spacing */
	list-style:none;
	float:left;
}
	#menu li {
		list-style:none;
		float:left;
		padding-bottom:8px;
		font-size:20px;
	}
		#menu li a {
			color:#FF0000;
			text-decoration:none;
			margin-right:40px; /* Spacing between menu items */
			font-family: 'Rammetto One',impact, cursive;		
			font-weight:bold;
			position:relative;
			z-index:888;
			padding-bottom:20px;
text-shadow: 1px 1px 1px #000;

         }
		#menu li a:hover, #menu li a.active {
			color:#08E300;
			background:url("../images/icons/menu_hover.png") no-repeat center 22px;
			*background-position:center 23px;
			_background:none;
		}
		#menu li a.submenu {
			background:url("../images/icons/submenu.png") no-repeat center 19px;
			*background-position:center 20px;
			_background:none;
		}
		#menu .submenu:hover, #menu .submenu.active {
			background:url("../images/icons/submenu_hover.png") no-repeat center 22px;
			*background-position:center 23px;
			_background:none;
		}

/* 3. Submenus */

#menu li ul {
   display: none; /* Not displayed, they appear on mouse hover */
}
#menu li:hover ul, #menu li.hover ul {
   position: absolute;
   display: inline; /* Inline positionning */
   left: 0;
   width: 100%;
   margin:0px 10px;
   padding: 40px 0;
   top:10px;
     
}
	#menu li:hover li a, #menu li.hover li a {
	   color: #000;
	   font-size:15px;
	   margin-right:20px;
	   background:url("../images/icons/bullet_menu.png") no-repeat left top;
	   _background-position:left 4px;
	   padding-left:15px;     
	}
	#menu li li a:hover {
	   color: #00ff00;
       -webkit-text-stroke: 1px black;
	   background:url("../images/icons/bullet_menu_hover.png") no-repeat left top;
	   _background-position:left 4px;
	}



/*  _______________________________________

	06 IMAGES
    _______________________________________  */



.thumbnail{width:260px; height:70px; padding:0; margin:0 0 25px 0}
.thumbnail li{float:left; display:block}
.thumb{margin-right:25px}
.portfolio260{height:125px; width:260px; margin-bottom:20px; display:inline; float:left; position:relative; border:#2B2B2B solid 1px}
.arrow{position:absolute; bottom:22px; left:0px}
.previous a, .next a{display:block; width:39px; height:55px}
.previous{float:left; margin-left:0px; left:0; background:url("../images/icons/previous_h2.png") no-repeat left bottom}
.next{float:right; background:url("../images/icons/next_h2.png") no-repeat right bottom}
.previous a:hover, .next a:hover{text-decoration:none}
.previous span, .next span{display:none}
.iconbar{float:left; list-style:none; margin-bottom:20px; position:relative; width:260px}
.iconbar li{width:24px; height:24px; margin-right:10px; float:left; position:relative}
img.items{border:2px solid black;}
ul{list-style:none;}





/*  _______________________________________

	07 TYPOGRAPHY
    _______________________________________  */



p, h1, h2, h3, h4, h5, h6 {
	margin-bottom:15px;
	padding:0;
	color:#555555;
}

p {	
	font-size:11px;
	line-height:16px;
	padding:0;
	text-align:justify;
}
h1, h2, h3, h4, h5, h6 {
	font-family:Arial, Helvetica, sans-serif;
}
h1 {
	font-weight:bold;
	font-size:26px;
	color:#2B2B2B;
	line-height:36px;
	margin-bottom:24px;
}
h1.title {
	font-weight:bold;
	font-size:26px;
	color:#2B2B2B;
	line-height:36px;
	margin-bottom:10px;
}
h2 {
	font-weight:bold;
	font-size:18px;
	color:#2B2B2B;
	margin-bottom:15px;
}
.black {
	font-weight:bold;
}
a {
	text-decoration:none;
	font-weight:bold;
}
	a:hover {
		text-decoration:underline;
	}
	h1 a:hover {
		text-decoration:none;
	}
.list {
	font-size: 11px;
	font-weight:bold;
	line-height:18px;
	margin:0 0 15px 15px;
}
	.list li {
		text-indent: 0px;
	}

#back {
	margin:160px 0px 0px 340px;
}

.shadow{
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}


/*  _______________________________________

	08 TABS
    _______________________________________  */



ul.tabs{margin:0px 0px 10px 0px; padding:0; float:left; list-style:none; height:32px; width:100%}
ul.tabs li{float:left; margin:0px 20px 0px 0px; padding:0; overflow:hidden; position:relative}
ul.tabs li a{font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:16px; text-decoration:none; color:#2B2B2B; display:block; padding:5px 5px 10px 5px; outline:none}
ul.tabs li a:hover{background:url("../images/icons/tabs_hover.png") no-repeat center bottom; color:#FFFFFE; text-decoration:none}
html ul.tabs li.current a, html ul.tabs li.current a:hover{background:url("../images/icons/tabs_hover.png") no-repeat center bottom; color:#FFFFFE}
.tab_content{padding:0px}
.tab_container{overflow:hidden; clear:both; float:left; width:100%}



/*  _______________________________________

	09 CONTACT FORM
    _______________________________________  */



.form{font-family:"Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif; font-size:11px}
.form label{font-weight:bold; padding:0; margin:0}
.form ul li{list-style:none; display:inline}
#name, #email, #message{width:260px; padding:0 3px 0 3px; border:none; margin:5px 0 5px 0; background-color:#FFF; border:#2B2B2B solid 1px; font-size:12px}
#name, #email{height:20px}
#message{font-family:"Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif; height:75px; overflow:auto}
.button{font-family:"Lucida Sans Unicode","Lucida Grande",Arial,Helvetica,sans-serif; font-size:11px; background:#FFF; border:#2B2B2B solid 1px; margin:5px 15px 0px 0px; float:left; height:22px; width:70px}
.button:hover{background:#333334; color:#FFF; border:#2B2B2B solid 1px}
.message{display:none; width:260px; float:left; margin-bottom:5px;}
#alert li{width:auto; float:left; list-style:none;}
.error{font-size:11px; color:#ED4340}
.sent{font-size:11px; color:#75A133}
.contact{position:relative}
.contact ul{list-style-type:none}
.contact li.special{display:none}



/*  _______________________________________

	10 FOOTER
    _______________________________________  */



#footer { /* Footer container (whole browser width) */
	position: absolute;
	bottom: 0;
	/*border-top:#999 solid 1px;
	border-bottom:#999 solid 1px;*/
	width: 100%;
	height:30px;
	padding-top:10px;
}
	#footer_box { /* Centered footer container with som padding to align properly the content */
		width: 820px;
		height:30px;
		margin:0px auto;
		position: relative;
		padding:0px 10px 0px 10px;
	}



/*  _______________________________________

	11 LEFT ALIGNED LAYOUT
    _______________________________________  */



.left_aligned #mask {
	width:20000px; 
	height:100%;
}
.left_aligned .item {
	width:950px;
	height:100%;
	float:left;
}
.left_aligned .content{
	width:auto; 
	height:100%; 
	margin:0; 
	position:relative;
}
.left_aligned #header { /* Container to display the background on the whole browser width */
	width:100%;
	height:120px;
	margin:0;
	padding:0;
}
	.left_aligned #header_box { /* Centered container for the header, contains the menu and the logo */
		width: 820px;
		margin:0px 0px 0px 55px;
		position: relative;
		padding:0px 10px 0px 10px; /* Some left and right paddings to fix an alignment issue */
	}



/*  _______________________________________

	12 VERTICAL LAYOUT
    _______________________________________  */



.vertical_layout .previous, .vertical_layout .next {
	width:26px;
	height:17px;
}
.vertical_layout .previous {
	background:url("../images/icons/previous_v.png") no-repeat left bottom;
}
.vertical_layout .next {
	background:url("../images/icons/next_v.png") no-repeat right bottom;
}



/*  _______________________________________

	13 COLORS
    _______________________________________  */



/* 1. Blue */

.blue a,
.blue .colored,
.blue .previous a:hover,
.blue .next a:hover,
.blue .list {
	color:#6495ed;
}
.blue .list {
	list-style-image: url("../images/icons/bullet_blue.jpg");
}

/* 2. Brown */

.brown a,
.brown .colored,
.brown .previous a:hover,
.brown .next a:hover,
.brown .list {
	color:#987554;
}
.brown .list {
	list-style-image: url("../images/icons/bullet_brown.jpg");
}

/* 3. Green */

.green a,
.green .colored,
.green .previous a:hover,
.green .next a:hover,
.green .list {
	color:#75a653;
}
.green .list {
	list-style-image: url("../images/icons/bullet_green.jpg");
}

/* 4. Orange */

.orange a,
.orange .colored,
.orange .previous a:hover,
.orange .next a:hover,
.orange .list {
	color:#f75e11;
}
.orange .list {
	list-style-image: url("../images/icons/bullet_orange.jpg");
}

/* 5. Pink */

.pink a,
.pink .colored,
.pink .previous a:hover,
.pink .next a:hover,
.pink .list {
	color:#ff5489;
}
.pink .list {
	list-style-image: url("../images/icons/bullet_pink.jpg");
}

/* 6. Purple */

.purple a,
.purple .colored,
.purple .previous a:hover,
.purple .next a:hover,
.purple .list {
	color:#9173b7;
}
.purple .list {
	list-style-image: url("../images/icons/bullet_purple.jpg");
}

/* 7. Red */

.red a,
.red .colored,
.red .previous a:hover,
.red .next a:hover,
.red .list {
	color:#f02311;
}
.red .list {
	list-style-image: url("../images/icons/bullet_red.jpg");
}

/* 8. Salmon */

.salmon a,
.salmon .colored,
.salmon .previous a:hover,
.salmon .next a:hover,
.salmon .list {
	color:#9D524D;
}
.salmon .list {
	list-style-image: url("../images/icons/bullet_salmon.jpg");
}

/* 9. Yellow */

.yellow a,
.yellow .colored,
.yellow .previous a:hover,
.yellow .next a:hover,
.yellow .list {
	color:#E8B36D;
}
.yellow .list {
	list-style-image: url("../images/icons/bullet_yellow.jpg");
}