/*
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
heavily edited by Ed Cloutier, EC Studio
*/

/*

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
14 CUSTOM LAYOUTS BY EC STUDIO

*/


/*  _______________________________________

	01 CSS RESET
    _______________________________________  */

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, 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, 
dl, dt, dd, ol, ul, li, 
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}
ol, ul{list-style:none}
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:590px; margin:10px auto; position:relative; min-height:590px;}
.grid_260, 
.grid_540, 
.grid_820{display:inline; float:left; position:relative; margin-left:20px}
.grid_820h{display:inline; position:relative;text-align:center; margin: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:"Open Sans",Arial,Helvetica,sans-serif; 
	color:#619ee1; 
	background:url("../images/background/bg-wave2.jpg") repeat-y;
	background-position:top center;
 /*	background:url("../images/background/pattern2.jpg") repeat; */
}
/*  The following containers are all required to display the scrolling layout properly.
	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%; 
	 min-height:590px;
	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;
}

/*  _______________________________________

	04 SCROLL PANE (INTERNAL SCROLLBARS)
    _______________________________________  */

.scroll-pane {
	height:260px;
}

.jspContainer{overflow:hidden; position:relative}
.jspPane{position:absolute}
.jspVerticalBar{position:absolute; top:0; right:0; width:10px; height:100%}
.jspVerticalBar *{margin:0; padding:0}
.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  - REMOVED
    _______________________________________  */

/*  _______________________________________

	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, .home-nav a {display:block; width:34px; height:32px;}
.previous{float:left; margin-left:-10px; left:0; margin-top:-260px; background:url("../images/icons/arrow-l.png") no-repeat left bottom}
.next{float:right;  margin-top:-260px; margin-right:-8px; background:url("../images/icons/arrow-r.png") no-repeat right bottom}
.home-nav{float:left; margin-left:-56px;  margin-top:-260px; background:url("../images/icons/arrow-h.png") no-repeat left bottom}
.previous a:hover, .next a:hover, .home-nav a{text-decoration:none}
.previous span, .next span, .home-nav 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}

/*  _______________________________________

	07 TYPOGRAPHY
    _______________________________________  */

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

p {	
	font-size:13px;
	line-height:16px;
	padding:0;
	text-align:left;
}
h1, h2, h3, h4, h5, h6 {
	font-family:"Open Sans", Arial, Helvetica, sans-serif ;
}
h1 {
	margin:0;
	color:#fff;
/*	color:#69a0d8; */
	line-height:36px;
	font-weight:bold;
	font-size:26px;
/*	color:#2B2B2B;
	margin-bottom:24px; */
}
h2 {
	font-weight:bold;
	font-size:18px;
	color:#2B2B2B;
	margin-bottom:15px;
}
h3 {
	font-weight:bold;
	font-size:12px;
	color:#ffffff;
	background-image: url('../images/h3-bg.png');
	background-repeat:repeat-x;
	margin-bottom:15px;
	padding:4px 0 4px 10px;
}
.black {
	font-weight:bold;
}
a {
	text-decoration:none;
	font-weight:normal;
}
a:hover {
	text-decoration:underline;
	}
h1 a:hover {
	text-decoration:none;
	}
.list {
	font-size: 13px;
	font-weight:normal;
	line-height:16px;
	margin:0 0 10px 15px;
}
.list li {
	text-indent: 0px;
	}

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

/*  _______________________________________

	08 TABS
    _______________________________________  */

/*  _______________________________________

	09 CONTACT FORM
    _______________________________________  */


/*  _______________________________________

	10 FOOTER
    _______________________________________  */

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

	11 LEFT ALIGNED LAYOUT - REMOVED
    _______________________________________  */

/*  _______________________________________

	12 VERTICAL LAYOUT - REMOVED
    _______________________________________  */


/*  _______________________________________

	13 COLORS
    _______________________________________  */

/* Roger colours */

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

/*  _______________________________________

	14 CUSTOM STYLES by EC Studio
    _______________________________________  */
    
	.bounding_box748 {
		background-image:url('../images/bg-box748x530-2.png');
		background-repeat:no-repeat;
		width:748px; 
		height:530px; 
		margin-left:56px;
	}
		
	.bounding_box820 {
		background-image:url('../images/bg-box820.png');
		width:820px; 
		height:350px; 
		margin-left:20px;
	}
		
	.bounding_box-about {
		background-image:url('../images/bg-box-about.png');
		width:820px; 
		height:310px; 
		margin-left:20px;
	}
	
	.bounding_box700 {
		background-image:url('../images/bg-box700.png');
		width:700px; 
		height:350px; 
		margin-left:60px;
	}
		
	#surfover {
		float:left;
		width:258px;
		height:114px;
		top:200px; 
		left: 200px; 
		position:relative;
	}

	.footerbg-each {
		float:left;
		background: url('../images/footerbg-each.png') no-repeat;
		width:200px;
		height:19px;
		margin: 0; padding: 0px;
	}
	.footerbg-last {
		float:left;
		background: url('../images/footerbg-last.png') no-repeat;
		width:173px;
		height:19px;
		margin: 0; padding: 0;
	}
	.footerbg-each p, .footerbg-last p {
		color: white;
		font-size:.8em;
		margin: 1px 24px 0 0;
		text-align:center;
}
	.footerbg-each a, .footerbg-each a:active, .footerbg-each a:visited, .footerbg-last a, .footerbg-last a:active, .footerbg-last a:visited  {
		color: white;
		text-decoration:none;
		font-weight:normal;
}
	.footerbg-each a:hover, .footerbg-last a:hover  {
		color: white;
		text-decoration:underline;
		font-weight:normal;
}