* { padding: 0; margin: 0; }
* html #container { height: 100%; }
html { height: 100%; }
html, a, input { font-family: 'robotoregular'; font-size: 12px; color: #000000; }
#container { position: relative; min-height: 100%; }
body { background-color: whitesmoke; height: 100%; }
h1 { font-family: 'Arial Black', Gadget, sans-serif; font-size: 45px; margin-top: 10px; text-transform: uppercase;}
h1 span { font-family: 'courier_newregular', monospace, sans-serif; font-size: 30px; text-transform: none; font-weight: normal; }
h2, h3, #import, #export { font-family: 'robotoregular'; font-weight: normal; font-size: 25px; }
a { outline: none; text-decoration: none; }
img { border: none; }

#dialog1, #dialog2 {font-family: 'robotoregular'; font-size: 18px; }
.ui-dialog-titlebar-close { visibility: hidden; }

.custom-tooltip { border-radius: 20px; padding-left: 20px !important; background-color: cornsilk !important;}

table { border-spacing: 0; border-collapse: separate; background-color: transparent }
table.title { margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; width: 450px; height: 50px;}
table.project { margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px;}
table.general { margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 0px;}
table.sub_system { margin-left: auto; margin-right: auto; margin-top: 50px; margin-bottom: 0px;}

table.general tr td:first-child { border-left: 1px solid lightgrey; }
table.general tr td:last-child { border-right: 1px solid lightgrey; }
table.sub_system tr td:first-child { border-left: 1px solid lightgrey; }
table.sub_system tr td:last-child { border-right: 1px solid lightgrey; }

select.box { border: none; outline: none; background-color: seashell; color: black; width: 150px; height: 25px; font-size: 20px;}
select.box:hover { background-color: moccasin; }

table.title td {text-align: left; padding-left: 8px;}

.hamburger { border-bottom: 12px double grey; border-top: 4px solid grey; content:""; height: 4px; width:25px; margin-top: 4px;}
.hamburger:hover { cursor: help; border-color: darkslategrey; }

.stylebutton { width: 225px; position: relative; left: 21px; margin: 0 auto; }
.stylebutton input[type=button], input[type=submit], button { float: left; }

th.headerskyline { border-left: 1px solid lightgrey; border-right: 1px solid lightgrey; }
th { border-radius: 8px 8px 0px 0px; background-color: darkslateblue; color: white; text-align: center; font-size: 20px; }
tr.datarowlast td.text {border-bottom: 1px solid lightgrey; border-radius: 0px 0px 0px 8px; }
tr.datarowlast td.data {border-bottom: 1px solid lightgrey; border-radius: 0px 0px 8px 0px; }
td.empty-no-shading { border-bottom: 1px solid lightgrey; border-radius: 0px 0px 8px 8px; }

#header, td.text, td.text1, td.text2, td.text3, tr.headerrow, th, tr.azimuth, #footer { cursor: default; }

tr.headerrow { background-color: moccasin; height: 28px;}
tr.datarow, tr.datarowlast { background-color: seashell; height: 28px; }
td.empty, td.empty-no-shading {background-color: white; height: 20px; }
td.fix_width_table {background-color: white; width: 24px; height: 20px; }
td.colpad {background-color: white; }

table.general td.text { text-align: left; padding-left: 10px; width: 280px; font-size: 20px; }
table.sub_system td.text1 { text-align: left; padding-left: 10px; width: 212px; font-size: 20px; } /* width: = colspan x 24px - 4px */
table.sub_system td.text2 { text-align: left; padding-left: 10px; width: 236px; font-size: 20px; } /* width: = colspan x 24px - 4px */
table.sub_system td.text3 { text-align: left; padding-left: 10px; width: 188px; font-size: 20px; } /* width: = colspan x 24px - 4px */
td.data { text-align: center; font-size: 20px; }

th.headerskyline { border-radius: 0px; line-height: 20px; background-color: moccasin; color: black; text-align: center; letter-spacing: -0.5px; font-family: 'courier_newregular', monospace, sans-serif; font-size: 15px; }
td.az {background-color: moccasin; height: 20px; text-align: center; font-size: 10px; }

#import { text-align: center; width: 80px; margin: 40px 5px 30px 0px; font-size: 20px; }
#export { text-align: center; width: 80px; margin: 40px 0px 30px 5px; font-size: 20px; }
#import, #export { background-color: moccasin; border: 1px solid lightgrey; border-radius: 8px; height: 25px; padding-bottom: 3px; line-height: 0px; cursor: pointer; font-size: 20px; }
#import:hover, #export:hover { background-color: burlywood; }

#project { text-align: center; width: 250px; margin: 40px 0px 30px 0px; font-size: 20px; }
#project { border: 1px solid lightgrey; border-radius: 8px; height: 22px; padding-bottom: 3px; }

#inputs {border: none; width: 72px; height: 26px; line-height: 25px; text-align: center; font-size: 20px; background-color: seashell; }
#input_long {border: none; width: 144px; height: 26px; line-height: 25px; text-align: center; font-size: 20px; background-color: seashell; }
#skyline {border-top: none; border-left: none; border-bottom: 1px solid moccasin; border-right: 1px solid moccasin; width: 24px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; background-color: seashell; }

tr.skyline td:first-child {border-radius: 0px 0px 0px 8px;}
tr.skyline td:last-child {border-radius: 0px 0px 8px 0px;}
tr.skyline td:first-child input {border-radius: 0px 0px 0px 8px;}
tr.skyline td:last-child input {border-radius: 0px 0px 8px 0px;}

input[type=text]:active, input[type=text]:focus { outline: none; }

#add_table { background-color: royalblue; border: none; border-radius: 10px; height: 45px; line-height: 45px; width: 200px; margin-top: 50px; color: #fff; cursor: copy; font-size: 20px; outline: none; }
#add_table:hover { background-color: darkslateblue; }

#submit { display: block; margin: 0 auto; text-align: center; width: 200px; margin-bottom: 0px; font-size: 20px; }
#submit { background-color: orangered; border: none; border-radius: 10px; height: 45px; line-height: 45px; color: #fff; cursor: pointer; font-size: 20px; margin-top: 50px; outline: none; }
#submit:hover { background-color: firebrick; }

#reset { display: block; margin: 0 auto; text-align: center; width: 200px; margin-bottom: 10px; font-size: 20px; }
#reset { background-color: grey; border: none; border-radius: 10px; height: 45px; line-height: 45px; color: #fff; cursor: pointer; font-size: 20px; margin-top: 50px; outline: none; }
#reset:hover { background-color: darkslategrey; }

#download { background-color: #4cc417; border: none; border-radius: 10px; height: 45px; line-height: 45px; width: 200px; margin-top: 50px; color: #fff; cursor: pointer; font-size: 20px; outline: none; }
#download:hover { background-color: #347235; }

#edit_calculation { background-color: royalblue; border: none; border-radius: 10px; height: 45px; line-height: 45px; width: 200px; margin-top: 50px; color: #fff; cursor: pointer; font-size: 20px; outline: none; }
#edit_calculation:hover { background-color: darkslateblue; }

#div_as_textarea h2 {margin-bottom: 50px;}
#response_as_text { background-color: white; text-align: left; font-family: 'Courier New', monospace, sans-serif; line-height: 18px; font-size: 15px; overflow: auto; resize: both; border: 1px solid lightgrey; width: 730px; height: 700px; margin: 0 auto; padding: 20px 5px 0px 10px; }
#response_as_text b {color: darkslategray;}

span.clear { display: block; float: none !important; clear: both; }

#header, #footer { text-align: center; }
#header { background: darkslateblue; color: white; padding: 15px; }
#main { width: 100%; position: relative; margin: 0 auto; padding-bottom: 160px; }
#footer { position: relative; margin-top: -100px; height: 100px; background: lightgrey; font-family: 'robotoregular';}
#footer-text { text-align: center; line-height: 75px; font-size: 20px; }
#form-version { text-align: right; margin-right: 50px; font-size: 12px; }
#div_as_textarea, #div_with_form { text-align: center; position: relative; margin-top: 50px; }