). */ /* Useful information: https://www.codecademy.com/courses/css-coding-with-style */ /* Useful information: https://uigradients.com/#BradyBradyFunFun */ /* Useful information: http://meyerweb.com/eric/thoughts/2012/04/26/lineargradient-keywords */ /* Useful information: https://www.w3schools.com/css/css3_gradients.asp */ /* Useful information: http://htmlcolorcodes.com/color-chart */ /* Useful information: https://www.freshdesignweb.com/css3-buttons */ /*-----BEGIN STYLES (Styles must come AFTER the imports)-----*/ /*-----USACE WEB COLOR OPTIONS-----*/ /* Red: EF4135 (Pantone Red 032 C) */ /* Black: 020000 (USACE Black) */ /* Green: 6E8778 (Pantone 5625 C) */ /*-----USACE TYPOGRAPHY-----*/ /* Arial Regular */ /* Arial Bold */ /*-----HTML selectors-----*/ body { background: #85929E; margin: 0; padding: 0; } div { } span { } /*-----ID selectors (these take precedent over class slectors)-----*/ #title { } #container { position: absolute; left: 5px; top: 5px; width:1600px; height:900px; border-radius: 10px; border: 2px black solid; } #navmap{ background-image: url(DigitalGlobeTiled.png); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; left: 5px; top: 420px; width: 350px; height: 320px; border:thin white solid; border-radius: 5px; box-shadow: 3px 3px 3px #0F0F0F; } #navKSS{ color: white; position: absolute; width: 130px; height: 50px; left: 132px; top: 91px; } #navCSF{ color: white; position: absolute; width: 150px; height: 60px; left: 142px; top: 148px; } #navSDCS{ color: white; position: absolute; width: 130px; height: 45px; left: 158px; top: 215px; } /*-----Class selectors-----*/ .span-title { vertical-align: middle; } .auto-style1 { /* Used in TITLES */ border-width: thin; border-color: #000000; box-shadow: #C0C0C0; border-radius: 0px; line-height: 35px; text-align: center; font-size: 18pt; font-weight: normal; vertical-align: middle; font-family: "Arial"; font-style: bold; color: #FFFFFF; /* background-color: #990000; */ background-color: #EF4135; /* This is the official USACE red color */ border:thin black solid; border-radius: 3px; box-shadow: 3px 3px 3px #0F0F0F; position: absolute; white-space: nowrap; z-index: 5; } .auto-style2 { /* Used in FLOW BOXES */ text-align: center; font-size: 13pt; font-weight: normal; font-family: "Arial"; font-style: normal; vertical-align: middle; color: #000000; margin-bottom: 0px; background-color: #FFFFFF; border:thin black solid; border-radius: 3px; box-shadow: 3px 3px 3px #0F0F0F; padding: 0px 5px; position: absolute; height: 20px; min-width: 100px; white-space: nowrap; z-index: 3; } .auto-styletest { /* Used in TESTING FLOW BOXES */ text-align: center; font-size: 13pt; font-weight: normal; font-family: "Arial"; font-style: normal; vertical-align: middle; color: #000000; margin-bottom: 0px; background-color: #FFFFFF; border:thin black solid; border-radius: 3px; box-shadow: 3px 3px 3px #0F0F0F; padding: 0px 5px; position: absolute; height: 20px; min-width: 100px; white-space: nowrap; z-index: 3; } .auto-style3 { /* Used in LEFT BOXES AND TABLES */ text-align: center; font-size: 13pt; font-weight: normal; font-family: "Arial"; font-style: normal; vertical-align: middle; color: #000000; margin-bottom: 0px; background-color: #FFFFFF; border:thin black solid; border-radius: 3px; box-shadow: 3px 3px 3px #0F0F0F; position: absolute; white-space: nowrap; z-index: 5; } .auto-style4 { /* Used in NAVIGATION MAP */ text-align: center; font-size: 12pt; font-weight: normal; font-family: "Arial"; font-style: normal; vertical-align: middle; color: #000000; margin-bottom: 0px; background-color:transparent; /* border:1px #82E0AA solid; */ border:3px #6E8778 solid; /* This is the official USACE red color */ border-radius: 3px; box-shadow: 3px 3px 3px #0F0F0F; position: absolute; white-space: nowrap; z-index: 5; } /* I don't think this one is being used anymore */ .auto-style5 { text-align: center; font-size: 12pt; font-family: "Arial"; font-style: normal; color: #FFFFFF; margin-bottom: 0px; background-color: #A5B2CC; font-weight: normal; border:thin black solid; border-radius: 3px; box-shadow: 3px 3px 3px #0F0F0F; height: 20px; padding: 0px 5px; position: absolute; white-space: nowrap; } /* Used in AREA NAMES */ .auto-style6 { text-align: center; font-size: 12pt; font-family: "Arial"; font-style: normal; color: #000000; margin-bottom: 0px; background-color: #94b2ff; font-weight: normal; border:thin black solid; border-radius: 3px; box-shadow: 3px 3px 3px #0F0F0F; height: 20px; padding: 0px 5px; position: absolute; white-space: nowrap; z-index: 3; } /* Used in LOGOS */ .auto-style7 { text-align: left; font-size: 12pt; font-family: "Arial"; font-style: normal; color: #FFFFFF; margin-bottom: 0px; font-weight: normal; position: absolute; white-space: nowrap; z-index: 1; } /* I don't think this one is being used anymore */ .auto-style8 { text-align: center; font-size: 12pt; font-family: "Arial"; font-style: normal; color: #000000; margin-bottom: 0px; background-color: #A5B2CC; font-weight: bold; border:thin black solid; border-radius: 5px; box-shadow: 3px 3px 3px #0F0F0F; z-index: 3; } /* Used in OTHERS BOX */ .auto-style9 { text-align: center; font-size: 12pt; font-weight: normal; font-family: "Arial"; font-style: normal; color: #000000; margin-bottom: 0px; background-color: #ddddff; border:thin black solid; border-radius: 10px; box-shadow: 3px 3px 3px #0F0F0F; padding: 0px 5px; position: absolute; height: 20px; min-width: 100px; white-space: nowrap; z-index: 3; } /*-----Graphical elements-----*/ #arrow { position: absolute; z-index: 2; } .arrowsize0 { width: 25px; height: 50px; transform: rotate(0deg); -ms-transform: rotate(0deg); -sand-transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); } .arrowsize23 { width: 25px; height: 50px; transform: rotate(23deg); -ms-transform: rotate(23deg); -sand-transform: rotate(23deg); -webkit-transform: rotate(23deg); -moz-transform: rotate(23deg); } .arrowsize45 { width: 25px; height: 50px; transform: rotate(45deg); -ms-transform: rotate(45deg); -sand-transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); } .arrowsize68 { width: 25px; height: 50px; transform: rotate(68deg); -ms-transform: rotate(68deg); -sand-transform: rotate(68deg); -webkit-transform: rotate(68deg); -moz-transform: rotate(68deg); } .arrowsize90 { width: 25px; height: 50px; transform: rotate(90deg); -ms-transform: rotate(90deg); -sand-transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); } .arrowsize113 { width: 25px; height: 50px; transform: rotate(113deg); -ms-transform: rotate(113deg); -sand-transform: rotate(113deg); -webkit-transform: rotate(113deg); -moz-transform: rotate(113deg); } .arrowsize135 { width: 25px; height: 50px; transform: rotate(135deg); -ms-transform: rotate(135deg); -sand-transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); } .arrowsize145 { width: 25px; height: 50px; transform: rotate(145deg); -ms-transform: rotate(145deg); -sand-transform: rotate(145deg); -webkit-transform: rotate(145deg); -moz-transform: rotate(145deg); } .arrowsize158 { width: 25px; height: 50px; transform: rotate(158deg); -ms-transform: rotate(158deg); -sand-transform: rotate(158deg); -webkit-transform: rotate(158deg); -moz-transform: rotate(158deg); } .arrowsize180 { width: 25px; height: 50px; transform: rotate(180deg); -ms-transform: rotate(180deg); -sand-transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); } .arrowsize203 { width: 25px; height: 50px; transform: rotate(203deg); -ms-transform: rotate(203deg); -sand-transform: rotate(203deg); -webkit-transform: rotate(203deg); -moz-transform: rotate(203deg); } .arrowsize225 { width: 25px; height: 50px; transform: rotate(225deg); -ms-transform: rotate(225deg); -sand-transform: rotate(225deg); -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); } .arrowsize248 { width: 25px; height: 50px; transform: rotate(248deg); -ms-transform: rotate(248deg); -sand-transform: rotate(248deg); -webkit-transform: rotate(248deg); -moz-transform: rotate(248deg); } .arrowsize270 { width: 25px; height: 50px; transform: rotate(270deg); -ms-transform: rotate(270deg); -sand-transform: rotate(270deg); -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); } .arrowsize293 { width: 25px; height: 50px; transform: rotate(293deg); -ms-transform: rotate(293deg); -sand-transform: rotate(293deg); -webkit-transform: rotate(293deg); -moz-transform: rotate(293deg); } .arrowsize315 { width: 25px; height: 50px; transform: rotate(315deg); -ms-transform: rotate(315deg); -sand-transform: rotate(315deg); -sand-transform: rotate(315deg); -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); } .arrowsize338 { width: 25px; height: 50px; transform: rotate(338deg); -ms-transform: rotate(338deg); -sand-transform: rotate(338deg); -sand-transform: rotate(338deg); -webkit-transform: rotate(338deg); -moz-transform: rotate(338deg); } #arrow2way { position: absolute; z-index: 2; } .arrow2waysize0 { width: 25px; height: 50px; transform: rotate(0deg); -ms-transform: rotate(0deg); -sand-transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); } .arrow2waysize23 { width: 25px; height: 50px; transform: rotate(23deg); -ms-transform: rotate(23deg); -sand-transform: rotate(23deg); -webkit-transform: rotate(23deg); -moz-transform: rotate(23deg); } .arrow2waysize45 { width: 25px; height: 50px; transform: rotate(45deg); -ms-transform: rotate(45deg); -sand-transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); } .arrow2waysize68 { width: 25px; height: 50px; transform: rotate(68deg); -ms-transform: rotate(68deg); -sand-transform: rotate(68deg); -webkit-transform: rotate(68deg); -moz-transform: rotate(68deg); } .arrow2waysize90 { width: 25px; height: 50px; transform: rotate(90deg); -ms-transform: rotate(90deg); -sand-transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); } .arrow2waysize113 { width: 25px; height: 50px; transform: rotate(113deg); -ms-transform: rotate(113deg); -sand-transform: rotate(113deg); -webkit-transform: rotate(113deg); -moz-transform: rotate(113deg); } .arrow2waysize135 { width: 25px; height: 50px; transform: rotate(135deg); -ms-transform: rotate(135deg); -sand-transform: rotate(135deg); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); } .arrow2waysize145 { width: 25px; height: 50px; transform: rotate(145deg); -ms-transform: rotate(145deg); -sand-transform: rotate(145deg); -webkit-transform: rotate(145deg); -moz-transform: rotate(145deg); } .arrow2waysize158 { width: 25px; height: 50px; transform: rotate(158deg); -ms-transform: rotate(158deg); -sand-transform: rotate(158deg); -webkit-transform: rotate(158deg); -moz-transform: rotate(158deg); } .polyline-style1 { height: 1000px; width: 1700px; position: absolute; z-index:1; stroke:#F9BF00; fill:none; stroke-width:2; stroke-dasharray:10,0; } .circle-style1 { height: 1000px; width: 1700px; position: absolute; z-index:1; stroke:#F9BF00; stroke-width:3; fill:#F9BF00; }