/****************************************************************************/ /* Body Characteristics */ /****************************************************************************/ html { background: #FFF; height: auto !important; } body { background: -moz-linear-gradient(#99ffff, #336600); background: -o-linear-gradient(#99ffff, #336600); background: -webkit-linear-gradient(#99ffff, #336600); width: 1100px; margin: auto; float: center; padding: 20px; /*border-radius: 40px; border-width: 20px; border-style: double;*/ font: normal 90% Varela, sans-serif; color: #FFF; } p { padding: 0 0 10px 0; line-height: 1.7em; font-size: 100% } img { border: 0px;} h2, h3, h4, h5, h6 { font: normal 200% Varela, sans-serif; color: #FFF; text-shadow: 2px 2px #000; letter-spacing: -1px; margin: 0 0 10px 0;} h2 { font: normal 165% Varela, sans-serif;} h3 { font: normal 130% Varela, sans-serif; } h5, h6 { margin: 0; padding: 0 0 0px 0; font: normal 150% Varela, sans-serif; line-height: 1.5em;} h5 { font: normal 95% Varela, sans-serif; color: #663300; padding-bottom: 15px;} h6 { font: normal 130% Varela, sans-serif; color: #FFF; text-shadow: 1px 1px #000; padding-bottom: 15px;} a { color: #FFF; font-weight: bold; background: transparent; outline: none; text-decoration: none;} a:hover { text-decoration: underline;} ul { margin: 2px 0 22px 30px; line-height: 1.7em; font-style: normal; font-size: 100%;} ol { margin: 8px 0 22px 20px;} ol li { margin: 0 0 11px 0;} #main, #header, #banner, #site_content, #footer, #slogan, #logo_container { margin-left: auto; margin-right: auto;} #header_container { height: 360px; /*padding-top: 20px;*/ /*background: #5D3424;\ background: -moz-linear-gradient(#330099, #663300); background: -o-linear-gradient(#330099, #663300); background: -webkit-linear-gradient(#330099, #663300);*/} #header { height: 320px; width: 960px; background-image: url(images/budheader.jpg); -moz-border: 20px; -o-border: 20px; -webkit-border: 20px; border-radius: 20px; background-position: bottom; margin-top:60px; margin-bottom: -100px; /*border-style: double;*/ border-width: 10px; } #header_button { float: right; width: 120px; height: 120px; margin-top: 40px; margin-right: 120px; } #logo_container { /*position: inherit;*/ /* height: 50px; background: transparent url(images/transparent.png) repeat; background: -moz-linear-gradient(#663300, #003300); background: -o-linear-gradient(#663300, #003300); background: -webkit-linear-gradient(#663300, #003300)*/ } #menubar { margin-right: 0px; margin-left: -40px; } #logo { width: 380px; height: 100px; float: left; text-align: left; margin-left: 120px; border: none; } #logo a h1 { font: normal 360% Varela bold, sans-serif; letter-spacing: 0px; text-decoration: none; text-shadow: 4px 4px #000; text-decoration:none; background-image: transparent url(/images/transparent_light.png) repeat; padding: 9px 15px 9px 15px; border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; -webkit-border: 7px 7px 7px 7px; -webkit-box-shadow: rgba(0, 0, 0, 0.75) 4px 4px 4px; -moz-box-shadow: rgba(0, 0, 0, 0.75) 4px 4px 4px; box-shadow: rgba(0, 0, 0, 0.75) 4px 4px 4px; } #menu_items { height: 80px; /* margin-right: 20px;*/ /*padding-top: 10px;*/ width: 960px;} ul#menu { position: inherit; } ul#menu li { padding: 0 0 0 0px; list-style:none; margin: 2px 0 0 0; display:inline; background: transparent;} ul#menu li a { float: left; font: bold 120% Varela, sans-serif; text-align: center; color: #FFF; text-decoration: none; text-shadow: 2px 2px #000; margin: 0 0 0 5px; padding: 9px 9px 9px 15px; background-image: transparent url(images/transparent_light.png) repeat; border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; -webkit-border: 7px 7px 7px 7px; -webkit-box-shadow: rgba(0, 0, 0, 0.75) 4px 4px 4px; -moz-box-shadow: rgba(0, 0, 0, 0.75) 4px 4px 4px; box-shadow: rgba(0, 0, 0, 0.75) 4px 4px 4px; } ul#menu li.current a, ul#menu li:hover a { color: #FFF; /*background: #663300; background: -moz-linear-gradient(#7D5B49, #663300); background: -o-linear-gradient(#7D5B49, #663300); background: -webkit-linear-gradient(#7D5B49, #663300); border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; -webkit-border: 7px 7px 7px 7px; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; */} #slogan_container { height: 80px; float: center; /*margin: 0, 0, 0, 0;*/ /*background: #663300; background: -moz-linear-gradient(#330099, #663300); background: -o-linear-gradient(#330099, #663300); background: -webkit-linear-gradient(#330099, #663300);*/} #slogan { width: 960px;} #slogan h2 { font: normal 200% Varela, sans-serif; letter-spacing: -1px; padding-left: 0; text-align: center; color: #FFF; text-shadow: 1px 1px #000;} #site_content { width: 940px; overflow: hidden; margin: 0 auto; padding: 0 0 20px 20px; background: transparent url(images/transparent_soft.png) repeat; border-radius: 20px; /*border-style: double;*/ border-width: 10px; } .sidebar_container { float: right; margin: 20px 20px 0 20px; width: 220px; padding-left: 15px; border-radius: 10px; background: #336600;} .sidebar_item ul li {margin:0 10px 0 -50px;} .sidebar { float: left; width: 220px; padding: 0; margin-top: 10px; margin-bottom: 10px;} .sidebar_item { font: normal 100% Varela, sans-serif; width: 215px;} .sidebar_addresss { font: normal 100% Varela, sans-serif; width: 215px; align-self:center} .sidebar_address p { padding: 0; line-height: .9em; font-size: 100% } .sidebar h2 { font: normal 140% Varela, sans-serif; color: #FFF; text-shadow: 0px 1px 0px #000;} .sidebar h3 { color: #FFF; text-shadow: 0px 1px 0px #000;} .sidebar p { color: #FFF;} #content { width: 665px; margin-bottom: 20px; float: left;} #contentscreen { width: 960px;} .content_item { width: 665px; margin-top: 20px; margin-bottom: 20px; } #icon_wrapper { width: 665px; margin-top: 20px; margin-bottom: 20px; align-content:center; } .content_container { width: 310px; padding: 0px; margin-right: 5px; float: left; } #icon_container { width: 310px; padding: 3px; margin: 5px; float:left; /*border: 2px solid #336600;*/ text-align: center; } #icon_container .fa { font-size: 30pt;} #icon_container .button_small .fa { font-size: 10pt;} .content_images_text { float: left; width: 665px; /*margin-bottom: 10px;*/ } .content_container ul li {margin:0 10px 0 -50px;} .content_image { margin-right: 20px; float: center;} .content_image_index { margin-right: 10px;} .image_text { width: 490px; float: right;} .image_text_index { width: 320px; margin-left: 320px; } #footer { width: 960px; height: 40px; padding-top: 20px; text-align: center; /*background: transparent;*/ color: #FFF;} #footer a, #footer a:hover { text-decoration: none; padding-bottom: 20px; color: #FFF;} #footer a:hover { text-decoration: underline;} .button_transparent { font: bold 120% Varela, sans-serif; text-align: center; color: #FFF; text-decoration: none; text-shadow: 2px 2px #000; margin: 5px 5px 5px 5px; padding: 15px 15px 15px 15px; background-image: transparent url(images/transparent_light.png) repeat; border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; -webkit-border: 7px 7px 7px 7px; -webkit-box-shadow: rgba(0, 0, 0, 0.75) 4px 4px 4px; -moz-box-shadow: rgba(0, 0, 0, 0.75) 4px 4px 4px; box-shadow: rgba(0, 0, 0, 0.75) 4px 4px 4px; } .button_small { font: normal 110% Varela, sans-serif; height: 20px; width:125px; text-align:center; padding: 5px 5px 10px 7px; background: #663300; background: -moz-linear-gradient(#FFFFFF, #663300); background: -o-linear-gradient(#FFFFFF, #663300); background: -webkit-linear-gradient(#FFFFFF, #663300); border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; -webkit-border: 7px 7px 7px 7px; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} .button_small a { color: #663300; } .form_settings { margin: 15px 0 0 0;} .form_settings p { padding: 0 0 4px 0;} .form_settings span { float: left; width: 280px; text-align: left;} .form_settings input, .form_settings textarea { padding: 2px; width: 299px; font: 100% Varela, sans-serif; border: 1px solid #BBB; background: #FFF; color: #47433F;} .form_settings_button input { font: 100% Varela, sans-serif; background: #FFF; border:0px;} .form_settings input[type="checkbox"] { padding: 2px 0; width: 15px; font: 100% arial; border: 0; background: #FFF; color: #47433F; margin: 28px 0;} .form_settings input[type="radio"] { padding: 5px 0; width: 15px; font: 100% Varela, sans-serif; border: 0; background: #FFF; color: #47433F; margin: 10px 0;} .form_radio span { float: left; width: 560px; text-align: left;} .form_radio li { list-style-type:none;} .form_settings_button input { font: bold 100% Varela, sans-serif; width: 99px; margin: 0 0 0 360px; height: auto; text-shadow: 2px 2px #000; padding: 10px 15px 10px 15px; cursor: pointer; background: #663300; /*background: -moz-linear-gradient(#99ffdd, #336600); background: -o-linear-gradient(#99ffdd, #336600); background: -webkit-linear-gradient(#99ffdd, #336600);*/ background: -moz-linear-gradient(#99ffdd, #99ffff); background: -o-linear-gradient(#99ffdd, #99ffff); background: -webkit-linear-gradient(#99ffdd, #99ffff); border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; -webkit-border: 7px 7px 7px 7px; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; color: #FFF;} /****************************************************************************/ /* Navigation Menu id=navigation */ /****************************************************************************/ /*****************************************************************************/ /* Base id=base */ /*****************************************************************************/ /* List style 1 */ ul.style1 { margin: 0px; padding: 0px; list-style: none; } ul.style1 li { padding: 10px 0px 15px 0px; border-top: 1px solid #E6E7DC; } ul.style1 .first { padding-top: 0px; border-top: none; } /* List style 2 */ ul.style2 { margin: 0px; padding: 0px; list-style: none; } ul.style2 li { padding: 25px 0px 15px 0px; border-top: 1px solid #E6E7DC; } ul.style2 .first { padding-top: 0px; border-top: none; } ul.style2 h3 { padding: 0px 0px 10px 0px; font-size: 1.10em; } ul.style2 h3 a { color: #101010; } ul.style2 a { text-decoration: none; } ul.style2 a:hover { text-decoration: underline; } /* List style 3 */ ul.style3 { margin: 0px; padding: 0px; list-style: none; } ul.style3 li { padding: 20px 0px 20px 0px; border-top: 1px solid #E6E7DC; } ul.style3 p { margin: 0px; padding: 0px; } ul.style3 img { float: left; margin-top: 3px; margin-right: 20px; } ul.style3 .posted { padding: 10px 0px 10px 0px; font-size: 8pt; color: #A2A2A2; } ul.style3 .first { padding-top: 0px; border-top: none; } .link-style { display: inline-block; margin-top: 20px; padding: 7px 20px; background: #336600; border-radius: 5px; text-decoration: none; text-transform: uppercase; color: #FFFFFF; } /*********************************************************************************/ /* Buttons class=button */ /*********************************************************************************/ .button { display: inline-block; align-self:center; padding: 10px; background: #FF3366; background: -moz-linear-gradient(#99ffdd, #336600); background: -o-linear-gradient(#99ffdd, #336600); background: -webkit-linear-gradient(#99ffdd, #336600); border-radius: 7px 7px 7px 7px; -moz-border-radius: 7px 7px 7px 7px; -webkit-border: 7px 7px 7px 7px; -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; text-decoration: none; text-transform: none; text-shadow: 2px 2px #000; font: bold 110% Varela, sans-serif; color: rgba(255,255,255,1); align-content:center; } med { width: auto; text-align:center; align-content:center; position:relative; } big { width: 256px;} /*********************************************************************************/ /* Animation */ /*********************************************************************************/ /* The element to apply the animation to */ #animation_golfbud { width: 200px; height: 200px; margin-left: 0px; margin-top: 0px; } #animation_golfbud img { position: absolute; background-size: 100%; background-position: center; background-repeat: no-repeat; -moz-animation-name: golfbud; -moz-animation-duration: 12s; -moz-animation-iteration-count: infinite; -webkit-animation-name: golfbud; -webkit-animation-duration: 12s; -webkit-animation-iteration-count: infinite; -o-animation-name: golfbud; -o-animation-duration: 12s; -o-animation-iteration-count: infinite; animation-name: golfbud; animation-duration: 12s; animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } #animation_golfbud img:nth-of-type(1) { animation-delay: 9s; } #animation_golfbud img:nth-of-type(2) { animation-delay: 6s; } #animation_golfbud img:nth-of-type(3) { animation-delay: 3s; } #animation_golfbud img:nth-of-type(4) { animation-delay: 0s; } @-moz-keyframes golfbud { 0% {opacity: 1;} 17% {opacity: 1;} 25% {opacity: 0;} 92% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes golfbud { 0% {opacity: 1;} 17% {opacity: 1;} 25% {opacity: 0;} 92% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes golfbud { 0% {opacity: 1;} 17% {opacity: 1;} 25% {opacity: 0;} 92% {opacity: 0;} 100% {opacity: 1;} } @keyframes golfbud { 0% {opacity: 1;} 17% {opacity: 1;} 25% {opacity: 0;} 92% {opacity: 0;} 100% {opacity: 1;} } #animation_GPS { width: 300px; height: 500px; margin-left: 0px; margin-top: -20px; margin-bottom: 20px; } #animation_GPS img { position: absolute; background-size: 100%; background-position: center; background-repeat: no-repeat; -moz-animation-name: golfbudGPS; -moz-animation-duration: 12s; -moz-animation-iteration-count: infinite; -webkit-animation-name: golfbudGPS; -webkit-animation-duration: 12s; -webkit-animation-iteration-count: infinite; -o-animation-name: golfbudGPS; -o-animation-duration: 12s; -o-animation-iteration-count: infinite; animation-name: golfbudGPS; animation-duration: 12s; animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } #animation_GPS img:nth-of-type(1) { animation-delay: 6s; } #animation_GPS img:nth-of-type(2) { animation-delay: 0s; } @-webkit-keyframes golfbudGPS { 0% {opacity: 1;} 17% {opacity: 1;} 25% {opacity: 0;} 66% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes golfbudGPS { 0% {opacity: 1;} 17% {opacity: 1;} 25% {opacity: 0;} 66% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes golfbudGPS { 0% {opacity: 1;} 17% {opacity: 1;} 25% {opacity: 0;} 66% {opacity: 0;} 100% {opacity: 1;} } @keyframes golfbudGPS { 0% {opacity: 1;} 17% {opacity: 1;} 25% {opacity: 0;} 66% {opacity: 0;} 100% {opacity: 1;} }