/************************************************ * 0. Some resets ************************************************/ article, aside, footer, header, nav, section { display: block; } body, html { margin: 0; padding: 0; } img { border: 0; } .clear { clear: both; height: 0; overflow: hidden; } /************************************************ * 1. Definitions and variables ************************************************/ .black { color: #000000; } .blue { color: #00a0e3; } #nud_2013 { font-family: Arial, sans-serif; color: #000000; line-height: 1.3; position: relative; padding-top: 50px; background: #fff; font-size: 16px; line-height: 1.35; } /************************************************ * 2. Header ************************************************/ #nud_2013_header { position: fixed; top: 0; left: 0; z-index: 100; height: 50px; width: 100%; background: #231f20; } #nud_2013_header .row { width: 812px; margin: 0 auto; position: relative; height: 100%; } #nud_2013_header nav { position: absolute; right: 0px; bottom: 8px; } #nud_2013_header nav ul { list-style: none; padding: 0; margin: 0; text-indent: 0; } #nud_2013_header nav ul li { float: left; margin-right: 22px; } #nud_2013_header nav ul li a { display: block; height: 18px; overflow: hidden; } #nud_2013_header nav ul li.current a img { margin-top: -18px; } /************************************************ * 3. Content ************************************************/ #nud_2013_main section { position: relative; padding-bottom: 10px; } #nud_2013_main .row { width: 812px; margin: 0 auto; vertical-align: top; padding: 0 0 60px; } #nud_2013_main .body { width: 760px; margin-left: 52px; } #nud_2013_main h2 { position: relative; margin: 0 0 25px; } #nud_2013_main h3 { font-weight: normal; margin: 0 0 1em; font-size: 19px; line-height: 1.3em; } #nud_2013_main h4 { font-weight: normal; margin: 0 0 1em; line-height: 1.3em; } #nud_2013_main p { margin: 0 0 1em; } #nud_2013_main #home { background: #231f20 url(../images/header-image-bg.jpg?v2) top center no-repeat; margin-bottom: 10px; padding: 0; } #nud_2013_main #home img { vertical-align: top; } #nud_2013_main #home .row { padding: 0; } #nud_2013_main #event-details { background: #1f9ed9; } #nud_2013_main #event-details .record_1 { padding: 0 0 10px 45px; } #nud_2013_main #event-details .record_2 { float: left; width: 330px; padding: 20px 50px 0 40px; border-right: 3px solid #5dacdf; } #nud_2013_main #event-details .record_2 p { color: #fff; font-weight: bold; } #nud_2013_main #event-details .record_2 .rvsp a { color: #fff; text-decoration: none; font-size: 18px; font-weight: bold; } #nud_2013_main #event-details .record_2 .rvsp a span { font-size: 26px; } #nud_2013_main #event-details .record_2 img { margin: 20px 0 10px -25px; } #nud_2013_main #event-details .record_3 { float: left; width: 270px; padding: 20px 0 0 40px; border-left: 3px solid #5dacdf; margin-left: -3px; } #nud_2013_main #event-details .record_3 iframe { border: 0; } #nud_2013_main #event-details .record_3 .map { padding: 3px; background: #fff; color: #000000; width: 267px; font-size: 12px; line-height: 1.1; } #nud_2013_main #event-details .record_3 .map a { color: #00a0e3; text-decoration: none; } #nud_2013_main #event-details .record_4 { border: 2px solid #88bce6; background: #68b0e1; padding: 10px; margin-top: 40px; overflow: hidden; } #nud_2013_main #event-details .record_4 .rules { float: left; width: 340px; border-right: 1px solid #88bce6; padding: 0 20px; } #nud_2013_main #event-details .record_4 .etiquette { float: left; width: 320px; border-left: 1px solid #88bce6; padding: 0 10px 0 20px; margin-left: -1px; } #nud_2013_main #event-details .record_4 h3 { font-size: 18px; padding-top: 10px; } #nud_2013_main #event-details .record_4 p { font-size: 13px; line-height: 1.5; } #nud_2013_main #event-details .record_4 ol { padding: 0 0 0 1em; margin: 0; } #nud_2013_main #event-details .record_4 li { font-size: 13px; margin: 0 0 .8em; line-height: 1.5; } #nud_2013_main #get-involved { background: #c4dcf3; } #nud_2013_main #get-involved h3 { font-weight: bold; } #nud_2013_main #get-involved h3 span { color: #00a0e3; } #nud_2013_main #get-involved .number_1 { background: #fff; margin-bottom: 30px; } #nud_2013_main #get-involved .number_1_1 { text-align: center; margin-bottom: 30px; padding: 15px 0 0; } #nud_2013_main #get-involved .number_1_1 p { font-size: 23px; margin: 10px 0; } #nud_2013_main #get-involved .number_1_1 p span { color: #00a0e3; } #nud_2013_main #get-involved .number_1_2 { overflow: hidden; } #nud_2013_main #get-involved .number_1_2 img { float: left; margin-left: 40px; } #nud_2013_main #get-involved .number_1_2 .desc { float: left; width: 340px; padding: 0 0 0 30px; } #nud_2013_main #get-involved .number_1_2 p { font-size: 14px; } #nud_2013_main #get-involved .number_1_2 p.intro { font-size: 16px; color: #00a0e3; } #nud_2013_main #get-involved .number_1_2 a { color: #00a0e3; text-decoration: underline; } #nud_2013_main #get-involved .number_1_2 #official-rules { font-size: 12px; color: #00a0e3; text-decoration: none; font-weight: bold; text-transform: uppercase; } #nud_2013_main #get-involved .number_1_2 #official-rules span { font-size: 18px; } #nud_2013_main #get-involved .numbers { overflow: hidden; } #nud_2013_main #get-involved .numbers p { background: #fff; float: left; text-align: center; width: 190px; margin-left: 35px; padding: 10px 20px 20px; font-size: 14px; } #nud_2013_main #get-involved .numbers p:first-child { margin: 0; } #nud_2013_main #get-involved .numbers p a { color: #00a0e3; text-decoration: underline; } #nud_2013_main #get-involved .numbers p img { margin-bottom: 10px; } #nud_2013_main #about .txt_with_pic { overflow: hidden; } #nud_2013_main #about .txt_with_pic img { float: right; } #nud_2013_main #about .txt_with_pic h3 { color: #00a0e3; } #nud_2013_main #about .txt_with_pic h4 { font-size: 14px; font-weight: bold; margin: 0 0 .5em; } #nud_2013_main #about .txt_with_pic p { line-height: 1.35; } #nud_2013_main #about .txt_with_pic:first-child { border-bottom: 1px solid #bab8b9; margin-bottom: 15px; padding-bottom: 25px; } #nud_2013_main #about .left { width: 480px; float: left; } #nud_2013_main #about .social { overflow: hidden; } #nud_2013_main #about .social img { float: left; margin-right: 10px; } #nud_2013_main #sponsors { background: #1d96d2; color: #fff; padding-bottom: 20px; } #nud_2013_main #sponsors .row { padding: 0 0 10px; } #nud_2013_main #sponsors .row p { color: #fff; font-size: 19px; padding: 15px 0 10px; } #nud_2013_main #sponsors #sponsors_map { text-align: center; } #nud_2013_main #sponsors #sponsors_map img { margin: 5px 0; } #nud_2013_main #contact p { font-size: 18px; margin-left: 52px; } #nud_2013_main #contact a { color: #00a0e3; text-decoration: underline; } #nud_2013_main #contact p.copy { font-size: 14px; padding: 0 0 20px; text-align: center; } /************************************************ * 4. Popup ************************************************/ #popup { display: none; } #popup .popup-container { background: url(../images/popup-bg.png) top left repeat; position: absolute; top: 0; left: 0; z-index: 99999; height: 100%; width: 100%; } #popup .popup-container .popup-content { position: relative; width: 812px; padding: 30px; background: #fff; border: 2px solid #00a0e3; margin: 90px auto; } #popup .popup-container .popup-content p { font-size: 16px; line-height: 1.2; font-family: Arial, sans-serif; } #popup .close { position: absolute; right: 0px; top: 0px; } /* TABLET (768, 800) */ @media (max-width: 812px) { #nud_2013 img { width: auto; height: auto; } #nud_2013 .row { width: 100%; } #nud_2013 #contact p { padding: 0 15px; } #nud_2013 #home img { width: 100%; height: auto; } #nud_2013 .body { width: auto; margin: 0 10px; } #nud_2013 .rules { width: 330px!important; } #nud_2013 .etiquette { width: 310px!important; } #nud_2013 .numbers p { margin-left: 25px!important; } #nud_2013 .numbers p:first-child { margin-left: 0!important; } } /* PHONE (480, 640) */ @media (max-width: 640px) { #nud_2013 .record_1 { padding-left: 0px!important; } #nud_2013 .record_1 img { width: 100%!important; } #nud_2013 .record_2 { padding-right: 20px!important; padding-left: 25px!important; width: 270px!important; } #nud_2013 .record_3 { padding-left: 20px!important; } #nud_2013 .number_1_1 .pic { width: 100%!important; } #nud_2013 .rules { width: 270px!important; } #nud_2013 .etiquette { width: 250px!important; } #nud_2013 .numbers p { margin-left: 10px!important; } #nud_2013 .numbers p:first-child { margin-left: 0!important; } #nud_2013 .numbers p { padding: 10px!important; width: 180px!important; } } /* PHONE SMALL (480) */ @media (max-width: 480px) { #nud_2013 .record_2 { width: auto!important; float: none!important; border: 0!important; } #nud_2013 .record_3 { width: auto!important; float: none!important; border: 0!important; margin-left: 0px!important; } #nud_2013 .rules { float: none!important; width: auto!important; border: 0 !important; } #nud_2013 .etiquette { float: none!important; width: auto!important; border: 0!important; margin-left: 0px!important; } #nud_2013 .numbers p { margin-left: 0!important; margin-right: 10px!important; margin-bottom: 10px!important; } #nud_2013 .number_1_2 img { display: none; } #nud_2013 .number_1_2 .desc { width: auto!important; float: none!important; padding: 0 10px!important; } #about img { display: none; } #nud_2013 #nud_2013_header { height: 70px; } #nud_2013 #main-nav li { margin-right: 5px; } #nud_2013 #sponsors_map { margin: 0 10px; } #nud_2013 #sponsors p { margin-left: 10px; margin-right: 10px; } } /* PHONE SMALL (320) */ @media (max-width: 320px) { #nud_2013 .numbers p { margin-left: 0!important; margin-right: 0!important; width: auto!important; float: none!important; } #nud_2013 #about .left { width: auto!important; float: none!important; } #nud_2013 .record_2 { float: none!important; width: auto!important; } #nud_2013 .record_3 { float: none!important; width: auto!important; padding-left: 10px!important; } #nud_2013 #main-nav li { margin-right: 3px; } }