body { background-color: #999; background-image: url('../images/background_gradient.jpg'); background-repeat: repeat-x; color: #333; font-family: Arial, Helvetic, sans-serif; font-size: 62.5%; /* 1em = 10px */ } #content { margin: 1em auto; padding-top: 2em; } #content-inside { background-color: #fff; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; float: left; } #header { background-image: url('../images/0849_nrp_header.jpg'); background-repeat: no-repeat; background-position: center; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; height: 17.2em; } #user-info { float: left; margin: 0 auto; } label { color: #015c90; float: left; font-size: 1.4em; font-weight: bold; height: 25px; padding: 5px 3px 0 3px; position: relative; text-align: right; } input { float: left; font-size: 1.4em; height: 25px; padding: 0 5px; position: relative; } input[type=text],[type=tel] { border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } input[type=radio] { } input[type=checkbox] { } select { border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; float: left; font-size: 1.4em; height: 25px; padding: 0 5px; position: relative; } hr { border: 0; border-top: 1px solid #ccc; display: block; height: 1px; margin: 1em auto; padding: 0; width: 98%; } .title { color: #015c90; float: left; font-size: 1.4em; font-weight: bold; height: 25px; padding: 5px 3px 0 3px; position: relative; text-align: right; } .privacy { color: #de964a; float: left; font-size: 1.1em; font-weight: bold; height: 25px; padding: 5px 3px 0 3px; position: relative; text-align: center; } .subscription-box { background-image: url('../images/newsletter_gradient.png'); background-position: center; background-repeat: repeat-x; border: 1px solid #aaa; -moz-border-radius-bottomleft : 10px; -moz-border-radius-bottomright : 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; height: 75px; margin: 0 auto; overflow: hidden; position: relative; } .subscription-text { color: #015c90; float: left; font-size: 1.2em; height: 25px; padding: 5px 3px 0 3px; position: relative; text-align: center; } .subscription-label { color: #015c90; float: left; font-size: 1.4em; font-weight: bold; height: 25px; padding: 5px 3px 0 3px; position: relative; text-align: left; } .free-info-text { color: #015c90; float: left; font-size: 1.2em; font-weight: bolder; height: 25px; padding: 5px 3px 0 3px; position: relative; text-align: center; } .free-info-label { color: #015c90; float: left; font-size: 1.4em; font-weight: bold; height: 25px; padding: 5px 3px 0 3px; position: relative; text-align: left; } #host { font-size: 1.0em; text-align: center; } #logo { background-image: url('../images/0849_sv_nrp_logo.png'); background-position: center; background-repeat: no-repeat; height: 59px; } .em-1 { float: left; margin: .5em 0; position: relative; } .em-2 { float: left; margin: .5em 0; position: relative; } .em-3 { float: left; margin: .5em 0; position: relative; } .em-4 { float: left; margin: .5em 0; position: relative; } .em-5 { float: left; margin: .5em 0; position: relative; } .em-6 { float: left; margin: .5em 0; position: relative; } .em-7 { float: left; margin: .5em 0; position: relative; } .em-8 { float: left; margin: .5em 0; position: relative; } .em-9 { float: left; margin: .5em 0; position: relative; } .em-10 { float: left; margin: .5em 0; position: relative; } .label { color: #015c90; float: left; font-size: 1.4em; font-weight: bold; height: 25px; padding: 5px 3px 0 3px; position: relative; text-align: right; } .button-save { display: block; float: left; position: relative; width: 110px; } .button-clear { display: block; float: left; position: relative; width: 110px; } .button-text { display: block; color: #fff; font-size: 1.1em; font-weight: normal; margin: 8px 0; text-align: center; } .left-button { background-image: url('../images/left-button.png'); background-position: left; background-repeat: no-repeat; float: left; height: 32px; width: 5px; } .center-button { background-image: url('../images/center-button.png'); background-position: left; background-repeat: repeat-x; float: left; height: 32px; width: 100px; } .right-button { background-image: url('../images/right-button.png'); background-position: left; background-repeat: no-repeat; float: left; height: 32px; width: 5px; } /******************************************************************/ /* PC size 960 and above (devices and browsers) MAX WIDTH = 940px */ /******************************************************************/ #content { width: 94em; } #content-inside { width: 94em; } #header { width: 94em; } #user-info { width: 94em; } .em-1 { width: 9.4em; } .em-2 { width: 18.8em; } .em-3 { width: 28.2em; } .em-4 { width: 37.6em; } .em-5 { width: 47em; } .em-6 { width: 56.4em; } .em-7 { width: 65.8em; } .em-8 { width: 75.2em; } .em-9 { width: 84.6em; } .em-10 { width: 94em; } .title { width: 95px; } .label { width: 55px; } #giftcode-label { width: 95px; } #giftcode { width: 80px; } #firstname-label { width: 95px; } #firstname { width: 255px; } #middlename-label { width: 95px; } #middlename { width: 67px; } #lastname-label { width: 95px; } #lastname { width: 255px; } #address-label { width: 95px; } #address { width: 819px; } #city-label { width: 95px; } #city { width: 255px; } #state-label { width: 95px; } #state { width: 80px; } #zip-label { width: 95px; } #zip { width: 255px; } #phone-label { width: 95px; } #phone { width: 255px; } #email-label { width: 95px; } #email { width: 443px; } #dob-label { width: 95px; } #dob-yyyy { width: 70px; } #dob-mm { margin: 0 0 0 5px; width: 60px; } #dob-dd { margin: 0 0 0 5px; width: 60px; } #gender-label { width: 95px; } #gender-male-label { width: 55px; } #gender-male { width: 50px; } #gender-female-label { width: 75px; } #gender-female { width: 50px; } #kids-info { width: 95px; } #child1-dob-label { width: 95px; } #child1-dob-yyyy { width: 70px; } #child1-dob-mm { margin: 0 0 0 5px; width: 60px; } #child1-dob-dd { margin: 0 0 0 5px; width: 60px; } #child1-gender-male-label { width: 55px; } #child1-gender-male { width: 15px; } #child1-gender-female-label { width: 65px; } #child1-gender-female { width: 15px; } #child2-dob-label { width: 95px; } #child2-dob-yyyy { width: 70px; } #child2-dob-mm { margin: 0 0 0 5px; width: 60px; } #child2-dob-dd { margin: 0 0 0 5px; width: 60px; } #child2-gender-male-label { width: 55px; } #child2-gender-male { width: 15px; } #child2-gender-female-label { width: 65px; } #child2-gender-female { width: 15px; } #child3-dob-label { width: 95px; } #child3-dob-yyyy { width: 70px; } #child3-dob-mm { margin: 0 0 0 5px; width: 60px; } #child3-dob-dd { margin: 0 0 0 5px; width: 60px; } #child3-gender-male-label { width: 55px; } #child3-gender-male { width: 15px; } #child3-gender-female-label { width: 65px; } #child3-gender-female { width: 15px; } #child4-dob-label { width: 95px; } #child4-dob-yyyy { width: 70px; } #child4-dob-mm { margin: 0 0 0 5px; width: 60px; } #child4-dob-dd { margin: 0 0 0 5px; width: 60px; } #child4-gender-male-label { width: 55px; } #child4-gender-male { width: 15px; } #child4-gender-female-label { width: 65px; } #child4-gender-female { width: 15px; } .privacy { width: 940px; } .subscription-area { display: block; position: relative; width: 100%} .subscription-box { width: 98.5%; } .subscription-checkbox { margin-left: 40px; } .subscription-text { width: 98.5%; } .subscription-label { width: 160px; } .free-info-area { display: block; position: relative; width: 100%} .free-info-text { width: 940px; } .free-info-label { height: 50px; width: 176px; } .free-info-checkbox { margin-left: 30px; } #logo { margin: 30px 0; width: 940px; } .button-save { margin: 0 20px 50px 360px;} .button-clear { margin: 0 20px 50px 20px;} #host { width: 940px; } /*********************************************************************************/ /* Tablet Portrait size to standard 960 (devices and browsers) MAX WIDTH = 740px */ /*********************************************************************************/ @media only screen and (min-width: 768px) and (max-width: 959px) { #content { width: 74em; } #content-inside { width: 74em; } #header { width: 74em; } #user-info { width: 74em; } label { font-size: 1.3em; } .em-1 { width: 7.4em; } .em-2 { width: 14.8em; } .em-3 { width: 22.2em; } .em-4 { width: 29.6em; } .em-5 { width: 37em; } .em-6 { width: 44.4em; } .em-7 { width: 51.8em; } .em-8 { width: 59.2em; } .em-9 { width: 66.6em; } .em-10 { width: 74em; } .title { font-size: 1.3em; width: 75px; } .label { font-size: 1.3em; width: 55px; } #giftcode-label { margin: 0 10px; text-align: left; width: 100%; } #giftcode { margin: 0 10px; width: 83px; } #firstname-label { margin: 0 10px; text-align: left; width: 100%; } #firstname { margin: 0 10px; width: 264px;} #middlename-label { margin: 0 10px; text-align: left; width: 100%; } #middlename { margin: 0 10px; width: 70px; } #lastname-label { margin: 0 10px; text-align: left; width: 100%; } #lastname { margin: 0 10px; width: 264px;} #address-label { margin: 0 10px; text-align: left; width: 100%; } #address { margin: 0 10px; width: 708px;} #city-label { margin: 0 10px; text-align: left; width: 100%; } #city { margin: 0 10px; width: 264px;} #state-label { margin: 0 10px; text-align: left; width: 100%; } #state { margin: 0 10px; width: 83px; } #zip-label { margin: 0 10px; text-align: left; width: 100%; } #zip { margin: 0 10px; width: 264px;} #phone-label { margin: 0 10px; text-align: left; width: 100%; } #phone { margin: 0 10px; width: 264px;} #email-label { margin: 0 10px; text-align: left; width: 100%; } #email { margin: 0 10px; width: 411px;} #dob-label { margin: 0 10px; text-align: left; width: 100%; } #dob-yyyy { margin: 0 0 0 10px; width: 70px; } #dob-mm { margin: 0 0 0 5px; width: 60px; } #dob-dd { margin: 0 0 0 5px; width: 60px; } #gender-label { margin: 0 16px; text-align: left; width: 100%; } #gender-male-label { width: 48px; } #gender-male { width: 39px; } #gender-female-label { width: 75px; } #gender-female { width: 39px; } #kids-info { margin: 0 10px; text-align: left; width: 95px; } #child1-dob-label { margin: 0 10px; text-align: left; width: 100%; } #child1-dob-yyyy { margin: 0 0 0 10px; width: 70px; } #child1-dob-mm { width: 60px; } #child1-dob-dd { width: 60px; } #child1-gender-male-label { width: 45px; } #child1-gender-male { width: 15px; } #child1-gender-female-label { width: 55px; } #child1-gender-female { width: 15px; } #child2-dob-label { margin: 0 10px; text-align: left; width: 100%; } #child2-dob-yyyy { margin: 0 0 0 10px; width: 70px; } #child2-dob-mm { width: 60px; } #child2-dob-dd { width: 60px; } #child2-gender-male-label { width: 45px; } #child2-gender-male { width: 15px; } #child2-gender-female-label { width: 55px; } #child2-gender-female { width: 15px; } #child3-dob-label { margin: 0 10px; text-align: left; width: 100%; } #child3-dob-yyyy { margin: 0 0 0 10px; width: 70px; } #child3-dob-mm { width: 60px; } #child3-dob-dd { width: 60px; } #child3-gender-male-label { width: 45px; } #child3-gender-male { width: 15px; } #child3-gender-female-label { width: 55px; } #child3-gender-female { width: 15px; } #child4-dob-label { margin: 0 10px; text-align: left; width: 100%; } #child4-dob-yyyy { margin: 0 0 0 10px; width: 70px; } #child4-dob-mm { width: 60px; } #child4-dob-dd { width: 60px; } #child4-gender-male-label { width: 45px; } #child4-gender-male { width: 15px; } #child4-gender-female-label { width: 55px; } #child4-gender-female { width: 15px; } .privacy { margin: 10px 5px; width: 720px; } .subscription-area { display: block; margin: 0 20px; position: relative; width: 100%} .subscription-box { width: 98.5%; } .subscription-checkbox { margin-left: 20px; } .subscription-text { height: 35px; width: 98.5%; } .subscription-label { font-size: 1.3em; width: 140px; } .free-info-area { display: block; position: relative; width: 100%} .free-info-text { width: 740px; } .free-info-label { font-size: 1.3em; font-weight: bold; height: 50px; width: 180px; } .free-info-checkbox { margin-left: 35px; } #logo { width: 740px; } .button-save { margin: 0 20px 50px 250px;} .button-clear { margin: 0 20px 50px 20px;} #host { width: 740px; } } /*************************************************************************************/ /* Mobile Landscape Size to Tablet Portrait (devices and browsers) MAX WIDTH = 460px */ /*************************************************************************************/ @media only screen and (min-width: 480px) and (max-width: 767px) { #content { width: 46em; } #content-inside { width: 46em; } #header { background-image: url('../images/0849_nrp_header_420x79.jpg'); height: 9.5em; width: 46em; } #user-info { width: 46em; } label { font-size: 1.3em; } .em-1 { width: 4.6em; } .em-10 { width: 46em; } .title { font-size: 1.3em; width: 75px; } .label { font-size: 1.3em; width: 55px; } #giftcode-label { margin-right: 5px; text-align: right; width: 80px; } #giftcode { width: 83px; } #firstname-label { margin-right: 5px; text-align: right; width: 80px; } #firstname { width: 215px;} #middlename-label { margin-right: 5px; text-align: right; width: 80px; } #middlename { width: 83px; } #lastname-label { margin-right: 5px; text-align: right; width: 80px; } #lastname { width: 215px;} #address-label { margin-right: 5px; text-align: right; width: 80px; } #address { width: 350px;} #city-label { margin-right: 5px; text-align: right; width: 80px; } #city { width: 215px;} #state-label { margin-right: 5px; text-align: right; width: 80px; } #state { width: 93px; } #zip-label { margin-right: 5px; text-align: right; width: 80px; } #zip { width: 83px;} #phone-label { margin-right: 5px; text-align: right; width: 80px; } #phone { width: 215px;} #email-label { margin-right: 5px; text-align: right; width: 80px; } #email { width: 350px;} #dob-label { margin-right: 5px; text-align: right; width: 80px; } #dob-yyyy { width: 70px; } #dob-mm { width: 60px; } #dob-dd { width: 60px; } #gender-label { margin-right: 5px; text-align: right; width: 80px; } #gender-male-label { width: 30px; } #gender-male { width: 39px; } #gender-female-label { width: 55px; } #gender-female { width: 39px; } #kids-info { text-align: right; width: 82px;} #child1-dob-label { margin-right: 5px; text-align: right; width: 80px; } #child1-dob-yyyy { width: 70px; } #child1-dob-mm { width: 60px; } #child1-dob-dd { width: 60px; } #child1-gender-male-label { width: 45px; } #child1-gender-male { width: 15px; } #child1-gender-female-label { width: 55px; } #child1-gender-female { width: 15px; } #child2-dob-label { margin-right: 5px; text-align: right; width: 80px; } #child2-dob-yyyy { width: 70px; } #child2-dob-mm { width: 60px; } #child2-dob-dd { width: 60px; } #child2-gender-male-label { width: 45px; } #child2-gender-male { width: 15px; } #child2-gender-female-label { width: 55px; } #child2-gender-female { width: 15px; } #child3-dob-label { margin-right: 5px; text-align: right; width: 80px; } #child3-dob-yyyy { width: 70px; } #child3-dob-mm { width: 60px; } #child3-dob-dd { width: 60px; } #child3-gender-male-label { width: 45px; } #child3-gender-male { width: 15px; } #child3-gender-female-label { width: 55px; } #child3-gender-female { width: 15px; } #child4-dob-label { margin-right: 5px; text-align: right; width: 80px; } #child4-dob-yyyy { width: 70px; } #child4-dob-mm { width: 60px; } #child4-dob-dd { width: 60px; } #child4-gender-male-label { width: 45px; } #child4-gender-male { width: 15px; } #child4-gender-female-label { width: 55px; } #child4-gender-female { width: 15px; } .privacy { margin: 10px 5px; width: 445px; } .subscription-area { display: block; margin: 0 30px; position: relative; width: 100%} .subscription-box { background-image: url('../images/newsletter_gradient_1x158.png'); height: 110px; width: 98.5; } .subscription-checkbox { margin-left: 30px; } .subscription-text { height: 35px; width: 98.5%; } .subscription-label { font-size: 1.3em; width: 170px; } .free-info-area { display: block; position: relative; width: 100%} .free-info-text { width: 460px; } .free-info-label { font-size: 1.3em; font-weight: bold; height: 50px; width: 160px; } .free-info-checkbox { margin-left: 30px; } #logo { width: 460px; } .button-save { margin: 0 20px 50px 110px;} .button-clear { margin: 0 20px 50px 20px;} #host { width: 460px; } } /******************************************************************************************/ /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) MAX WIDTH = 300px */ /******************************************************************************************/ @media only screen and (max-width: 479px) { #content { width: 30em; } #content-inside { width: 30em; } #header { background-image: url('../images/0849_nrp_header_300x56.jpg'); height: 8.0em; width: 30em; } #user-info { width: 30em; } label { font-size: 1.2em; } .em-10 { width: 30em; } .title { font-size: 1.2em; width: 75px; } .label { font-size: 1.2em; width: 55px; } #giftcode-label { margin: 0 10px; text-align: left; width: 100%; } #giftcode { margin: 0 10px; width: 83px; } #firstname-label { margin: 0 10px; text-align: left; width: 100%; } #firstname { margin: 0 10px; width: 270px;} #middlename-label { margin: 0 10px; text-align: left; width: 100%; } #middlename { margin: 0 10px; width: 83px; } #lastname-label { margin: 0 10px; text-align: left; width: 100%; } #lastname { margin: 0 10px; width: 270px;} #address-label { margin: 0 10px; text-align: left; width: 100%; } #address { margin: 0 10px; width: 270px;} #city-label { margin: 0 10px; text-align: left; width: 100%; } #city { margin: 0 10px; width: 270px;} #state-label { margin: 0 10px; text-align: left; width: 100%; } #state { margin: 0 10px; width: 93px; } #zip-label { margin: 0 10px; text-align: left; width: 100%; } #zip { margin: 0 10px; width: 270px;} #phone-label { margin: 0 10px; text-align: left; width: 100%; } #phone { margin: 0 10px; width: 270px;} #email-label { margin: 0 10px; text-align: left; width: 100%; } #email { margin: 0 10px; width: 270px;} #dob-label { margin: 0 10px; text-align: left; width: 100%; } #dob-yyyy { margin: 0 0 0 10px; width: 70px; } #dob-mm { margin: 0 0 0 5px; width: 60px; } #dob-dd { margin: 0 0 0 5px; width: 60px; } #gender-label { margin: 0 10px; text-align: left; width: 100%; } #gender-male-label { width: 38px; } #gender-male { width: 39px; } #gender-female-label { width: 75px; } #gender-female { width: 39px; } .seperator-odd { background-color: #fff; height: 90px; width: 300px;} .seperator-even { background-color: #fff; height: 90px; width: 300px;} #kids-info { margin: 0 11px; text-align: left; width: 95px; } #child1-dob-label { margin: 0 12px; text-align: left; width: 100%; } #child1-dob-yyyy { margin: 0 0 0 10px; width: 70px; } #child1-dob-mm { width: 60px; } #child1-dob-dd { width: 60px; margin-right: 50px; } #child1-gender-male-label { width: 40px; } #child1-gender-male { width: 15px; } #child1-gender-female-label { width: 55px; } #child1-gender-female { width: 15px; } #child2-dob-label { margin: 0 12px; text-align: left; width: 100%; } #child2-dob-yyyy { margin: 0 0 0 10px; width: 70px; } #child2-dob-mm { width: 60px; } #child2-dob-dd { width: 60px; margin-right: 50px; } #child2-gender-male-label { width: 40px; } #child2-gender-male { width: 15px; } #child2-gender-female-label { width: 55px; } #child2-gender-female { width: 15px; } #child3-dob-label { margin: 0 12px; text-align: left; width: 100%; } #child3-dob-yyyy { margin: 0 0 0 10px; width: 70px; } #child3-dob-mm { width: 60px; } #child3-dob-dd { width: 60px; margin-right: 50px; } #child3-gender-male-label { width: 40px; } #child3-gender-male { width: 15px; } #child3-gender-female-label { width: 55px; } #child3-gender-female { width: 15px; } #child4-dob-label { margin: 0 12px; text-align: left; width: 100%; } #child4-dob-yyyy { margin: 0 0 0 10px; width: 70px; } #child4-dob-mm { width: 60px; } #child4-dob-dd { width: 60px; margin-right: 50px; } #child4-gender-male-label { width: 40px; } #child4-gender-male { width: 15px; } #child4-gender-female-label { width: 55px; } #child4-gender-female { width: 15px; } .privacy { height: 60px; width: 280px; } .subscription-area { display: block; margin: 0 7px; position: relative; width: 100%} .subscription-box { background-image: url('../images/newsletter_gradient_1x158.png'); height: 136px; width: 98.5; } .subscription-checkbox { margin-left: 7px; } .subscription-text { height: 50px; width: 98.5%; } .subscription-label { font-size: 1.3em; width: 120px; } .free-info-area { display: block; position: relative; width: 100%} .free-info-text { height: 35px; width: 290px; } .free-info-label { font-size: 1.3em; font-weight: bold; height: 40px; width: 200px; } .free-info-checkbox { width: 25px; } #logo { background-image: url('../images/0849_sv_nrp_logo_280x55.png'); width: 300px; } .button-save { margin: 0 20px 50px 20px;} .button-clear { margin: 0 20px 50px 20px;} #host { width: 300px; } }