/* --------------------------------------------- */
/* --------- Branding: Color Palette ----------- */
/* --------------------------------------------- */
/* These are the colors of the boxes under the Branding section */
#swatch1{
background-color: #896bc7;
}
#swatch2{
background-color: #c7a86b;
}
#swatch3{
background-color: #a8c76b;
}
#swatch4{
background-color: #c76ba8;
}
/* ----------------------------------------------------- */
/* --------- Typography: Heading & Body Copy ----------- */
/* ----------------------------------------------------- */
/* These are the font families of all the headings and body copy */
body{
font-family:Neucha ;
}
h1,h2,h3,h4,h5,h6{
font-family:Chatura ;
}
/* -------------------------------------------------- */
/* --------- Navigation: Main & Secondary ----------- */
/* -------------------------------------------------- */
/* Colors, style, floating, shapes, etc of main & secondary navs */
/* Main Navigation Style */
#mainnav{
background-color:#c7a86b;
padding:9px;
margin:2px;
}
#mainnav ul{
padding:0px;
}
#mainnav li{
display:inline;
}
#mainnav a:link{
color: #8d1182;
text-decoration:none;
margin: 8px 82px 0 0;
text-transform: uppercase;
font-weight: 150%;
letter-spacing:.1em;
font-size:1em;
padding-bottom:5px;
/* other styles */
}
#mainnav a:visited{
color: #d032ff;
/* other styles */
}
#mainnav a:hover{
color: #ffc94b;
border-bottom:5px solid #ffffff;
/* other styles */
}
#mainnav a:active{
color: #ffd75f;
/* other styles */
}
/* Secondary Navigation Style */
#secondnav{
background-color:#c7a86b;
padding:20px;
}
#secondnav ul{
padding:0px;
}
#secondnav li{
display:inline;
}
#secondnav a:link{
color: #8d1182;
text-decoration:none;
margin: 8px 82px 0 0 ;
text-transform: uppercase;
font-weight:200%;
letter-spacing:.1em;
font-size:1em;
padding-bottom:5px;
/* other styles */
}
#secondnav a:visited{
color: #d032ff;
/* other styles */
}
#secondnav a:hover{
color: #ffc94b;
border-bottom:5px solid #ffffff;
/* other styles */
}
#secondnav a:active{
color: #;
/* other styles */
}
/* ----------------------------------- */
/* --------- HTML Elements ----------- */
/* ----------------------------------- */
/* Styling for all HTML Elements */
background-image:
/* True for all headings */
h1, h2, h3 ,h4, h5, h6{
color:#00ff86;
font-weight:300;
padding:.1em;
margin:.1em 0;
}
/* Style for individual headings */
h1{
font-size:200%;
}
h2{
font-size:100%;
}
h3{
font-size:2.5em;
}
h4{
font-size:2.3em;
}
h5{
font-size:2em;
}
h6{
font-size:1.8em;
}
/* List Styles */
ul{
color:#000000;
font-size:1.5em;
}
ul li{
}
ol{
color:#000000;
font-size:1.5em;
}
ol li{
}
/* Non-Navigational Link Styles */
/* This is for all default links on your page */
a:link{
font-weight:500;
font-size:1.2em;
text-transform: uppercase;
letter-spacing:1px;
color:#896bc7;
text-decoration:none;
}
a:visited{
color:#ffc94b;
}
a:hover{
color:#14cc84;
}
a:active{
color:#8d1182;
}
/* This is for secondary link styles (possibly in your footer, etc) */
.linkstyle2 a:link{
}
.linkstyle2 a:visited{
}
.linkstyle2 a:hover{
}
.linkstyle2 a:active{
}
/* Paragraph Styles */
p{
color:#000000;
text-align:justify;
letter-spacing:1px;
/* Other paragraph styles */
}
/* Figure and Figcaption Styles */
figure{
text-line: center;
width:225px;
}
figure img{
border:2px solid #8d1182;
}
figcaption{
color:#8d1182;
letter-spacing:1px;
}
/* ------------------------------------- */
/* --------- Style Guide CSS ----------- */
/* ------------------------------------- */
/* The following CSS is used for the styling of the structure of the Style Guide itself */
body{
width: 900px;
margin: auto;
border: 1px solid #777;
padding: 20px;
}
.styleguide{
font-family: "Courier New", Courier, monospace;
}
h1.styleguide, h2.styleguide, h3.styleguide, h4.styleguide, h5.styleguide, h6.styleguide{
color: #777;
font-family: "Courier New", Courier, monospace;
}
h2.styleguide{
background-color: #777;
border-radius: 15px;
padding: 15px;
margin-left: -15px;
color: white;
}
p.styleguide{
color: #777;
font-family: "Courier New", Courier, monospace;
}
section{
margin-top: -10px;
margin-bottom: 70px;
}
.colorgroup{
float: left;
width: 170px;
}
.colorgroup h4{
font-size: .9em;
}
.colorgroup p{
font-size: .8em;
}
.clear{
clear: both;
}
.swatches{
width: 100px;
height: 100px;
border-radius: 10px;
}