css/multiColumnTemplate.css

   1 @charset "UTF-8";
   2 .container {
   3         background-color: #FFFFFF;
   4         width: 90%;
   5         margin-left: auto;
   6         margin-right: auto;
   7         border-bottom-width: 0px;
   8         padding-left: 0px;
   9         padding-top: 0px;
  10         padding-right: 0px;
  11         padding-bottom: 0px;
  12 }
  13 .row {
  14         width: 100%;
  15         margin-top: 0px;
  16         margin-right: 0px;
  17         margin-bottom: 0px;
  18         margin-left: 0px;
  19         padding-top: 0px;
  20         padding-right: 0px;
  21         padding-bottom: 0px;
  22         padding-left: 0px;
  23         display: inline-block
  24 }
  25 .row.blockDisplay {
  26         display: block;
  27 }
  28 .column_half {
  29         width: 50%;
  30         float: left;
  31         margin-top: 0px;
  32 }
  33 .columns {
  34         width: 25%;
  35         float: left;
  36         font-family: "Source Sans Pro";
  37         color: #A5A5A5;
  38         line-height: 24px;
  39         padding-top: 10px;
  40         padding-bottom: 10px;
  41         text-align: justify;
  42         margin-top: 15px;
  43         margin-bottom: 15px;
  44         padding-left: 0px;
  45         padding-right: 0px;
  46         margin-left: 0px;
  47         margin-right: 0px;
  48 }
  49 .row .columns p {
  50         padding-left: 10%;
  51         padding-right: 10%;
  52 }
  53 .container .columns h4 {
  54         text-align: center;
  55         color: #01B2D1;
  56 }
  57 .primary_header {
  58     width: 100%;
  59     background-color: #FFF7E6;
  60     padding-top: 10px;
  61     padding-bottom: 10px;
  62     clear: left;
  63     border-bottom: 2px solid #2C9AB7;
  64 }
  65 .secondary_header {
  66     width: 100%;
  67     padding-top: 10px;
  68     padding-bottom: 15px;
  69     background-color: #98D2F8;
  70     clear: left;
  71 }
  72 .container .secondary_header ul {
  73         margin-top: 0%;
  74         margin-right: auto;
  75         margin-bottom: 0px;
  76         margin-left: auto;
  77         padding-top: 0px;
  78         padding-right: 0px;
  79         padding-bottom: 15px;
  80         padding-left: 0px;
  81         width: 100%;
  82 }
  83 .secondary_header ul li {
  84     list-style: none;
  85     float: left;
  86     margin-right: auto;
  87     margin-top: 0px;
  88     font-family: "Source Sans Pro";
  89     font-weight: normal;
  90     color: #0E0E0E;
  91     letter-spacing: 1px;
  92     margin-left: auto;
  93     text-align: center;
  94     width: 16%;
  95     transition: all 0.3s linear;
  96 }
  97 .secondary_header ul li:hover {
  98         color: #717070;
  99         cursor: pointer;
 100 }
 101 .left_article {
 102     background-color: #FFFFFF;
 103     width: 70%;
 104     float: left;
 105     font-family: "Source Sans Pro";
 106     color: #343434;
 107     padding-bottom: 15px;
 108     padding-left: 0px;
 109 }
 110 .noDisplay {
 111         display: none;
 112 }
 113 .container .left_article h3 {
 114     padding-left: 5%;
 115     padding-right: 5%;
 116     margin-top: 5%;
 117     color: #121010;
 118     font-weight: bold;
 119     text-transform: none;
 120         font-size: 150%;
 121 }
 122 .container .left_article p {
 123     padding-left: 5%;
 124     padding-right: 5%;
 125     text-align: justify;
 126     line-height: 24px;
 127     margin-top: 15px;
 128     margin-bottom: 15px;
 129     color: #201819;
 130 }
 131 .container .left_article ul {
 132     padding-left: 5%;
 133     padding-right: 5%;
 134     text-align: justify;
 135     line-height: 24px;
 136     margin-top: 5px;
 137     margin-bottom: 0px;
 138     color: #201819;
 139     margin-left: 5%;
 140 }
 141 .container .left_article ul li {
 142     padding-left: 0%;
 143     padding-right: 0%;
 144     text-align: justify;
 145     line-height: 24px;
 146     margin-top: 0px;
 147     margin-bottom: 0px;
 148     color: #201819;
 149 }
 150 .right_article {
 151     width: 30%;
 152     float: right;
 153     background-color: #FFFFFF;
 154 }
 155 .container .right_article ul {
 156         margin-top: 0px;
 157         margin-right: 0px;
 158         margin-bottom: 0px;
 159         margin-left: 0px;
 160         padding-top: 0px;
 161         padding-right: 0px;
 162         padding-bottom: 0px;
 163         padding-left: 0px;
 164 }
 165 .right_article ul li {
 166         font-family: "Source Sans Pro";
 167         list-style: none;
 168         text-align: center;
 169         background-color: #B3B3B3;
 170         width: 90%;
 171         margin-left: auto;
 172         margin-right: auto;
 173         margin-top: 10px;
 174         margin-bottom: 10px;
 175         padding-top: 15px;
 176         padding-bottom: 15px;
 177         color: #FFFFFF;
 178         font-weight: bold;
 179         border-radius: 0px;
 180         transition: all 0.3s linear;
 181         border-left: 5px solid #717070;
 182 }
 183 .right_article ul li:hover {
 184         background-color: #717070;
 185         cursor: pointer;
 186 }
 187 .footer {
 188         background-color: #717070;
 189 }
 190 .title {
 191     font-weight: bold;
 192     font-style: normal;
 193     font-family: "Source Sans Pro";
 194     text-align: center;
 195     color: #141212;
 196     letter-spacing: 2px;
 197 }
 198 .placeholder {
 199     max-width: 175px;
 200     max-height: 200px;
 201     padding-top: 30px;
 202     margin-left: auto;
 203  /* padding-left: 100px; */
 204  /* padding-left: auto; */
 205     padding-bottom: 30px;
 206 }
 207 .left_half {
 208         background-color: #52BAD5;
 209 }
 210 .container .column_half.left_half h2 {
 211         color: #FFFFFF;
 212         font-family: "Source Sans Pro";
 213         text-align: center;
 214 }
 215 .right_half {
 216         background-color: #01B2D1;
 217         color: #FFFFFF;
 218         font-family: "Source Sans Pro";
 219         text-align: center;
 220         font-weight: bold;
 221 }
 222 .column_title {
 223         padding-top: 25px;
 224         padding-bottom: 25px;
 225 }
 226 .copyright {
 227     text-align: center;
 228     background-color: #717070;
 229     color: #FFFFFF;
 230     text-transform: none;
 231     font-weight: lighter;
 232     letter-spacing: 2px;
 233     border-top-width: 2px;
 234     font-family: "Source Sans Pro";
 235 }
 236 body {
 237         margin-top: 0px;
 238         margin-right: 0px;
 239         margin-bottom: 0px;
 240         margin-left: 0px;
 241 }
 242 header .primary_header .title {
 243 }
 244
 245 @media (max-width: 320px) {
 246 .secondary_header ul li {
 247         float: none;
 248         margin-top: 28px;
 249         margin-left: 0px;
 250         width: 100%;
 251 }
 252 .container .secondary_header ul {
 253         margin-top: 0px;
 254         margin-right: 0px;
 255         margin-bottom: 0px;
 256         margin-left: 0px;
 257         padding-top: 0px;
 258         padding-right: 0px;
 259         padding-bottom: 0px;
 260         padding-left: 0px;
 261         height: auto;
 262         width: 100%;
 263         text-align: center;
 264 }
 265 .secondary_header {
 266         margin-top: 0px;
 267         margin-right: 0px;
 268         margin-bottom: 0px;
 269         margin-left: 0px;
 270         padding-top: 1px;
 271         padding-bottom: 40px;
 272 }
 273 .left_article {
 274         width: 100%;
 275         height: auto;
 276 }
 277 .right_article {
 278         width: 100%;
 279         height: auto;
 280 }
 281 .placeholder {
 282         width: 100%;
 283         margin-top: 22PX;
 284         /* margin-right: 0px; */
 285         margin-bottom: 22PX;
 286         /* margin-left: 0px; */
 287         margin-left: auto;
 288         padding-top: 0px;
 289         padding-right: 0px;
 290         padding-bottom: 0px;
 291         /* padding-left: 0px; */
 292         max-width: 175px;
 293         max-height: 200px;
 294         height: auto;
 295 }
 296 .columns {
 297         width: 100%;
 298         margin-top: 0px;
 299         margin-right: 0px;
 300         margin-bottom: 0px;
 301         margin-left: 0px;
 302         padding-top: 0PX;
 303         padding-right: 0PX;
 304         padding-bottom: 0PX;
 305         padding-left: 0PX;
 306 }
 307 .columns p {
 308         padding-left: 10px;
 309         padding-right: 10px;
 310 }
 311 .column_half.left_half {
 312         width: 100%;
 313 }
 314 .column_half.right_half {
 315         width: 100%;
 316 }
 317 .copyright {
 318         padding-top: 25px;
 319         padding-bottom: 0px;
 320         margin-bottom: 0px;
 321 }
 322 .container .left_article h3 {
 323         margin-top: 30px;
 324 }
 325 .social .social_icon img {
 326         width: 80%;
 327 }
 328 .container .secondary_header {
 329 }
 330 }
 331
 332 @media (min-width: 321px) and (max-width: 768px) {
 333 .secondary_header ul li {
 334         float: none;
 335         margin-top: 28px;
 336         margin-left: 0px;
 337         width: 100%;
 338 }
 339 .container .secondary_header ul {
 340         margin-top: 0px;
 341         margin-right: 0px;
 342         margin-bottom: 0px;
 343         margin-left: 0px;
 344         padding-top: 0px;
 345         padding-right: 0px;
 346         padding-bottom: 0px;
 347         padding-left: 0px;
 348         height: auto;
 349         width: 100%;
 350         text-align: center;
 351 }
 352 .secondary_header {
 353         margin-top: 0px;
 354         margin-right: 0px;
 355         margin-bottom: 0px;
 356         margin-left: 0px;
 357         padding-top: 1px;
 358         padding-bottom: 40px;
 359 }
 360 .left_article {
 361         width: 100%;
 362         height: auto;
 363 }
 364 .right_article {
 365         width: 100%;
 366         height: auto;
 367         padding-bottom: 25px;
 368 }
 369 .placeholder {
 370         margin-top: 0px;
 371         margin-right: 0px;
 372         margin-bottom: 0px;
 373         margin-left: auto;
 374         padding-top: 0px;
 375         /* padding-right: 0px; */
 376         padding-bottom: 0px;
 377         padding-left: 0px;
 378         width: 100%;
 379         max-width: 100%;
 380         height: auto;
 381         max-height: 100%;
 382 }
 383 .columns {
 384         width: 100%;
 385         margin-top: 6px;
 386         margin-right: 0px;
 387         margin-bottom: 6px;
 388         margin-left: 0px;
 389         padding-top: 0px;
 390         padding-right: 0px;
 391         padding-bottom: 0px;
 392         padding-left: 0px;
 393 }
 394 .columns p {
 395         padding-left: 14px;
 396         padding-right: 14px;
 397 }
 398 .column_half.left_half {
 399         width: 100%;
 400 }
 401 .column_half.right_half {
 402         width: 100%;
 403 }
 404 }
 405
 406 @media (min-width: 769px) and (max-width: 1000px) {
 407 .secondary_header {
 408         overflow: auto;
 409         padding-top: 30px;
 410         padding-bottom: 30px;
 411 }
 412 .secondary_header ul li {
 413         margin-top: 10px;
 414         margin-right: 7%;
 415         margin-bottom: 10px;
 416         margin-left: 7%;
 417 }
 418 .left_article {
 419         height: auto;
 420 }
 421 .right_article {
 422         height: auto;
 423         padding-bottom: 27px;
 424 }
 425 .placeholder {
 426         width: 100%;
 427         margin-left: auto;
 428         margin-right: 0px;
 429         /* padding-left: 0px; */
 430         padding-right: 0px;
 431 }
 432 .columns {
 433         width: 50%;
 434         float: left;
 435         padding-left: 0px;
 436         padding-top: 0px;
 437         padding-right: 0px;
 438         padding-bottom: 0px;
 439 }
 440 .container .columns p {
 441         padding-left: 25px;
 442         padding-right: 25px;
 443 }
 444 }
 445
 446 @media (min-width: 1001px) {
 447 }
 448 .thumbnail {
 449         width: 100px;
 450         border-radius: 200px;
 451         height: 100px;
 452         margin-left: auto;
 453 }
 454 .thumbnail_align {
 455         text-align: center;
 456 }
 457 .social {
 458         text-align: center;
 459         margin-right: 0px;
 460         margin-bottom: 0px;
 461         margin-left: 0px;
 462         width: 100%;
 463         background-color: #414141;
 464         clear: both;
 465         overflow: auto;
 466 }
 467 .social_icon {
 468         width: 25%;
 469         text-align: center;
 470         float: left;
 471         transition: all 0.3s linear;
 472         line-height: 0px;
 473         padding-top: 7px;
 474 }
 475 .container .social .social_icon:hover {
 476         cursor: pointer;
 477         opacity: 0.5;
 478 }
 479 #menu {
 480 }