class="container"

class="main-navigation"

class="landing"

class="featured-content"

class="button"

class="featured-content2" Schedules page class="schedules"

class="container"

class="main-navigation"

class="landing"

class="gallery"

class="table" Music Schedules page class="music"

class="container"

class="main-navigation"

class="landing"

class="gallery"

class="featured-content3"

class="table" Eligibility page

class="container"

class="main-navigation"

class="landing"

class="featured-content3"

class="table" Sponsors Page

class="container"

class="main-navigation"

class="landing" ----------------------------------------------------*/ /* --------------------------------------------------- GLOBAL STYLES ----------------------------------------------------*/ body { font-size: 19px; font-family: "alegreya", calibri, candara, "segoe UI", Optima, Arial, sans-serif; color: rgb(226, 226, 226); background:rgb(15,15,15); background-image: url(../images/Title%20sponsors%20photo%20outside%203.JPG); background-repeat: no-repeat; background-size: cover; padding: 2% 6% 6% 6%; } /*@media screen and (min-width: 750px){ body { font-size: 1.4em; */ /*----increases font size above a certain screen size---*/ .container { background: rgb(15,15,15); /* IE8 */ background: rgba(15, 15, 15, 0.86); padding: 30px; } H1, H2, H3 { font-family: "alegreya sc", Garamond, "Baskerville Old Face", "Times New Roman", serif; font-weight: normal; } H1 { font-size: 3.3684em; line-height: 1.2656em; margin-top: 0.4219em; margin-bottom: 0; color: rgb(172, 140, 71); } H2 { font-size: 1.5em; line-height: 1.2558em; margin: 0.4219em auto 0.4219em auto; } H3 { font-size: 1.5263em; font-weight: normal; line-height: 1.8621em; margin-top: 0.9310em; margin-bottom: 0; } p { font-size: 1em; line-height: 1.4211em; margin-top: 1.4211em; margin-bottom: 0; font-weight: 100; max-width: 700px; } /*--Paragraph at bigger sizes */ @media screen and (min-width: 750px) { p { font-size: 1em; line-height: 1.4211em; margin-top: 1.4211em; margin-bottom: 0; font-weight: 100; max-width: 1200px; } } img { width: 100%; } a:link { color: rgb(224, 182, 90); } a:visited { color: rgb(100, 81, 41); } a:hover { color: rgb(217, 144, 88); } a:active { color: rgb(252, 217, 142); } .button { background-color: rgb(172,140,71); border-radius: 8px; width: 200px; } .button a { color: rgb(250, 242, 242); text-decoration: none; font-style: normal; text-transform: uppercase; text-align: center; display: block; padding: 10px 0; } .button a:hover { background-color: rgb(119, 97, 48); border-radius: 8px; } .landing a{ color: rgb(252, 217, 142); } .gallery { margin-top:30px; margin-left: auto; margin-right: auto; } @media screen and (min-width:750px){ .gallery { width: 615px; margin-left: auto; margin-right: auto; } .gallery img{ max-width:200px; height:150px; } } /* gallery sizing at bigger sizes*/ @media screen and (max-width:750px){ .gallery img{ max-width:70%; max-height:70%; } } /* gallery sizing at smaller sizes*/ .table { margin-top: 30px: } @media screen and (min-width: 750px) { .landing { text-align: center; } .landing p { margin-left: auto; margin-right: auto; border: none; } } /* centres headers */ /* --------------------------------------------------- LOGO STYLES ----------------------------------------------------*/ .logo { display: block; margin: 0 auto; max-width: 818px; } .logo img { max-width: 818px; } /* --------------------------------------------------- MAIN NAVIGATION STYLES ----------------------------------------------------*/ .main-navigation ul { padding-left: 0; } .main-navigation li { list-style: none; text-align: center; margin: 5px 0; } .main-navigation a { display: block; padding: 15px 10px; text-decoration: none; text-transform: uppercase; background-color: rgba(67,67,67,0.17); color: rgb(244, 227, 190); } .main-navigation a:visited { color: rgb(147, 145, 145); } .main-navigation a:hover { color: rgb(255,255,255); transition: .5s color; background: rgba(106, 96, 96, 0.51); } .main-navigation a:active { color: rgb(173, 138, 63); } /*-------------------------------- Menu Navigation at a larger size ---------------------------------*/ @media screen and (min-width: 750px){ .main-navigation .nav ul { padding:0; margin:0; list-style: none; background:#000; height:100px; } .main-navigation li { float: left; position: relative; width: 13%; border-bottom: none; height: 100px; line-height: 20px; font-size: 0.5em; font-weight: 300; margin:1px; } } @media screen and (min-width: 950px){ .main-navigation .nav ul { padding:0; margin:0; list-style: none; background:#000; height:100px; } .main-navigation li { float: left; position: relative; width: 14%; border-bottom: none; height: 100px; line-height: 20px; font-size: 0.7em; font-weight: 300; margin: 1px; } } /* --------------------------------------------------- MEDIA QUERY STYLE CHANGES ----------------------------------------------------*/ /*@media screen and (min-width: 950px){ body { font-size: 1.2em; */ /*----increases font size above a certain screen size---*/ /* --------------------------------------------------- HOME PAGE STYLES ----------------------------------------------------*/ .container .featured-content H3 { border-bottom: 1px solid rgb(128,128,128); } .container .featured-content p { font-style: italic; } .container .featured-content ul { list-style: none; padding-left: 0; } .container .landing { text-align: center; } .container .landing ul { list-style: none; } .container .landing p { max-width: 750px; } .container .landing .table { max-width: 1000px; margin-left: auto; margin-right: auto; } /*@media screen and (min-width: 750px){ .featured-content h3 { height: 120px; width: 80%; margin-left: 10%; text-align: center } .featured-content p { height: 300px; margin-left: 3%; margin: 2px; text-align: center } .featured-content .button { height:80px; margin-left: 25%; } .featured-content { float: left; width: 30%; margin-left: 3%; } }*/ @media screen and (min-width: 1200px){ .container .featured-content H3 { height: 120px; width: 80%; margin-left: 10%; text-align: center; } .container .featured-content p { height: 250px; margin-left: 3%; margin: 2px; text-align: center; } .container .featured-content .button { height:80px; margin-left: 25%; } .container .featured-content { float: left; width: 30%; margin-left: 3%; margin-right: 10px; } .container .featured-content2 ul { list-style: none; margin-left: 10%; margin-right: 4px; } } /* --------------------------------------------------- SCHEDULES PAGE STYLES ----------------------------------------------------*/ .landing { text-align: center } .landing H1 { font-size: 1.800em; line-height: 1.2656em; margin-top: 0.4219em; margin-bottom: 0; color: rgb(172, 140, 71); } .featured-content H3 { border-bottom: 1px solid rgb(128,128,128); } .schedules .featured-content { float: none } .featured-content p { font-style: italic; } .featured-content ul { list-style: none; padding-left: 0; } @media screen and (min-width: 750px){ .schedules .featured-content H3 { height: 120px; width: 80%; margin-left: 10%; text-align: center } .schedules .featured-content p { height: 250px; margin-left: 3%; margin: 2px; text-align: center } .schedules .featured-content .button { height:80px; margin-left: 25%; } .schedules .featured-content { float: none /* @media screen and (min-width: 1050px){ .schedules .featured-content h3 { height: 120px; width: 80%; margin-left: 10%; text-align: center } .schedules .featured-content p { height: 250px; margin-left: 3%; margin: 2px; text-align: center } .schedules .featured-content .button { height:80px; margin-left: 25%; } .schedules .featured-content { float: none } } /* --------------------------------------------------- MUSIC PAGE STYLES ----------------------------------------------------*/ /*.music .featured-content h3 { border-bottom: 1px solid rgb(128,128,128); } .music .featured-content { float: none } .featured-content p { font-style: italic; } .featured-content ul { list-style: none; padding-left: 0; } .landing { text-align: center }*/ /* @media screen and (min-width: 750px){ .music H3 { height: 120px; width: 80%; margin-left: 10%; text-align: center } .music .featured-content p { height: 250px; margin-left: 3%; margin: 2px; text-align: center } .music .featured-content .button { height:80px; margin-left: 25%; } .music .featured-content { float: none; width: 100%; margin-left: 0; */ /*@media screen and (min-width: 1050px){ .music .featured-content H3 { height: 120px; width: 80%; margin-left: 10%; text-align: center } .music .featured-content3 p { height: 250px; margin-left: 3%; margin: 2px; text-align: center } .music .featured-content .button { height:80px; margin-left: 25%; } .music .featured-content { float: none; width: 100%; margin-left: 0; } */ /* --------------------------------------------------- SPONSORS PAGE STYLES ----------------------------------------------------*/ /* --------------------------------------------------- GLOBAL FOOTER STYLES ----------------------------------------------------*/ footer { padding: 10px 0; clear:both; } footer H4 { text-transform: uppercase; } footer p { margin: 0; font-size: 0.3em; line-height: 15px; text-align: center; }