Difference between revisions of "Template:CCA SanDiego"

Line 6: Line 6:
 
<!-- Start of CSS-->
 
<!-- Start of CSS-->
 
<style type="text/css">
 
<style type="text/css">
 +
/*
 +
* Skeleton V2.0.4
 +
* Copyright 2014, Dave Gamache
 +
* www.getskeleton.com
 +
* Free to use under the MIT license.
 +
* http://www.opensource.org/licenses/mit-license.php
 +
* 12/29/2014
 +
*/
  
−
/* PAGE LAYOUT */
 
  
−
/* Change Background color*/
+
/* Table of contents
−
body {
+
––––––––––––––––––––––––––––––––––––––––––––––––––
−
background-color: #CCCCFF
+
- Grid
−
}
+
- Base Styles
 +
- Typography
 +
- Links
 +
- Buttons
 +
- Forms
 +
- Lists
 +
- Code
 +
- Tables
 +
- Spacing
 +
- Utilities
 +
- Clearing
 +
- Media Queries
 +
*/
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
 
−
#mainContainer { 
 
−
width: 978px;
 
−
overflow:hidden;
 
−
float:left;
 
−
margin-left:20px;
 
−
margin-bottom: 10px;
 
−
background-color: #fff;
 
−
border-bottom: 14px solid #565656;
 
−
border-right: 2px solid #565656;
 
−
border-left: 2px solid #565656;
 
−
border-top: 2px solid #565656;
 
−
font-family: "Century Gothic", Helvetica, sans-serif;
 
−
}
 
  
−
/* Creates the container for the menu */
+
/* Grid
−
#menuContainer  {  
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
−
float:left;
+
.container {
−
width: 134px;
+
  position: relative;
−
padding: 20px 0px;
+
  width: 100%;
−
border-top: 14px solid #565656;
+
  max-width: 960px;
−
background-color: #E8E8E9;
+
  margin: 0 auto;
−
}
+
  padding: 0 20px;
 +
  box-sizing: border-box; }
 +
.column,
 +
.columns {
 +
  width: 100%;
 +
  float: left;
 +
  box-sizing: border-box; }
  
−
/* Creates the container for the content */
+
/* For devices larger than 400px */
−
#contentContainer {
+
@media (min-width: 400px) {
−
padding-top:20px;
+
  .container {
−
padding-right:10px;
+
    width: 85%;
−
margin-bottom: 20px;
+
    padding: 0; }
−
width: 814px;
+
}
−
padding-left: 20px;
+
−
float: left;
+
−
background-color: #fff;
+
−
border-top: 14px solid #565656;
+
−
font-family: "Times New Roman", Helvetica, sans-serif;
+
−
}
+
  
−
/*Set up height place holder for the banner*/
+
/* For devices larger than 550px */
−
#bannerContainer {
+
@media (min-width: 550px) {
−
height:200px;
+
  .container {
−
margin:auto;
+
    width: 80%; }
−
text-align:center;
+
  .column,
−
color: #24B694;
+
  .columns {
−
}
+
    margin-left: 4%; }
 +
  .column:first-child,
 +
  .columns:first-child {
 +
    margin-left: 0; }
  
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
  .one.column,
 +
  .one.columns                    { width: 4.66666666667%; }
 +
  .two.columns                    { width: 13.3333333333%; }
 +
  .three.columns                  { width: 22%;            }
 +
  .four.columns                  { width: 30.6666666667%; }
 +
  .five.columns                  { width: 39.3333333333%; }
 +
  .six.columns                    { width: 48%;            }
 +
  .seven.columns                  { width: 56.6666666667%; }
 +
  .eight.columns                  { width: 65.3333333333%; }
 +
  .nine.columns                  { width: 74.0%;          }
 +
  .ten.columns                    { width: 82.6666666667%; }
 +
  .eleven.columns                { width: 91.3333333333%; }
 +
  .twelve.columns                { width: 100%; margin-left: 0; }
  
−
/*Change the styling of text for everything inside main container*/
+
  .one-third.column              { width: 30.6666666667%; }
−
#mainContainer p {  
+
  .two-thirds.column              { width: 65.3333333333%; }
−
font-size: 13px;
+
−
color: #000000;
+
−
}
+
−
+
−
/*This changes the color and font family */
+
−
#contentContainer h1, h2, h3, h4, h5, h6 {  
+
−
color: #565656;
+
−
border-bottom: none;
+
−
font-weight: bold;
+
−
font-family: "Century Gothic", Helvetica, sans-serif;
+
−
margin-top:10px;
+
−
}
+
  
−
/*Style of the links - links are different inside the menu */
+
  .one-half.column                { width: 48%; }
−
#contentContainer a {  
+
−
font-weight: bold;
+
−
color: #23b593;
+
−
}
+
  
−
  /* Styling links on hover- links are different inside the menu */
+
  /* Offsets */
−
#contentContainer a:hover {  
+
  .offset-by-one.column,
−
color: #59bf92;
+
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
−
}
+
  .offset-by-two.column,
 +
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
 +
  .offset-by-three.column,
 +
  .offset-by-three.columns        { margin-left: 26%;           }
 +
  .offset-by-four.column,
 +
  .offset-by-four.columns        { margin-left: 34.6666666667%; }
 +
  .offset-by-five.column,
 +
  .offset-by-five.columns        { margin-left: 43.3333333333%; }
 +
  .offset-by-six.column,
 +
  .offset-by-six.columns          { margin-left: 52%;            }
 +
  .offset-by-seven.column,
 +
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
 +
  .offset-by-eight.column,
 +
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
 +
  .offset-by-nine.column,
 +
  .offset-by-nine.columns        { margin-left: 78.0%;          }
 +
  .offset-by-ten.column,
 +
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
 +
  .offset-by-eleven.column,
 +
  .offset-by-eleven.columns      { margin-left: 95.3333333333%; }
  
−
/*Change the styling of tables */
+
  .offset-by-one-third.column,
−
        #contentContainer table {
+
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
−
    border: 1px solid #565656;
+
  .offset-by-two-thirds.column,
−
    border-collapse: collapse;
+
  .offset-by-two-thirds.columns  { margin-left: 69.3333333333%; }
−
    width: 90%
+
−
    margin: auto;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
    }
+
  
−
/*Change the styling of table cells*/
+
  .offset-by-one-half.column,
−
    #contentContainer  td {
+
  .offset-by-one-half.columns    { margin-left: 52%; }
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
  
−
/*Change the styling of table headers */
+
}
−
    #contentContainer th {
+
−
    background-color: #E8E8E9;
+
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
  
  
 +
/* Base Styles
 +
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 +
/* NOTE
 +
html is set to 62.5% so that all the REM measurements throughout Skeleton
 +
are based on 10px sizing. So basically 1.5rem = 15px :) */
 +
html {
 +
  font-size: 62.5%; }
 +
body {
 +
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
 +
  line-height: 1.6;
 +
  font-weight: 400;
 +
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
  color: #222; }
  
−
/*MENU STYLING */
 
  
−
/*Styling for the links in the menu */
+
/* Typography
−
#menuContainer a {
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
−
color: #565656;
+
h1, h2, h3, h4, h5, h6 {
−
text-decoration:none;
+
  margin-top: 0;
−
font-weight: bold;
+
  margin-bottom: 2rem;
−
}
+
  font-weight: 300; }
 +
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
 +
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
 +
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
 +
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
 +
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
 +
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
  
−
/* Sets the style for lists inside menuContainer  */
+
/* Larger than phablet */
−
#menuContainer ul {  
+
@media (min-width: 550px) {
−
list-style: none;
+
  h1 { font-size: 5.0rem; }
−
margin-left:0px;
+
  h2 { font-size: 4.2rem; }
−
}
+
  h3 { font-size: 3.6rem; }
 +
  h4 { font-size: 3.0rem; }
 +
  h5 { font-size: 2.4rem; }
 +
  h6 { font-size: 1.5rem; }
 +
}
  
−
/*Styles the list items to become menu buttons */
+
p {
−
#menuContainer ul li {  
+
  margin-top: 0; }
−
text-align: center;
+
−
display: block;
+
−
width: 100%;
+
−
height:30px;
+
−
padding-top:10px;
+
−
}
+
  
−
/*For the menu buttons, changes the color when hovering*/
 
−
#menuContainer li:hover {
 
−
color:  #FFF;
 
−
background-color: #CCCCFF;
 
−
}
 
  
−
/*Submenus are not displayed as default*/
+
/* Links
−
#menuContainer li ul {
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
−
display: none;
+
a {
−
padding-top:15px;
+
  color: #1EAEDB; }
−
margin-left: -19px;
+
a:hover {
−
}
+
  color: #0FA0CE; }
  
−
/*Submenus are displayed when hovering the menu button */
 
−
#menuContainer li:hover ul {
 
−
/*display: inline-block; */
 
−
display: block;
 
−
position: absolute;
 
−
float:right;
 
−
margin-left: 134px;
 
−
margin-top:-42px;
 
−
}
 
  
−
/*Style the submenu buttons*/
+
/* Buttons
−
#menuContainer li ul li{
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
−
background-color: #CCCCFF;  
+
.button,
−
padding-left:20px;
+
button,
−
padding-right:20px;
+
input[type="submit"],
−
height:30px;
+
input[type="reset"],
−
padding-top:10px;
+
input[type="button"] {
−
margin-top:-2px;
+
  display: inline-block;
−
color: #565656;
+
  height: 38px;
−
width: 150px;
+
  padding: 0 30px;
−
}
+
  color: #555;
 +
  text-align: center;
 +
  font-size: 11px;
 +
  font-weight: 600;
 +
  line-height: 38px;
 +
  letter-spacing: .1rem;
 +
  text-transform: uppercase;
 +
  text-decoration: none;
 +
  white-space: nowrap;
 +
  background-color: transparent;
 +
  border-radius: 4px;
 +
  border: 1px solid #bbb;
 +
  cursor: pointer;
 +
  box-sizing: border-box; }
 +
.button:hover,
 +
button:hover,
 +
input[type="submit"]:hover,
 +
input[type="reset"]:hover,
 +
input[type="button"]:hover,
 +
.button:focus,
 +
button:focus,
 +
input[type="submit"]:focus,
 +
input[type="reset"]:focus,
 +
input[type="button"]:focus {
 +
  color: #333;
 +
  border-color: #888;
 +
  outline: 0; }
 +
.button.button-primary,
 +
button.button-primary,
 +
input[type="submit"].button-primary,
 +
input[type="reset"].button-primary,
 +
input[type="button"].button-primary {
 +
  color: #FFF;
 +
  background-color: #33C3F0;
 +
  border-color: #33C3F0; }
 +
.button.button-primary:hover,
 +
button.button-primary:hover,
 +
input[type="submit"].button-primary:hover,
 +
input[type="reset"].button-primary:hover,
 +
input[type="button"].button-primary:hover,
 +
.button.button-primary:focus,
 +
button.button-primary:focus,
 +
input[type="submit"].button-primary:focus,
 +
input[type="reset"].button-primary:focus,
 +
input[type="button"].button-primary:focus {
 +
  color: #FFF;
 +
  background-color: #1EAEDB;
 +
  border-color: #1EAEDB; }
  
−
/*CLASSES */
 
  
−
/*Clear class for all the pages, adds spacing too*/
+
/* Forms
−
.clear{
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
−
clear:both;
+
input[type="email"],
−
height: 10px;
+
input[type="number"],
−
}
+
input[type="search"],
 +
input[type="text"],
 +
input[type="tel"],
 +
input[type="url"],
 +
input[type="password"],
 +
textarea,
 +
select {
 +
  height: 38px;
 +
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
 +
  background-color: #fff;
 +
  border: 1px solid #D1D1D1;
 +
  border-radius: 4px;
 +
  box-shadow: none;
 +
  box-sizing: border-box; }
 +
/* Removes awkward default styles on some inputs for iOS */
 +
input[type="email"],
 +
input[type="number"],
 +
input[type="search"],
 +
input[type="text"],
 +
input[type="tel"],
 +
input[type="url"],
 +
input[type="password"],
 +
textarea {
 +
  -webkit-appearance: none;
 +
    -moz-appearance: none;
 +
          appearance: none; }
 +
textarea {
 +
  min-height: 65px;
 +
  padding-top: 6px;
 +
  padding-bottom: 6px; }
 +
input[type="email"]:focus,
 +
input[type="number"]:focus,
 +
input[type="search"]:focus,
 +
input[type="text"]:focus,
 +
input[type="tel"]:focus,
 +
input[type="url"]:focus,
 +
input[type="password"]:focus,
 +
textarea:focus,
 +
select:focus {
 +
  border: 1px solid #33C3F0;
 +
  outline: 0; }
 +
label,
 +
legend {
 +
  display: block;
 +
  margin-bottom: .5rem;
 +
  font-weight: 600; }
 +
fieldset {
 +
  padding: 0;
 +
  border-width: 0; }
 +
input[type="checkbox"],
 +
input[type="radio"] {
 +
  display: inline; }
 +
label > .label-body {
 +
  display: inline-block;
 +
  margin-left: .5rem;
 +
  font-weight: normal; }
  
  
−
/* highlight box for special messages */
+
/* Lists
−
    .highlightBox {
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
−
        width:500px;  
+
ul {
−
        margin:auto;
+
  list-style: circle inside; }
−
        background-color: #E8E8E9;  
+
ol {
−
margin-bottom: 15px;
+
  list-style: decimal inside; }
−
margin-top: 15px;
+
ol, ul {
−
padding: 15px;
+
  padding-left: 0;
−
padding-top: 5px;
+
  margin-top: 0; }
−
    }
+
ul ul,
 +
ul ol,
 +
ol ol,
 +
ol ul {
 +
  margin: 1.5rem 0 1.5rem 3rem;
 +
  font-size: 90%; }
 +
li {
 +
  margin-bottom: 1rem; }
  
  
 +
/* Code
 +
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 +
code {
 +
  padding: .2rem .5rem;
 +
  margin: 0 .2rem;
 +
  font-size: 90%;
 +
  white-space: nowrap;
 +
  background: #F1F1F1;
 +
  border: 1px solid #E1E1E1;
 +
  border-radius: 4px; }
 +
pre > code {
 +
  display: block;
 +
  padding: 1rem 1.5rem;
 +
  white-space: pre; }
 +
 +
 +
/* Tables
 +
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 +
th,
 +
td {
 +
  padding: 12px 15px;
 +
  text-align: left;
 +
  border-bottom: 1px solid #E1E1E1; }
 +
th:first-child,
 +
td:first-child {
 +
  padding-left: 0; }
 +
th:last-child,
 +
td:last-child {
 +
  padding-right: 0; }
 +
 +
 +
/* Spacing
 +
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 +
button,
 +
.button {
 +
  margin-bottom: 1rem; }
 +
input,
 +
textarea,
 +
select,
 +
fieldset {
 +
  margin-bottom: 1.5rem; }
 +
pre,
 +
blockquote,
 +
dl,
 +
figure,
 +
table,
 +
p,
 +
ul,
 +
ol,
 +
form {
 +
  margin-bottom: 2.5rem; }
 +
 +
 +
/* Utilities
 +
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 +
.u-full-width {
 +
  width: 100%;
 +
  box-sizing: border-box; }
 +
.u-max-full-width {
 +
  max-width: 100%;
 +
  box-sizing: border-box; }
 +
.u-pull-right {
 +
  float: right; }
 +
.u-pull-left {
 +
  float: left; }
 +
 +
 +
/* Misc
 +
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 +
hr {
 +
  margin-top: 3rem;
 +
  margin-bottom: 3.5rem;
 +
  border-width: 0;
 +
  border-top: 1px solid #E1E1E1; }
 +
 +
 +
/* Clearing
 +
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 +
 +
/* Self Clearing Goodness */
 +
.container:after,
 +
.row:after,
 +
.u-cf {
 +
  content: "";
 +
  display: table;
 +
  clear: both; }
 +
 +
 +
/* Media Queries
 +
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 +
/*
 +
Note: The best way to structure the use of media queries is to create the queries
 +
near the relevant code. For example, if you wanted to change the styles for buttons
 +
on small devices, paste the mobile query code up in the buttons section and style it
 +
there.
 +
*/
 +
 +
 +
/* Larger than mobile */
 +
@media (min-width: 400px) {}
 +
 +
/* Larger than phablet (also point when grid becomes active) */
 +
@media (min-width: 550px) {}
 +
 +
/* Larger than tablet */
 +
@media (min-width: 750px) {}
 +
 +
/* Larger than desktop */
 +
@media (min-width: 1000px) {}
 +
 +
/* Larger than Desktop HD */
 +
@media (min-width: 1200px) {}
 
</style>
 
</style>
 
<!-- End of CSS -->
 
<!-- End of CSS -->

Revision as of 00:15, 28 August 2015