@charset "UTF-8";
/* CSS Document */

/*-------------------------------------
web font sample
---------------------------------------

amplitudelight {
  font-family: "Amplitude Light";
  font-style: normal;
  font-weight: normal;
}

.amplitudemedium {
  font-family: "Amplitude Medium", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
}

.amplituderegular {
  font-family: Amplitude;
  font-style: normal;
  font-weight: normal;
}
*/
a:link, a:active, a:visited {color:#696a6d; font-weight:bold}
a:hover {color:#83add3/*replace green*/}

strong{font-size:110%}

p {margin:0 0 15px}

h1{
	font-size:24px;
    font-family: "Amplitude Medium", Amplitude, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
	color:#83add3;
	text-transform: none;
	line-height:24px;
}
h2{
	font-size:20px;
	font-family: "Amplitude Medium", Amplitude, Arial, sans-serif;
	font-style: normal;
	font-weight: bold;
	color:#83add3;
	text-transform: none;
	line-height:18px;
	margin:15px 0 5px;
}
h3{
	font-size:24px;
    font-family: "Amplitude Medium", Amplitude, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
	color:#fff;
	text-transform: none;
	line-height:24px;
}
h4{
	font-size:18px;
    font-family: "Amplitude Medium", Amplitude, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
	color:#83add3;
	line-height:18px;
	margin:10px 0 0;
}
h5{
	font-size:18px;
    font-family: "Amplitude Medium", Amplitude, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
	color:#999;
	line-height:18px;
	margin:0 0 20px;
}
h6{
	font-size:18px;
    font-family: "Amplitude Medium", Amplitude, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
	color:#f89828;
	line-height:18px;
	margin:10px 0;
}
.blue{
	font-size:18px;
    font-family: "Amplitude Medium", Amplitude, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
	color:#83add3;
	line-height:14px;
	margin:10px 0 0;
}
.orange{
	color:#f89828;
	font-size:115%;
	}
	
mark div{
	padding:10px 20px;
	color:#696a6d;
	font-size:14px;
	font-family: Arial, sans-serif;
	line-height:18px;
	}
	
/*-------------HEADER--------------*/
header img.hdr{
	display: none;
}
header img.hdr-mobile{
	display:block;
}
/*-------------COLUMNS--------------*/
#col1 #content, #col3 #content{
	padding:15px 25px 50px;
	color:#696a6d;
	font-size:14px;
	font-family: Arial, sans-serif;
	line-height:18px;
	}
	#col1 #content small{
		color:#444;
		font-size:11px;
		font-weight:normal;
		font-style:italic;
		font-family: Arial, sans-serif;
		line-height:12px;
	}
#col2 div{ 
		padding:10px 25px 0;
		margin:30px 0;
	}
	#col2 div img{
		float:left;
		margin:0 25px 0 0;
		width:125px
	}
	#col2 div p{
		clear:both;
		color:#FFF;
		font-size:18px;
  		font-family: Amplitude, Arial, sans-serif;
  		font-style: normal;
  		font-weight: normal;
		line-height:26px;
		border-bottom:2px solid #DDD;
		padding:20px 0;
	}
	#col2 small{
		color:#DDD;
		font-size:11px;
		font-weight:bold;
		font-family: Arial, sans-serif;
		line-height:12px;
	}
	
	#col2 a:link, #col2 a:active, #col2 a:visited {color:#EEE;}
	#col2 a:hover {color:#789}
/*-------------ARROWS--------------*/
ul#arrows {
    margin: 25px 0;
}

ul#arrows li {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin: 5px 1px 0 0;
    text-indent: 20px;
    position: relative;
	font-size:14px;
  font-family: Amplitude;
  font-style: normal;
  font-weight: normal;
}

ul#arrows li:before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    left: -2px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #fff;
    z-index: 0;
}

ul#arrows li:first-child:before {
    border-color: transparent;
}

ul#arrows li a:after, ul#arrows li.last a:after {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -15px;
    z-index: 10;
}
ul#arrows li a:after{
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #83add3;
}
ul#arrows li.last a:after{
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #888;
}
ul#arrows li.active a {
    background: #f89828;
    z-index: 100;
}

ul#arrows li.active a:after {
    border-left-color: #f89828;
}

ul#arrows li a, ul#arrows li.last a {
    display: block;
	color:#FFF;
	padding-right:10px;
	text-decoration:none;
font-weight:normal;
}
ul#arrows li a{background: #83add3;}
ul#arrows li.last a {background: #888;}

ul#arrows li a:hover {
    background: #f89828;
	color:#696a6d;
}

ul#arrows li a:hover:after {
    border-color: transparent transparent transparent #f89828; 
}
​
/*-------------CALCULATOR--------------*/
	#calculator-bkg{
		clear:both;
		display:block;
		width:100%;
		background-color:#e9edef;
		margin-left:50px;
		margin-bottom:25px;
		border-top:2px solid #fff;
		border-right:2px solid #ccc;
		border-bottom:2px solid #ccc;
		border-left:2px solid #fff;
		/*corners*/
		border-radius: 20px;
		-moz-border-radius: 20px;
		-webkit-border-radius: 20px;
	}
	#calculator-bkg table{margin:10px}
	.calculator{
		display:block;
		margin:0 20px;
		width:110px;
		background:#999 url(../images/calculator-bkg.gif) top repeat-x;
		border-top:1px solid #696a6d;
		border-right:1px solid #ccc;
		border-bottom:1px solid #ccc;
		border-left:1px solid #696a6d;
		/*corners*/
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
	label {
		margin:28px 0;
		display:block;
		font-size:16px;
		font-family: Arial, sans-serif;
		color:#696a6d;
		border-bottom: 1px solid #ddd;
	}
	input.field1{
		margin:15px 0 0;
		width: 80px;
		padding: 5px 0;
		background-color:#FFF;
		text-align:center;
		font-size:18px;
		font-family: Arial, sans-serif;
		color:#000;
		border-top:1px solid #ddd;
		border-right:1px solid #ccc;
		border-bottom:1px solid #ccc;
		border-left:1px solid #ddd;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	}
	input.field2{
		margin:15px 0;
		width: 80px;
		padding: 5px 0;
		font-size:24px;
		font-weight:bold;
		text-align:center;
		color: #069;
		background-color:#ddd
	}
		
/*-------------FOOTER--------------*/
footer p{
	padding: 45px 15px 15px;
	font-size:12px;
	font-family: Arial, sans-serif;
	color:#FFF;
	text-align:center;	
	}
footer a:link, footer a:active, footer a:visited{
	color:#FFF;	
	}
footer a:hover{
	color:#f89828;	
	}
/*-----------------------------NAVIGATION------------------------------*/
#nav-link a{
display: block;
text-decoration: none;
margin: 0;
padding:2px 10% 0 0;
color: white;
background: #83add3; /*background of tabs (default state)*/
text-align:right;
width:90%;
height:20px;
line-height:20px;
font-weight:normal;
}
#nav-link a:hover{
background: #f89828; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
color:#696a6d;
}
/* ---------------------------MAIN MENU*/
#menu{
width: 100%;
overflow: hidden;
}

#menu ul{
margin: 0;
padding: 0;
font-size:14px;
  font-family: Amplitude, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
list-style-type: none;
}

#menu li{
display: block;
margin: 0;
}

#menu li a{
display: block;
text-decoration: none;
margin: 0;
padding:2px 0 0;
color: white;
background:#83add3; /*background of tabs (default state)*/
text-align:center;
width:100%;
height:22px;
line-height:22px; /*centers with height*/
border-bottom: 1px solid white; /*right divider between tabs*/
font-weight:normal;
}

#menu li a:hover, #menu li.last a:hover{
background: #f89828; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
color:#696a6d;
}
#menu li.selected a{
background: #f89828; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
color:#FFF;
}
#menu li.selected a, #menu li.last a{
text-align:center;
}
#menu li.last a{
border-right: 0; /*right divider between tabs*/
}

/* Tablet Layout: 600px to 1000px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 600px) {
	
h1{
	font-size:30px;
	font-weight:700;
	line-height:32px;
}
h2{
	font-size:24px;
	font-weight:700;
	line-height:26px;
}
h3{
	font-size:24px;
	font-weight:700;
	line-height:26px;
}	
header img.hdr{
	display: block;
}
header img.hdr-mobile{
	display: none;
}
#col1 #content, #col3 #content{
	padding:15px 15px 50px;
	color:#696a6d;
	font-size:14px;
	font-family: Arial, sans-serif;
	line-height:18px;
	}
#col2 div{
	padding:15px 15px 0;
	}
	#col2 div img{
		float: none;
		width:196px;
	}
footer p{
	padding: 25px;
	text-align:right;
}
#menu li a, #menu li.selected a, #menu li.last a{
	display:block;
	padding:2px 10% 0 0;
	width:90%;
	text-align:right;
font-weight:normal;
}
}
/* Desktop Layout: 769px to a max of 1000px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1002px) {

header img.hdr{
	display: block;
}
header img.hdr-mobile{
	display: none;
}	
#col1 #content, #col3 #content{
	padding:25px 50px 100px;
	color:#696a6d;
	font-size:14px;
	font-family: Arial, sans-serif;
	line-height:18px;
	}
#col2 div{
	padding:20px 30px;
	}
#menu{
	width:71.25%;
	margin-left:28.75%;
}
#menu li{
display: inline;
margin: 0;
}
#menu li a{
float: left;
background: #888; /*background of tabs (default state)*/
border-right: 2px solid white; /*right divider between tabs*/
border-bottom:0;
height:30px;
line-height:30px;
font-weight:normal;
}
#menu li a, #menu li.selected a, #menu li.last a{
width:auto;
padding:2px 20px 0;
text-align:center;
}
#menu li a:hover, #menu li.selected a, #menu li.last a:hover{
background: #f89828; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
color:#FFF;
}
}