1div.sign-container { 2 display: block; 3 position: relative; 4} 5 6span.sign { 7 position: absolute; 8 top: 0; 9 z-index: 10; 10 display: block; 11 padding: 14px; 12 font-size: 12px; 13 color: #767676; 14 border-radius: 0 4px 0 4px; 15} 16 17div.note { 18 padding-left: 3em; 19 padding: 17px; 20 margin-left: 4em; 21 margin-right: 17px; 22 border-top: solid 3px; 23 border-left: solid 3px; 24 border-bottom: solid 3px white; 25} 26div.note-container { 27 position: relative; 28 margin-right: 6em; 29} 30 31.glyph { 32 font-size: 2em; 33} 34 35.s-fire { 36 color:#f04124; 37} 38 39div.s-fire>div { 40 color: black; 41 background-color: #FDCBC3; 42 border-color: #ea2f10; 43} 44 45.s-alert { 46 color: #e99002; 47} 48 49div.s-alert>div { 50 color: black; 51 background-color: #FFFFAD; 52 border-color: darkorange; 53} 54 55.note>a.urlextern { 56 font-weight: bold; 57} 58 59.s-globe { 60 color:#B075FF; 61} 62 63div.s-globe>div { 64 color: #6900AD; 65 background-color: #F3EAFF; 66 border-color:#B075FF; 67} 68 69.s-info-sign { 70 color: #5bc0de; 71} 72 73div.s-info-sign>div { 74 color: black; 75 background-color: #E1F8FF; 76 border-color: #3db5d8; 77} 78 79.s-question-sign { 80 color: #43ac6a; 81} 82 83div.s-question-sign>div { 84 color: white; 85 background-color: #43ac6a; 86 border-color:#3c9a5f; 87} 88 89.s-education { 90 color: #006687; 91} 92 93div.s-education>div { 94 color: white; 95 background-color: black; 96 border-color:#006687; 97} 98 99.triangle { 100 position: absolute; 101 top:0; 102 right: 0; 103 width:17px; 104 height: 100%; 105 -webkit-clip-path: polygon(0 0, 100% 17px, 100% 100%, 0 100%); 106 clip-path: polygon(0 0, 100% 17px, 100% 100%, 0 100%); 107 border-bottom: solid 3px; 108 border-right: solid 3px; 109 border-top: solid 3px; 110} 111 112.triangle:before { 113 content: ""; 114 top: -3px; 115 right: -3px; 116 width: 0px; 117 height: 0px; 118 position:absolute; 119 border-bottom: 17px solid #484848; 120 border-right: 17px solid transparent; 121 border-radius: 0 0 0 5px; 122} 123 124.triangle:after { 125 content: ""; 126 position: absolute; 127 top: -3px; 128 right:-3px; 129 width: 0px; 130 height: 0px; 131 border-top: 17px solid #fff; 132 border-left: 17px solid transparent; 133} 134 135/* NEW CSS THEME*/ 136 137.w3-panel { 138 margin-top: 16px; 139 margin-bottom: 16px; 140 padding: 10px; 141} 142 143.w3-panel>p { 144 margin-bottom: 0.2em; 145} 146 147.blackglyph { 148 font-size: 160%; 149 padding: 1%; 150 margin-bottom: inherit; 151 vertical-align: middle; 152} 153 154.n-title { 155 font-size: 1.2em; 156 font-weight: bold; 157 /*vertical-align: middle;*/ 158} 159 160.n-info-sign { 161 background-color: #d9edf7; 162 border-left: 6px solid #2183b3; 163 color: #2183b3; 164} 165 166.n-education { 167 background-color: #000000; 168 border-left: 6px solid #02a2d6; 169 color: #ffffff; 170} 171 172.n-question-sign { 173 background-color: #dff0d8; 174 border-left: 6px solid #3c763d; 175 color: #3c763d; 176} 177 178.n-fire { 179 background-color: #f2dede; 180 border-left: 6px solid #da5856; 181 color: #a94442; 182} 183 184.n-alert { 185 background-color: #fcf8e3; 186 border-left: 6px solid #ffeb3b; 187 color: #8a6d3b; 188} 189 190.n-globe { 191 background-color: #f3eaff; 192 border-left: 6px solid #b075ff; 193 color: #8f3cff; 194} 195 196.n-globe>p>a.urlextern { 197 color: #2f28ff; 198} 199 200 201