* {
box-sizing: border-box;
}
html {
background: url(/images/lowaltenroute.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.wrapper { /* Outer Grid */
display: grid;
grid-template-areas: /* the names below indicate corespondingly with the area names above to indicate the space on the page that they take up */
'header header header'
'main main main'
'footer footer footer';
}
.header {
grid-area: header;
padding: 1em 3em 1em 3em;
text-align: center;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
background: rgba(195,221,195,0.9);/*#C3DDC3*/
padding: .7em;
text-align: center;
font-style: oblique;
color: black;
border-radius: 0px 0px 10px 10px;
}
.btn {
background-color: #F4FA58; /* (Sectional city color #F4FA58) (Sectional Magenta #8A084B) (Sectional class G blue #C3DDC3) */
color: #8A084B; /* text color magenta NOTE: This is darker than the button Magenta due to the way it looks in the buttons though it is not noticable, I tried the button magenta, but the text looked bad */
padding: .8em 1em .8em 1em;
text-align: center;
text-decoration: none; /* prevents underline */
display: inline-block;
font-size: 16px;
border-radius: 1em;
}
.btn-hover:hover {
background-color: #ced12a; /* Charcoal yellow */
}
.sectional { /* The reason for this class vs the one below is to maximize the area when tables are shown vs forms, there are identical here, but different on smaller screens. This is the default setting for narrow screens, changes by media width below */
background: url(/images/vfrsectional.png); /* On this site only, I had to put the images folder inside the style folder to get them to load here, I haven't figured out why just yet */
padding: 1em; /* This puts the area around the form block */
border-radius: 10px 10px 0px 0px;
}
.sectional-edit { /* The reason I had this class is because I wanted to have more of the background sectional chart show when the form was small or there was no table to display, there are identical here, but different on smaller screens. This is the default setting for narrow screens, changes by media width below */
background: url(/images/vfrsectional.png); /* On this site only, I had to put the images folder inside the style folder to get them to load here, I haven't figured out why just yet */
padding: 1em; /* This puts the area around the form block */
border-radius: 10px 10px 0px 0px;
}
.form-group { /* This puts the blue background and the spacing around the items inside */
background: rgba(195,221,195,0.9);/*#C3DDC3*/
border-radius: 10px;
text-align: left;
}
.form-container {
width: 30em;
margin: 0 auto; /* This line and the next are necessary to center one div inside another */
position: relative;
}
.form-reducer { /* This class is to keep the form input area neat and aligned */
width: 15em;
margin: 0 auto; /* This line and the next are necessary to center one div inside another */
position: relative;
}
/* // Heading Group // */
h1 {
color: Red;
text-align: center;
font-family: trebuchet MS, sans-serif;
font-size: 36px;
margin-top: -5px;
font-style: italic;
}
h2 {
text-align: center;
font-family: trebuchet MS, sans-serif;
font-size: 20pt;
color: green;
margin-top: -5px;
}
h3 {
font-family: trebuchet MS, sans-serif;
font-size: 1.25em;
color: blue;
margin-top: -5px;
margin-bottom: 2px;
}
h4 {
font-family: trebuchet MS, sans-serif;
font-size: 1.5em;
color: blue;
text-shadow: 1px 1px red;
margin-top: -0px;
margin-bottom: 15px;
}
h5 {
font-family: trebuchet MS, sans-serif;
font-size: 13pt;
color: black;
text-shadow: 1px 1px red;
margin-top: 5px;
margin-bottom: 5px;
}
h6 {
text-align: center;
font-family: trebuchet MS, sans-serif;
font-size: 14pt;
color: green;
margin-top: -5px;
}
.spanmain { /* Used in includes/heading for sizing the text */
text-align: center;
font-family: trebuchet MS, sans-serif;
font-size: 40pt;
color: red;
text-shadow: 1px 1px blue;
}
.spansub { /* Used in includes/heading for sizing the text */
text-align: center;
font-family: trebuchet MS, sans-serif;
font-size: 24pt;
color: blue;
text-shadow: 1px 1px red;
}
br {
display: block; /* makes it have a width */
content: ""; /* clears default height */
margin-top: 10px; /* change this to whatever height you want it */
}
.center {
text-align: center;
}
input[type=text] {
width: 15em;
font-size: 12pt;
padding: 12px 12px;
margin: 8px 0;
}
input[type=date] {
width: 15em;
font-size: 12pt;
padding: 12px 12px;
margin: 8px 0;
}
input[type=password] {
width: 15em;
font-size: 12pt;
padding: 12px 12px;
margin: 8px 0;
}
input[type=number] {
width: 15em;
font-size: 12pt;
padding: 12px 12px;
margin: 8px 0;
}
select {
width: 15em;
font-size: 12pt;
padding: 12px 12px;
margin: 8px 0;
}
input[type=submit] {
width: 7em;
padding: 12px 12px;
margin: 8px 0;
font-size: 12pt;
color: #F4FA58;
border-radius: 1em;
background-color: #994062; /* magenta */
}
input[type=submit]:hover {
background-color: #a17c8a; /* Charcoal magenta */
}
div ul .dropdown-menu li a :hover {
background-color: yellow;
}
ul.standard {
font-family: trebuchet MS, sans-serif;
font-size: 12pt;
}
ul.standard li {/*This puts a 5px space at the bottom of all list items*/
margin-bottom: 5px;
}
ol.standard {
font-family: trebuchet MS, sans-serif;
font-size: 12pt;
}
ol.standard li {/*This puts a 5px space at the bottom of all list items*/
margin-bottom: 5px;
}
/*.normal {
width: auto;
border: 2px solid black;
background-color: White;
box-shadow: 6px 6px 6px #999;
padding: 1em;
padding-bottom: .1em;
margin-bottom: .5em;
}*/
.red {
font-family: trebuchet MS, sans-serif;
font-size: 12pt;
color: red;
}
.fine {
font-family: trebuchet MS, sans-serif;
font-size: 8pt;
}