--- /dev/null
+/* =====================================================================================================================
+ * ------------------------------------------------- Navbar ------------------------------------------------------------
+ * =====================================================================================================================
+*/
+
+/* hamburger menu */
+.navbar-toggle .icon-bar {
+ background-color: #004455;
+}
+
+/* surcharge bootstrap */
+.navbar {
+ border: none;
+}
+
+
+/*
+* Ribbon version
+*/
+
+#version p {
+ background: #0C536B;
+ color: #fff;
+ text-decoration: none;
+ font-family: arial, sans-serif;
+ text-align: center;
+ font-weight: bold;
+ padding: 5px 40px;
+ font-size: 1.5rem;
+ line-height: 2rem;
+ position: relative;
+ transition: 0.5s;
+}
+
+#version p:hover {
+ background: #07AAAA;
+ color: #fff;
+}
+
+#version p::before, #version p::after {
+ content: "";
+ width: 100%;
+ display: block;
+ position: absolute;
+ top: 1px;
+ left: 0;
+ height: 1px;
+ background: #fff;
+}
+
+#version p::after {
+ bottom: 1px;
+ top: auto;
+}
+
+@media screen and (min-width: 800px) {
+ #version {
+ position: absolute;
+ display: block;
+ top: 0;
+ right: 0;
+ width: 200px;
+ overflow: hidden;
+ height: 200px;
+ z-index: 9999;
+ }
+
+ #version p {
+ width: 200px;
+ position: absolute;
+ top: 30px;
+ right: -50px;
+ transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
+ }
+}
+
+
+
+/*
+*************** Page selector
+*/
+
+.current ,
+li.current {
+ background: #FFFFFF;
+ text-decoration: #0a4965;
+}
+
+strong {
+ color: #004455;
+}
+
+.greynav{
+ background-color: #E1E3E9;
+}
+
+
+span.cdl-navbar-logo,
+a.cdl-navbar-logo {
+ padding: 7px 15px 0 15px;
+}
+
+
+
+/* =====================================================================================================================
+ *-------------------------------------------------- Page Software -----------------------------------------------------
+ * =====================================================================================================================
+*/
+/*
+ * ********************Software-unit
+ */
+
+.metric-score {
+ display: inline-block;
+}
+
+.software-unit .score,ul .score, .metric-score .score, .allLink {
+ display: inline-block;
+}
+
+
+/*
+ ****************************** Score
+ */
+
+.score {
+ color: black;
+ background: white;
+ border: 2px solid #EFEFEF;
+ padding: 5px;
+ min-width: 3em;
+ min-height: 2.5em;
+ border-radius: 5px 5px 5px 5px;
+ text-align: center;
+ font-size: 11px;
+ position: relative;
+ bottom: 8px;
+}
+
+.score_low {
+ color: black;
+ background-color: #FF2020;
+ font-weight: bold;
+ max-width: 3em;
+ max-height: 3em;
+}
+.score_medium {
+ color: black;
+ background-color: #FF8020;
+ font-weight: bold ;
+ max-width: 3em;
+ max-height: 3em;
+
+}
+.score_high {
+ color: black;
+ background-color: #20C0C0;
+ font-weight: bold;
+ max-width: 3em;
+ max-height: 3em;
+}
+
+.score_best {
+ color: black ;
+ background-color: #9ACD32;
+ font-weight: bold;
+ max-width: 3em;
+ max-height: 3em;
+}
+
+.score_NA {
+ color: black ;
+ background-color: #827C7C;
+ font-weight: bold;
+ max-width: 3em;
+ max-height: 3em;
+}
+
+
+.score_percent {
+ color: gray;
+ font-size: 60%;
+}
+
+/*
+**************************Softwares Summary
+*/
+
+.align h1, .align h2, .align span, .align p, .align ul {
+ display: inline-block;
+}
+
+.allSee {
+ margin-left: 3em;
+}
+
+.softTitle{
+ display:block;
+ text-align: center;
+}
+
+.project-description {
+ min-height: 10em;
+ display: table-cell;
+ vertical-align: middle;
+ margin: auto;
+}
+
+/*
+*******************************Review
+*/
+
+.backgroundReview{
+ background-color: #FFFFFF;
+ border: 2px solid #E1E1E1;
+ min-height: 15em;
+}
+
+/*
+*************************Table Metrics
+*/
+
+table th {
+ background-color: #006C88;
+ color: #FFFFFF;
+ border-radius: 5px;
+}
+
+.datacelltext{
+ text-align: left;
+}
+
+.datacellnumber{
+ text-align: right;
+}
+
+/* =====================================================================================================================
+ *-------------------------------------------------- Footer ------------------------------------------------------------
+ * =====================================================================================================================
+*/
+
+footer {
+ text-align: center;
+ margin-top: 5em;
+}
+
+/* =====================================================================================================================
+ *-------------------------------------------------- Page All Screenshot------------------------------------------------
+ * =====================================================================================================================
+*/
+
+/*
+ ***************** screenShot
+ */
+.screenShot {
+ height: 12em;
+ width: 18em;
+}
+
+
+/* =====================================================================================================================
+ *-------------------------------------------------- All Pages-------------------------------------------------------
+ * =====================================================================================================================
+*/
+
+main {
+ width: 98%;
+ margin: auto;
+}
+
+
+
+.backgroundbody{
+ background-color: #F0F1F4;
+}
+
+.backgroundUnit{
+ background-color: #FFFFFF;
+ border: 2px solid #EFEFEF;
+ border-radius: 5px 5px 5px 5px;
+ box-shadow: 8px 8px 20px #aaa;
+}
+
+section h2{
+ margin-top: 2em;
+ margin-bottom: 0.5em;
+}
+
+section p{
+ margin-top: 0.8em;
+}
+
+.addmore {
+ padding-top: 1.7em;
+}
+
+
+/* =====================================================================================================================
+ *----------------------------------------------MEDIA QUERRY-----------------------------------------------------------
+ * =====================================================================================================================
+ */
+
+/*
+ *********************************** 300px
+ */
+
+@media screen and (min-width: 300px) {
+
+ main h2{
+ margin: 0.8em 0 0.8em 0;
+ }
+
+ .size-box {
+ min-height: 18em;
+ }
+
+ .software-unit-home {
+ min-height: 17em;
+ padding: 15px;
+ margin: 0 0 20px 0;
+ }
+
+ .software-unit-all {
+ min-height: 18em;
+ margin-bottom: 2em;
+ padding: 10px;
+ max-width: 25em;
+ }
+
+ .user-unit-home {
+ min-height: 17em;
+ }
+
+ .user-unit-all {
+ min-height: 17em;
+ padding: 10px;
+ margin-bottom: 2em;
+ max-width: 25em;
+ }
+
+ .size-title {
+ height: 4em;
+ display: table-cell;
+ vertical-align: middle;
+ }
+
+ .size-logo{
+ height: 6em;
+ margin: auto;
+ padding-bottom: 12px;
+ }
+
+ .size-logo-overview {
+ min-height: 8em;
+ max-width: 20em;
+ max-height: 12em;
+ }
+}
+
+/*
+ *********************************** 768px
+ */
+
+@media (min-width: 768px) {
+
+ main h2{
+ margin: 0.8em 0 0.8em 0;
+ }
+
+ .size-box {
+ min-height: 18em;
+ }
+
+ .software-unit-home {
+ height: 19em;
+ padding: 15px;
+ margin: 0 0 30px 0;
+ }
+
+ .software-unit-all {
+ height: 19em;
+ margin-bottom: 2em;
+ padding: 10px;
+ }
+
+ .user-unit-home {
+ min-height: 17em;
+ }
+
+ .user-unit-all {
+ min-height: 17em;
+ padding: 10px;
+ margin-bottom: 2em;
+ }
+
+ .size-title {
+ height: 4em;
+ display: table-cell;
+ vertical-align: middle;
+ }
+
+ .size-logo{
+ height: 6em;
+ margin: auto;
+ padding-bottom: 12px;
+ }
+
+ .size-logo-overview {
+ min-height: 10em;
+ max-width: 25em;
+ }
+
+ /*
+ ***** search button
+ */
+ .search {
+ margin-right: 70px;
+ }
+}
+
+/*
+ *********************************** 1280px
+ */
+
+@media (min-width: 1280px) {
+
+ main h2{
+ margin: 1em 0 0.8em 0;
+ }
+
+ .size-box {
+ min-height: 18em;
+ }
+
+ .software-unit-home {
+ min-height: 20em;
+ padding: 15px;
+ }
+
+ .software-unit-all {
+ min-height: 22em;
+ border: 2px solid #EFEFEF;
+ margin-bottom: 2em;
+ padding: 10px;
+ }
+
+ .user-unit-home {
+ min-height: 17em;
+ padding: 10px;
+ }
+
+ .user-unit-all {
+ min-height: 17em;
+ padding: 10px;
+ margin-bottom: 2em;
+ }
+
+ .size-title {
+ height: 4em;
+ display: table-cell;
+ vertical-align: middle;
+ }
+
+ .size-logo {
+ height: 7em;
+ margin: auto;
+ margin-top: 2em;
+ padding-bottom: 12px;
+ }
+
+ .size-logo-overview {
+ min-height: 10em;
+ max-width: 25em;
+ }
+
+ .search {
+ margin-right: 100px;
+ }
+
+ .navbar-toggle { /* #0C536B blue theme*/
+ position: relative;
+ float: right;
+ padding: 9px 10px;
+ margin-top: 8px;
+ margin-right: 15px;
+ margin-bottom: 8px;
+ background-color: transparent;
+ background-image: none;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ }
+
+ .navbar-toggle .icon-bar {
+ display: block;
+ width: 22px;
+ height: 2px;
+ border-radius: 1px;
+ color: black;
+ background-color: #0C536B;
+ }
+}
\ No newline at end of file