/* --------------------------------------------- */
/* --------- Branding: Color Palette ----------- */
/* --------------------------------------------- */
/* These are the colors of the boxes under the Branding section */
#swatch1{
border: 5px 5px 5px 5px solid #404040;
background-color: #F2F2F2;
}
#swatch2{
background-color: #095ACC;
}
#swatch3{
background-color: #8BBBD9;
}
#swatch4{
background-color: #404040;
}
/* ----------------------------------------------------- */
/* --------- Typography: Heading & Body Copy ----------- */
/* ----------------------------------------------------- */
/* These are the font families of all the headings and body copy */
body{
font-family: 'Roboto', sans-serif;
'Roboto', sans-serif;}
h1,h2,h3,h4,h5,h6{
font-family: 'Cinzel', serif;
}
/* -------------------------------------------------- */
/* --------- Navigation: Main & Secondary ----------- */
/* -------------------------------------------------- */
/* Colors, style, floating, shapes, etc of main & secondary navs */
/* Main Navigation Style */
#mainnav{
background-color:#404040;
padding:20px;
}
#mainnav ul{
padding:0px;
}
#mainnav li{
display: inline;
}
#mainnav a:link{
color: #F2F2F2;
text-decoration: none;
margin: 8px 80px 0px 0px;
text-transform: uppercase;
font-weight: 100;
font-size:large;
/* other styles */
}
#mainnav a:visited{
color: #8BBBD9;
/* other styles */
}
#mainnav a:hover{
color: #8BBBD9;
border-bottom: 5px solid #8BBBD9;
/* other styles */
}
#mainnav a:active{
color: #F2F2F2;
border-bottom: 5px solid #F2F2F2;
/* other styles */
}
/* Secondary Navigation Style */
#secondnav{
background-color:#404040;
padding:5px;
}
#secondnav ul{
padding:0px;
}
#secondnav li{
display: inline;
}
#secondnav a:link{
color: #F2F2F2;
text-decoration: none;
margin: 40px 90px 0px 10px;
text-transform: uppercase;
font-weight: 50;
font-size:medium;
/* other styles */
}
#secondnav a:visited{
color: #8BBBD9;
/* other styles */
}
#secondnav a:hover{
color: #8BBBD9;
border-bottom: 5px solid #8BBBD9;
/* other styles */
}
#secondnav a:active{
color: #F2F2F2;
border-bottom: 5px solid #F2F2F2;
/* other styles */
}
/* ----------------------------------- */
/* --------- HTML Elements ----------- */
/* ----------------------------------- */
/* Styling for all HTML Elements */
/* True for all headings */
h1, h2, h3 ,h4, h5, h6{
color: #095ACC;
font-weight: 300;
padding: .1em;
margin: .1em 0;
}
/* Style for individual headings */
h1{
font-size: 6em;
}
h2{
font-size: 4em;
}
h3{
font-size: 3em;
}
h4{
font-size: 2em;
}
h5{
font-size: 1em;
}
h6{
font-size: .5em;
}
/* List Styles */
ul{
color: #095ACC;
font-size: 1em;
}
ul li{
}
ol{
color: #095ACC;
font-size: 1em;
}
ol li{
color: #095ACC;
font-size: 1em;
}
/* Non-Navigational Link Styles */
/* This is for all default links on your page */
a:link{
font-weight: 600;
font-size: 1.3em;
text-transform: uppercase;
letter-spacing: 1px;
color: #8BBBD9;
text-decoration: none;
}
a:visited{
color: #404040;
}
a:hover{
color: #404040;
}
a:active{
color:#095ACC;
}
/* 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:#404040;
text-align: justify;
letter-spacing: .5px;
/* Other paragraph styles */
}
/* Figure and Figcaption Styles */
figure{
text-align: center;
}
figure img{
}
figcaption{
color: #404040;
letter-spacing: .5px;
}
/* ------------------------------------- */
/* --------- Style Guide CSS ----------- */
/* ------------------------------------- */
/* The following CSS is used for the styling of the structure of the Style Guide itself */
body{
width: 700px;
margin: 10px 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;
}