@font-face { /* SANS-SERIF REGULAR */
font-family: greatdanedesign_fonts_sans_serif;
src: url('www_fonts/myriadpro-light.woff');
font-weight: normal;
}

@font-face { /* SANS-SERIF BOLD */
font-family: greatdanedesign_fonts_sans_serif;
src: url('www_fonts/myriadpro-semibold.woff');
font-weight: bold;
}

@font-face { /* SANS-SERIF ITALIC */
font-family: greatdanedesign_fonts_sans_serif;
src: url('www_fonts/myriadpro-lightit.woff');
font-style: italic;
}

@font-face { /* SERIF REGULAR */
font-family: greatdanedesign_fonts_serif;
src: url('www_fonts/warnockpro-regular.woff');
font-weight: normal;
}

@font-face { /* SERIF BOLD */
font-family: greatdanedesign_fonts_serif;
src: url('www_fonts/warnockpro-bold.woff');
font-weight: bold;
}

@font-face { /* SERIF ITALIC */
font-family: greatdanedesign_fonts_serif;
src: url('www_fonts/warnockpro-it.woff');
font-style: italic;
}

* {
margin: 0px;
padding: 0px;
}

html {
background-color: #680000;
height: 100%;
overflow-y: scroll;
}

/* PREVENTS "FONT SIZE INFLATION" ON MOBILE DEVICES */

html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}

/* CALLS A VERTICAL SCROLL BAR REGARDLESS OF HEIGHT */

body {
min-height: 101%;
}

article, aside, details, figcaption, figure, footer, header, hgroup, img, menu, nav, section {
display: block;
}

footer {
padding: 10px 0px 10px 0px;
text-align: center;
}

header {
float: left;
width: 100%;
}

header img {
width: 100%;
}





/* STYLES FOR NAVIGATION */

nav {
list-style-type: none;
margin: 3% auto 0% auto;
text-align: center;
}

nav li {
display: inline;
padding: 0% 1% 0% 1%;
}

nav li .button {
background: #ffffff;
border-bottom: 1px solid #8B0e04;
color: #8B0e04;
display: inline-block;
font-family: greatdanedesign_fonts_sans_serif, sans-serif;
font-size: 1em;
font-weight: normal;
padding: 1px 4px 1px 4px;
text-decoration: none;
width: auto;
}

nav li .button_active, .button:hover {
background: #8B0e04;
color: #ffffff;
}





/* STYLES FOR LAYOUT */

#clickable_header {
border: none;
}

#main {
margin: 40px auto 0px auto;
padding: 1% 1% 4% 1%;
width: 92%;
}

#responsive_menu_icon {
background: url(www_img/responsive_menu_icon.svg) center;
display: none;
height: 40px;
width: 40px;
}

#wrapper {
background: white;
border: 1px solid #cbcbcb;
padding: 0%;
margin: 10px auto 0% auto;
max-width: 950px;
width: 95%;
}





/* STYLES FOR LINKS & FORMS */

a {
color: #8B0e04;
font-weight: bold;
text-decoration: none;
}

a:hover, a:active {
text-decoration: underline;
}

input, textarea {
background-color: #ffffff;
border: 1px solid #555555;
box-sizing: border-box;
color: #111111;
font-family: greatdanedesign_fonts_serif, sans-serif;
font-size: 0.9em;
}

input.button {
background-color: #680000;
border-color: #680000;
border-style: outset;
border-width: 3px;  
color: #ffffff;
font-family: greatdanedesign_fonts_sans_serif, sans-serif;
font-size: 11px;
font-weight: bold;
padding: 3px;
text-decoration: none;
}

input.button:hover {
background-color: #555555;
border-color: #555555;
}





/* STYLES FOR SOCIAL MEDIA */

/* BLOGGER */

a.blogger {
background-image: url('www_img/social_media_blogger_grey.svg');
background-repeat: no-repeat; border: none; float: left; height: 45px; margin: 2px; position: relative; text-decoration: none; width: 45px;
}

a.blogger:hover, a.blogger:active {
background-image: url('www_img/social_media_blogger_colour.svg');
}

/* FACEBOOK */

a.facebook {
background-image: url('www_img/social_media_facebook_grey.svg');
background-repeat: no-repeat; border: none; float: left; height: 45px; margin: 2px; position: relative; text-decoration: none; width: 45px;
}

a.facebook:hover, a.facebook:active {
background-image: url('www_img/social_media_facebook_colour.svg');
}

/* GOOGLE+ */

a.google {
background-image: url('www_img/social_media_google_grey.svg');
background-repeat: no-repeat; border: none; float: left; height: 45px; margin: 2px; position: relative; text-decoration: none; width: 45px;
}

a.google:hover, a.google:active {
background-image: url('www_img/social_media_google_colour.svg');
}

/* LINKEDIN */

a.linkedin {
background-image: url('www_img/social_media_linkedin_grey.svg');
background-repeat: no-repeat; border: none; float: left; height: 45px; margin: 2px; position: relative; text-decoration: none; width: 45px;
}

a.linkedin:hover, a.linkedin:active {
background-image: url('www_img/social_media_linkedin_colour.svg');
}

/* TWITTER */

a.twitter {
background-image: url('www_img/social_media_twitter_grey.svg');
background-repeat: no-repeat; border: none; float: left; height: 45px; margin: 2px; position: relative; text-decoration: none; width: 45px;
}

a.twitter:hover, a.twitter:active {
background-image: url('www_img/social_media_twitter_colour.svg');
}





/* STYLES FOR TEXT */

h1 {
color: #555555;
font-family: greatdanedesign_fonts_serif, serif;
font-size: 2.4em;
font-weight: bold;
margin-bottom: 1em;
}

h2 {
color: #666666;
font-family: greatdanedesign_fonts_serif, serif;
font-size: 1.6em;
font-weight: bold;
margin-bottom: 1em;
margin-top: 1em;
}

p, ol, ul {
color: #333333;
font-family: greatdanedesign_fonts_serif, serif;
font-size: 1em;
line-height: 1.5em;
margin: 0em 0em 1em 0em;
}

/* PREVENTS "FONT BOOSTING" ON MOBILE DEVICES */

p {
height: auto;
max-height: 999999px;
min-height: 1px;
width: 100%;
}

section ul {
list-style-type: circle;
margin-left: 30px;
}

.bold {
font-weight: bold;
}

.copyright, .creator {
color: #ffffff;
font-family: greatdanedesign_fonts_sans_serif, serif;
font-size: 0.85em;
margin: 15px;
}

.error {
color: #aa0000;
}

.italic {
font-style: italic;
}

.promo {
font-style: italic;
margin: 1em 0px 1em 0px}

.small {
font-family: greatdanedesign_fonts_sans_serif, sans-serif;
font-size: 0.85em;
font-weight: normal;
text-decoration: none;
}





/* STYLES FOR MEDIA QUERIES */

@media screen and (max-width: 900px) {
#responsive_menu_icon {
display: inline-block;
}

nav {
width: 65%;
}

nav li .button {
display: block;
margin: -5px;
padding: 2px;
}

nav ul, nav:active ul {
display: none;
width: 100%;
}

nav:hover ul {
display: block;
}

#main {
width: 90%;
}
}