/* =============================================
*
*   PLUTOCALC
*
*   Daniel Brooke Peig for the Plutocalc application
*   http://www.danbp.org
*
*   Based in the RESPONSIVE NAV template
*   from @adtileHQ
*   http://www.adtile.me
*   http://twitter.com/adtilehq
*
*   Free to use under the MIT License.
*
* ============================================= */

html {
    overflow-y: scroll;
}

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
margin: 0;
padding: 0;
border: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


a,
a:active,
a:hover {
color: #990000;
outline: 0;
}

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* ------------------------------------------
RESPONSIVE NAV STYLES
--------------------------------------------- */

.nav-collapse ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
	list-style: none;
}

.nav-collapse li {
width: 100%;
display: block;
}

.js .nav-collapse {
clip: rect(0 0 0 0);
	max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}

.nav-collapse.opened {
	max-height: 9999px;
}

.disable-pointer-events {
	pointer-events: none !important;
}

.nav-toggle {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

@media screen and (min-width: 1080px) {
	.js .nav-collapse {
position: relative;
	}
	.js .nav-collapse.closed {
		max-height: none;
	}
	.nav-toggle {
display: none;
	}
}


/* ------------------------------------------
GENERAL STYLES
--------------------------------------------- */

body {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
color: #37302a;
background: #fff;
font: normal 80%/1.2em sans-serif; /*normal 75%/1.4 sans-serif;*/
}

@media screen and (min-width: 1080px) {
	body {
font: normal 100%/1.4 sans-serif;
	}
}

section {
	/*border-bottom: 1px solid #999;*/
	text-align: center;
padding: 10px 0 0;
	min-height: 1024px; /*800px*/
width: 100%;
	/*min-width: 400px;*/
}

@media print{
	section {
		border-bottom: 0px;
		min-height: 0px !important;
	}	
}

@media screen and (min-width: 1080px) {
	section {
padding: 20px 0 0;
font: normal 100%/1.4 sans-serif;
	}
}


h1 {
	margin-bottom: 1.5em;
}

@media print{
	h1 {
display: none; !important;
	}
}

p {
width: 90%;
margin: 0 20px auto;
}


/* ------------------------------------------
FIXED HEADER
--------------------------------------------- */

header {
background: #36556F;
position: fixed;
	z-index: 3;
width: 100%;
left: 0;
top: 0;
padding-right: 20px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

@media print{
	header {
display: none !important;
	}
}

.logo {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background-image:url("../icons/h2oc.png");
	background-repeat:no-repeat;
	background-position:10px 5px;
	text-decoration: none;
font: 150% sans-serif;
	font-weight: bold;
	line-height: 40px; /*55px*/
padding: 0 50px;
color: #fff;
float: left;
}

a.logo:hover {
color: #fff;
}

@media screen and (min-width: 1080px) {
	.logo {
padding: 0px 50px;
	}
}


/* ------------------------------------------
MASK
--------------------------------------------- */

.mask {
	-webkit-transition: opacity 300ms;
	-moz-transition: opacity 300ms;
transition: opacity 300ms;
background: rgba(0,0,0, .5);
visibility: hidden;
position: fixed;
opacity: 0;
	z-index: 2;
bottom: 0;
right: 0;
left: 0;
top: 0;
}

@media print{
	.mask {
display: none; !important;
	}
}

.android .mask {
	-webkit-transition: none;
transition: none;
}

.js-nav-active .mask {
visibility: visible;
opacity: 1;
}

@media screen and (min-width: 1080px) {
	.mask {
display: none !important;
opacity: 0 !important;
	}
}


/* ------------------------------------------
NAVIGATION STYLES
--------------------------------------------- */

.fixed {
position: fixed;
width: 100%;
left: 0;
top: 0;
}

.nav-collapse,
.nav-collapse * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font: normal 110%/0.8em sans-serif;
}

.nav-collapse,
.nav-collapse ul {
	list-style: none;
width: 100%;
float: left;
}

@media screen and (min-width: 1080px) {
.nav-collapse,
.nav-collapse * {
float: right;
width: auto;
font: normal 100%/0.8em sans-serif;
	}
}

.nav-collapse li {
float: left;
width: 100%;
}

@media screen and (min-width: 1080px) {
	.nav-collapse li {
width: auto;
	}
}

.nav-collapse a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	border-top: 1px solid white;
	text-decoration: none;
background: #36556F;
padding: 0.4em 1em;/* Left value changes height and right changes width*/
color: #fff;
width: 100%;
float: left;
}

.nav-collapse a:active,
.nav-collapse .active a {
background: #7391A4;
}

.nav-collapse a:hover {
background: #5c8a8d;
}

@media screen and (min-width: 1080px) {
	.nav-collapse a {
		border-left: 1px solid white;
padding: 0.9em 0.6em; /* Left value changes height and right changes width*/
		text-align: center;
		border-top: 0;
float: left;
margin: 0;
	}
}

.nav-collapse ul ul a {
background: #ca3716;
	padding-left: 2em;
}

@media screen and (min-width: 1080px) {
	.nav-collapse ul ul a {
display: none;
	}
}


/* ------------------------------------------
NAV TOGGLE STYLES
--------------------------------------------- */

.nav-toggle {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-decoration: none;
	text-indent: -300px;
position: relative;
overflow: hidden;
width: 60px;
height: 40px;
float: right;
}

.nav-toggle:before {
color: #fff; /* Edit this to change the icon color */
font: normal 28px/40px FontAwesome; /* Edit font-size (28px) to change the icon size */
	text-transform: none;
	text-align: center;
position: absolute;
content: "\f0c9"; /* Hamburger icon */
text-indent: 0;
speak: none;
width: 100%;
left: 0;
top: 0;
}

.nav-toggle.active:before {
	font-size: 24px;
content: "\f00d"; /* Close icon */
}



/* ------------------------------------------
DANIEL BROOKE PEIG CUSTOMIZATIONS
--------------------------------------------- */
/*
#CCC;= Light Dark grey
#EEE; = Light Grey
#999; = Grey
*/

/*Input boxes*/
input[type=number], select {
	border-style:solid;
	border-color:grey;
	border-width:1px;
	border-radius:3px;
	margin-right:3px;
	margin-left:5px;
}

input[type=number] {
	width: 60px;
} 

@media screen and (min-width: 1080px) {
	input[type=number] {
		width: 60px;
	} 
}

@media print{
	input[type=number], select {
		border:0px;
		border-radius:0px;
		margin-right:3px;
		text-align: right;
		background-color: transparent !important;
	}
	input[type=number] {
		width: 100px;
	} 
}

/* Removes the (useless) spinner from the browsers */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* Removes the validation of auto-calculated fields no Mozilla */
input[type=number]:invalid {
	-webkit-appearance: none;
	box-shadow: none !important;
	outline: none;
}

input[type=number]:valid {
	-webkit-appearance: none;
	box-shadow: none !important;
	outline: none;
}

input.active {
	background-color: #D6EAFF;
} 

input.invalid {
	background-color: #FF704D;
}

input.normal {
	background-color: white;
}

input.required {
	background-color: #FFFF66;
}

input.requiredalt {
	background-color: #FFFFCC;
}

input.disabled {
	background-color: #DDDDDD;
}

/*Tables*/
table, th, td {
	text-align:left;
	padding-right:  0px;
	padding-left:  10px;
} 

p.small {
	font-size:small;
	text-align:center;
}

p.TextLeft
{
	font-size:normal;
	text-align:left;
}

p.alert
{
color:red;
	text-align:left;
}

hr {
color: #999;
	background-color: #999;
height: 1px;
	margin-bottom: 10px;
}

#PlutocalcFooter {
display: none;
}

@media print {
	#PlutocalcFooter {
display: block;
padding: 10px;
font: normal 75%/1.4 sans-serif;
position: fixed;
bottom: 0;
	}
}

.internal_shortcut {
	/*display: none;*/
}

.internal_conversion {
	/*display: none;*/
}


@media print {
	.internal_shortcut {
display: none;
	}
	.internal_conversion{
	color: black;
	}
}

#LanguageBar {
	/*display: none;*/
}

@media print {
	#LanguageBar {
display: none;
	}
}

/* ------------------------------------------
SUBSCRIPT AND SUPERSCRIPT ADJUSTMENTS
--------------------------------------------- */

sub, sup {
	line-height: 0;
	font-size: 75%;
	position: relative;
	vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

/* ------------------------------------------
COLLAPSE PANEL SETTINGS
--------------------------------------------- */

/*Panel */
.panel, .panelcollapsed 
{
padding: 0px 0px 0px;
margin: 0px 0px 5px;
width: 100%;
}

@media screen and (min-width: 1080px) {
	.panel, .panelcollapsed 
	{
margin: 0px 0px 8px;
	}
}

@media print{
	.panel  {
		page-break-after  : avoid;
		page-break-before : always;
		page-break-inside : avoid;
	}
}


/*Panel heading */
.panel h2, .panelcollapsed h2 
{
	margin: 0px;
	padding: 0.5em;
	background-color: #EEE; 
	font-size: 120%;
}

.panel h2 i:before
{
	display: inline-block;
	font: normal normal normal 110% FontAwesome;
	text-rendering: auto;
    float: left;
	padding-left: 10px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\f077";
}

@media screen and (min-width: 1080px) {
	.panel h2, .panelcollapsed h2 
	{
	font-size: 100%;
	padding: 0.15em;
	}
}

@media print{
	.panel h2 {
	display: inline !important;
	background: none;
	background-color: transparent !important;
	font-size: 150%;
	}
}

@media print{
	.panel h2 i  {
display: none !important;
	}
}

/*Panel heading on rollover */
.panel h2:hover, .panelcollapsed h2:hover { background-color: #CCC; }

/*Heading of a collapsed panel */
.panelcollapsed h2 
{
	background-color: #EEE;
	border-color: #CCC;
}
.panelcollapsed i:before
{
	display: inline-block;
	font: normal normal normal 110% FontAwesome;
	text-rendering: auto;
    float: left;
	padding-left: 10px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\f078";
}

@media screen and (min-width: 1080px) {
	.panel h2 i:before
	{
		padding-top: 0px;
	}
}

@media print{
	.panelcollapsed h2, .panelcollapsed h2 i {
display: none !important;
	}
}

/*Panel content - do not set borders or paddings */
.panelcontent 
{ 
overflow: hidden;
padding: 10px 0px 10px;
}

/*Collapsed panel content */
.panelcollapsed .panelcontent { display: none; }


/* ------------------------------------------
CUSTOM BUTTONS
--------------------------------------------- */

.plutobtn {
  background: #e60000;
  background-image: -webkit-linear-gradient(top, #e60000, #990000);
  background-image: -moz-linear-gradient(top, #e60000, #990000);
  background-image: -ms-linear-gradient(top, #e60000, #990000);
  background-image: -o-linear-gradient(top, #e60000, #990000);
  background-image: linear-gradient(to bottom, #e60000, #990000);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  color: #ffffff;
  font-size: 15px;
  padding: 6px 10px 6px 10px;
  text-decoration: none;
}

.plutobtn:hover {
  color: #ffffff;
  background: #ba0000;
  background-image: -webkit-linear-gradient(top, #ba0000, #730101);
  background-image: -moz-linear-gradient(top, #ba0000, #730101);
  background-image: -ms-linear-gradient(top, #ba0000, #730101);
  background-image: -o-linear-gradient(top, #ba0000, #730101);
  background-image: linear-gradient(to bottom, #ba0000, #730101);
  text-decoration: none;
}