/* ---- General ---- */

html, body {
height: 100%;
margin: 0;
}

#main-wrap {
position: relative;
min-width: 960px;
min-height: 100%;
width: 100%;
}

.container-wrap {
overflow: hidden;
}

.container {
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
}

.container:after { 
content: ".";  
display: block; 
height: 0px; 
clear: both; 
visibility: hidden; 
}

#page-content > *:last-child {
margin-bottom: 0;
padding-bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
}


/* ---- Header ---- */

#header-container, #header {
overflow: visible; /* do not remove this */
}

/* ---- Navigation ---- */

#main-nav-menu > ul {
	list-style:none;
	position:relative;	
	z-index:9999;
}

#main-nav-menu ul, #main-nav-menu ul li {
	margin: 0;
	padding: 0;
	white-space:nowrap;
}

/* top level items */
	
#main-nav-menu > ul > li {
	position: relative;
	float: left;
}

#main-nav-menu > ul > li > a {
	display: inline-block;
	text-decoration:none;
}

/* sub-menus */

#main-nav-menu > ul li ul.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
}

#main-nav-menu > ul li:hover > ul.sub-menu {
	display: block;
}

#main-nav-menu > ul li ul.sub-menu li {
	display: block;
	position: relative;
	float: none;
}

#main-nav-menu > ul li ul.sub-menu li a {
	display: block;
	text-decoration:none;
}

/* sub-sub-menus */

#main-nav-menu > ul li ul.sub-menu li ul.sub-menu{
	top: 0;
	left: 100%;
}

/* ---- Typography ---- */

a img{
vertical-align: bottom;
}

p, pre, code, ul, ol, dl, dd, blockquote, address, table, fieldset, form, hr{
margin-bottom: 20px;
}

ol ol, ol ul, ul ul{
margin-bottom: 0;
}

hr{
margin: 20px 0;
}

/* headings */

h1,h2,h3,h4,h5,h6{
margin-bottom: 10px;
}

h1 {
font-size: 24pt;
line-height: 125%;
}

h2 {
font-size: 20pt;
line-height: 125%;
}

h3 {
font-size: 16pt;
line-height: 125%;
}

h4 {
font-size: 14pt;
line-height: 125%;
}

h5 {
font-size: 12pt;
line-height: 125%;
}

h6 {
font-size: 10pt;
line-height: 125%;
}

/* blockquote */

blockquote {
padding-left: 30px;
}

/* code/pre */

code, pre {
display: block;
clear: both;
overflow: auto;
padding: 20px;
line-height: 20px;
white-space: pre;
}

/* lists (ordered & un-ordered) */

ul, ol {
margin-left: 30px;
list-style-position: inside;
zoom: 1;
}

/* table */

table {
width: 100%;
vertical-align: middle;
border-collapse: collapse;
border-spacing: 0;
}

th, th:hover, td {
padding: 10px;
text-align: left;
line-height: 1.5em;
}

/*----- Forms ----*/

input[type=text], input[type=password], textarea {
max-width: 100%;
outline: none;
}

form .tbox textarea {
min-height: 70px;
}

/*---- Responsive ----*/
 
.columns-1{ max-width:80px; }
.columns-2{ max-width:160px; }
.columns-3{ max-width:240px; }
.columns-4{ max-width:320px; }
.columns-5{ max-width:400px; }
.columns-6{ max-width:480px; }
.columns-7{ max-width:560px; }
.columns-8{ max-width:640px; }
.columns-9{ max-width:720px; }
.columns-10{ max-width:800px; }
.columns-11{ max-width:880px; }
.columns-12{ max-width:960px; }
*[class *= "columns-"]{ position:relative; float:left; }
*[class *= "columns-"]:first-child{ clear: right; }


/* 1024px */

@media(max-width: 950px){
	
	#main-wrap{ min-width: 760px; }
	.container{ max-width: 760px; } 
	
	/* columns */
	.columns-1{ max-width:45px; }
	.columns-2{ max-width:110px; }
	.columns-3{ max-width:175px; }
	.columns-4{ max-width:240px; }
	.columns-5{ max-width:305px; }
	.columns-6{ max-width:370px; }
	.columns-7{ max-width:435px; }
	.columns-8{ max-width:500px; }
	.columns-9{ max-width:565px; }
	.columns-10{ max-width:630px; }
	.columns-11{ max-width:695px; }
	.columns-12{ max-width:760px; }
	*[class *= "columns-"]{ }
	
}

/* 768px */

@media(max-width: 768px){
	
	#main-wrap{ min-width: 640px; }
	.container{ max-width: 640px; } 
	
	/* columns */
	.columns-1{ max-width:35px; }
	.columns-2{ max-width:90px; }
	.columns-3{ max-width:145px; }
	.columns-4{ max-width:200px; }
	.columns-5{ max-width:255px; }
	.columns-6{ max-width:310px; }
	.columns-7{ max-width:365px; }
	.columns-8{ max-width:420px; }
	.columns-9{ max-width:475px; }
	.columns-10{ max-width:530px; }
	.columns-11{ max-width:585px; }
	.columns-12{ max-width:640px; }
	*[class *= "columns-"]{ }
	
}

/* 640px */

@media(max-width: 660px){
	
	#main-wrap{ min-width: 480px; }
	.container{ max-width: 480px; } 
	
	/* columns */
	*[class *= "columns-"]{width: 100%; float: none;}	
}

/* 480px */

@media(max-width: 500px){
	
	#main-wrap{ min-width: 280px; }
	.container{ max-width: 280px; } 
	
}