/* CSS Document for Screens */ /*Update_6.19.2020*/ /* The following @import must be the first item in the CSS file for google fonts. */ @import url(https://fonts.googleapis/css?family=Open+Sans:300italic,700italic,300,700); /*Define defaults and resets*/ body { font-family: 'Open Sans', sans-serif; font-size: 16px;/*Make this the default at 100% size*/ font-weight: 300; color: #555555; margin: 0; padding: 0; position: relative; background-color: #312924; } /* The #mainpage is an id within a
that surrounds the entire site just inside of the tag. */ .topbgwht{ width:100%; height:120px; background-color:#FFFFFF; float:left; } #mainpage { max-width: 90%; /*set initially for large screens */ margin: 0 auto; /*Center the page */ position: relative; /* anything placed in the
will be positioned relative to these rules. This is important so the navigation (which is inside of the #mainpage but outside of the header) will position as part of the max-width of 90% rule. It makes sure everything is contained in the
container. */ background-color: #FFFFFF; border-width: medium; border-style: solid; padding-top: 20px; border-radius: 20px; } .mainpage_ctr { position:relative;height:375px;width:1050px; margin: 0 auto; } .bgi { background-image: url(../_graphics/mainpagebanner_jeep.jpg); height: 40%; background-position: center; background-repeat: no-repeat; background-size: cover; margin-left: 0px; margin-right: 0px; opacity: 1; min-width: 0px; } #mainpage .mainpageimg { width: 100%; height: 250px; background-color: #FE0004; } /* Define h1 through h4 elements and how they will display */ h1 { margin: 0 0 1em 0; /*top right bottom left*/ font-size: 2.8em; font-weight: 700; } h2 { margin: 0 0 .5em 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; } h3 { margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700; } h4 { margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; } .clearlft{ clear: left; } /* Define anchor tag elements */ a { color: #007eff; text-decoration:none; } a:visited { color: #65b1ff; } header div.hdr { height: 120px; max-width: 1200px; margin: 0px auto 0; background-repeat: no-repeat; background-color: #ffffff; background-image: url(../_graphics/the_granddaddy_event.png),url(../_graphics/jjlogo.png),url(../_graphics/jeepoverbridge.jpg); background-position: left, center,right; position: relative; /* Three potential images in the header. Anything placed in the header element will be placed in relationship to the header element itself */ /* [disabled]border-width: medium; */ /* [disabled]border-style: solid; */ } div.hometop{ width: 100%; height: 50px; background-color: #484646; color: #FFFFFF; font-weight: 800; text-align: center; font-size: 2em; } div.separator_blk{ width: 100%; height: 5px; background-color: #212121; color: #FFFFFF; font-weight: 800; text-align: center; font-size: 2em; } div.horzbar{ height: 5px; width: 100%; background-color: black; } #mainpage section{ position:relative; } #mainpage section .jeepersjam { width: 300px; height: 250px; float: left; margin: 10px 20px; /*border-radius: 12px; border-width: thick; border-style: inset;*/ /*background-color: aliceblue;*/ background-repeat: no-repeat; background-size: 300px 250px; } .jeepersjam p { position: absolute; top:260px; left:30px; width:300px; /*width of P element*/ font-weight: 200; font-size: .9em; text-align: left; color: #555; } #mainpage section .jeepjam { height: 250px; width: 300px; float: left; margin: 10px 20px; /*background-color: #84CCAC;*/ /*border-radius: 12px; border-width: thick; border-style: inset;*/ background-repeat: no-repeat; background-size: 300px 250px; } .jeepjam p { position: absolute; top:260px; left:370px; width:300px; /*width of P element*/ font-weight: 200; font-size: .9em; text-align: left; color:#555; } #mainpage section .others { width: 300px; height: 250px; float: left; margin: 10px 20px; /*border-radius: 12px; border-width: thick; border-style: inset;*/ background-repeat: no-repeat; } .others p { position: absolute; top:260px; left:720px; width:300px; /*width of P element*/ font-weight: 200; font-size: .9em; text-align: left; color: #555; } #mainpage section img { border-radius: 5%; } div.sponsorarea { background-color: white; width: 95%; margin: 0 auto; padding-left: 20px; } div.registerbutton { height: 20px; width: 200px; text-align: center; border: medium solid #050505; margin-left: auto; border-radius: 17px; background-color: #FF0004; margin-right: auto; } div.registerbutton a{ text-decoration: none; color: #FFFFFF; } footer { clear:both; padding-top:20px; padding-bottom:20px; background-color:#5F5C5C; color:#C5C5C5; } div.footermain p { font-size:.8em; width:800px; margin:auto; } @media screen and (max-width:1175px) { div.hometop { display:none; } .bgi { height: 30%; } header div.hdr { height: 120px; max-width: 1200px; margin: auto 0; background-repeat: no-repeat; background-color: #fffffff; background-image: url(../_graphics/jjlogo_300.png); background-position: center; position: relative; /* anything placed in the header element will be placed in relationship to the header element itself */ /* [disabled]border-width: medium; */ /* [disabled]border-style: solid; */ } .mainpage_ctr { position:relative; height:1075px; width:350px; margin: 0 auto; } #mainpage section .jeepersjam { clear: left; margin-top:0px; margin-left:5px; } .jeepersjam p { position: static; margin-top:5px; font-size: .8em; color:black; } #mainpage section .jeepjam { clear: left; margin-top: 100px; margin-left: 5px; } .jeepjam p { position: static; margin-top:5px; font-size: .8em; color:black; } #mainpage section .others { clear: left; margin-top:100px; margin-left: 5px; } .others p { position: static; margin-top:5px; font-size: .8em; color:black; } div.footermain p { font-size:.8em; width:300px; margin:auto; } } /*END @media screen and (max-width:1175px)*/