/* =========================================================================
Name		: CSS File for Blue Pineapple Money Management website
Author	: Rod LeDieu
Date		: 4 April 2017
Copyright (c) 2017 Stratovation Limited - stratovation.co.uk
============================================================================
Amendments:
2May20: CSSPortal Optimiser: Sat, 02 May 2020 08:01:46 +0000
4Apr17: Taken from the original register.php file
========================================================================= */

* {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

.row::after {
clear:both;
content:"";
display:block;
}

html {
font-family:"Lucida Sans",sans-serif;
}

body {
background-color:#ddd;
overflow:auto;
}

.button {
border:none;
color:#fff;
cursor:pointer;
display:inline-block;
font-size:14px;
margin:4px 2px;
padding:7px 10px;
text-align:center;
text-decoration:none;
}

input[type="submit"]:disabled {
background:#ccc;
}

input[type="submit"]:enabled {
background-color:#005;
}

// The next two have been taken from 
// https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
/*input[type=text]:valid {
    background-color: palegreen;
}

input[type=text]:invalid {
    background-color: lightpink;
}*/

.budgetnumber {
border:solid;
border-color:#ccc;
border-width:thin;
display:table-cell;
padding-left:10px;
padding-right:5px;
}

.budgetnumber [type="number"] {
text-align:right;
width:80px;
}

.header {
background-color:#6c9aca;
border:1px solid #005;
color:#fff;
padding:15px;
}

.aside {
background-color:#23a5d5;
border:1px solid #005;
box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
color:#fff;
font-size:14px;
padding:15px;
text-align:center;
}

div#aside p {
text-align:left;
}

div#aside h3 {
color:#fff;
font-weight:700;
text-align:left;
}

div#aside label {
color:#fff;
display:inline-block;
//font-size:14px;
text-align:left;
width:80%;
}

div#aside input[type="submit"] {
text-align:center;
}

div#asideinput label {
text-align:right;
width:25%;
}

div#asideselection label {
display: block;
margin-left: 18px;
padding-left: 15px;
text-indent: -15px;
width:95%;
}

div#asideselection input {
height: 13px;
margin:0;
*overflow: hidden;
padding: 0;
position: relative;
top: -1px;
vertical-align: bottom;
width: 13px;
}

.general {
background-color:#fff;
box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
color:#000;
font-size:1.2em;
padding:15px;
text-align:left;
}

.footer {
background-color:#6c9aca;
border:1px solid #005;
color:#fff;
font-size:12px;
padding:15px;
text-align:center;
}

.error {
color:red;
}

.col-1 {
float:left;
padding:15px;
width:8.33%;
}

.col-2 {
float:left;
padding:15px;
width:16.66%;
}

.col-3 {
float:left;
padding:15px;
width:25%;
}

.col-4 {
float:left;
padding:15px;
width:33.33%;
}

.col-5 {
float:left;
padding:15px;
width:41.66%;
}

.col-6 {
float:left;
padding:15px;
width:50%;
}

.col-7 {
float:left;
padding:15px;
width:58.33%;
}

.col-8 {
float:left;
padding:15px;
width:66.66%;
}

.col-9 {
float:left;
padding:15px;
width:75%;
}

.col-10 {
float:left;
padding:15px;
width:83.33%;
}

.col-11 {
float:left;
padding:15px;
width:91.66%;
}

.col-12 {
float:left;
padding:15px;
width:100%;
}

.table {
border-collapse:collapse;
}

.title {
display:table-caption;
font-size:larger;
font-weight:700;
text-align:left;
}

.tblheading {
background-color:#009;
color:#fff;
display:table-row;
font-weight:700;
text-align:center;
}

.tblrow {
display:table-row;
}

.textcell {
border:solid;
border-color:#ccc;
border-width:thin;
display:table-cell;
padding:5px;
text-overflow:ellipsis;
}

.numericcell {
border:solid;
border-color:#ccc;
border-width:thin;
display:table-cell;
padding-left:10px;
padding-right:5px;
text-align:right;
white-space:nowrap;
}

input.right {
text-align:right;
}

.plaincell {
border-color:#ccc;
border-width:thin;
display:table-cell;
padding-left:5px;
padding-right:5px;
text-align:left;
text-overflow:ellipsis;
vertical-align:top;
}

.datecell {
border:solid;
border-color:#ccc;
border-width:thin;
display:table-cell;
padding-left:10px;
padding-right:5px;
text-align:center;
white-space:nowrap;
}

.imagecell {
display:block;
margin:auto;
padding-top:10px;
}

.tr01:nth-child(even) {
background-color:#b3ffff;
border:solid;
border-width:thin;
max-width:1px;
overflow:hidden;
text-overflow:ellipsis;
}

.tr01:nth-child(odd) {
background-color:#fff;
border:solid;
border-width:thin;
max-width:1px;
overflow:hidden;
text-overflow:ellipsis;
}

th {
background-color:#009;
color:#fff;
}

td > input[type=checkbox] {
display:inline-block;
}

td > input[type=date] {
display:block;
text-align:left;
}

div#asideinput input,div#asideinput textarea,div#asideinput select {
width:65%;
}

@media only screen and (max-width: 768px) {
[class*="col-"] {
width:100%;
}

.heading {
background-color:#009;
color:#fff;
display:table-row;
font-size:.8em;
font-weight:700;
text-align:center;
}

.textcell {
border:solid;
border-color:#ccc;
border-width:thin;
display:table-cell;
font-size:.8em;
padding:5px;
text-overflow:ellipsis;
}

.textcell > input[type=checkbox] {
display:block;
}

.numericcell {
border:solid;
border-color:#ccc;
border-width:thin;
display:table-cell;
font-size:.8em;
padding-left:10px;
padding-right:5px;
text-align:right;
}

.datecell {
border:solid;
border-color:#ccc;
border-width:thin;
display:table-cell;
font-size:.8em;
padding-left:10px;
padding-right:5px;
text-align:center;
white-space:nowrap;
}

div#asideinput label {
font-size:.8em;
text-align:right;
width:25%;
}

div#asideselection {
white-space: nowrap;
}

div#asideselection label {
font-size:.8em;
color: white;
//width:60%;
}

div#asideselection input[type="checkbox"] {
font-size:.8em;
padding-right: 5px;
padding-left: 5px;
//width:60%;
}

h1,body {
font-size:1em;
}

h2,tr,td,th {
font-size:.8em;
}

h3,p,label {
font-size:.7em;
}
}

form {
margin:0 0 20px;
}

form div {
color:#999;
//font-size:90%;
}

form > div {
clear:both;
margin:0 0 10px;
overflow:hidden;
padding:1px;
}

.aside > form > div > label,legend {
color:#fff;
float:left;
padding-right:10px;
width:25%;
}

form > div > label,legend {
color:#000;
float:left;
padding-right:10px;
width:25%;
}

form > div > div {
float:right;
width:75%;
}

input[type=text],input[type=email],input[type=url],input[type=password],textarea {
border-bottom:1px solid #eee;
border-left:1px solid #ccc;
border-right:1px solid #eee;
border-top:1px solid #ccc;
width:75%;
}

#selinform {
width:75%;
}

input[type=text]:focus,input[type=email]:focus,input[type=url]:focus,input[type=password]:focus,textarea:focus {
border-color:#4697e4;
outline:0;
}

@media (max-width: 768px) {
form > div {
margin:0 0 15px;
}

form > div > label,legend {
float:none;
margin:0 0 5px;
width:100%;
}

form > div > div,form > div > fieldset > div {
float:none;
width:100%;
}

input[type=text],input[type=email],input[type=url],input[type=password],textarea,select,#selinform {
width:100%;
}
}

@media (min-width: 1200px) {
form > div > label,legend {
text-align:right;
}
}

.nav {
background-color:#005;
color:#fff;
height:50px;
width:100%;
}

.nav ul {
list-style-type:none;
margin:0;
padding:0;
position:absolute;
}

.nav li {
display:inline-block;
float:left;
margin-right:1px;
}

.nav li a {
background-color:#005;
color:#fff;
display:block;
height:50px;
line-height:50px;
min-width:140px;
padding:0 10px;
text-align:left;
text-decoration:none;
}

.nav li:hover a {
background-color:#23a5d5;
}

.nav li:hover ul a {
background-color:#22a;
color:#fff;
height:40px;
line-height:40px;
padding:0 10px;
}

.nav li:hover ul a:hover {
background-color:#6c9aca;
color:#fff;
}

.nav li ul li {
display:block;
float:none;
}

.nav li ul li a {
min-width:100px;
padding:0 20px;
width:auto;
}

.nav .show-menu {
background-color:#005;
display:none;
padding:10px;
text-align:left;
text-decoration:none;
}

.nav li ul,.nav > input[type=checkbox] {
display:none;
}

.nav ul li a:hover + .hidden,.hidden:hover,.nav > input[type=checkbox]:checked ~ #menu {
display:block;
}

@media screen and (max-width : 760px) {
.nav label {
font-size:1em;
}

.nav ul {
display:none;
position:static;
}

.nav li {
margin-bottom:1px;
}

.nav ul li,li a {
width:100%;
}

.nav .show-menu {
color:#fff;
display:block;
}
}