@media (min-device-width : 320px) and (max-device-width : 480px)
{
/* Top Menu */
#mobileHeader {
display: block;
padding: 10px;
background-color: black;
border: 0px;
height: 50px;
color: white;
}
#mobileNav
{
display: none;
font-size: 1.2em;
position: absolute;
background-color: #ffffff;
z-index: 10;
width: 100%
}
#mobileNav li { padding: 8px; border-bottom: 2px solid #dddddd;}
#mobileNav a {color: black; text-decoration: none; width: 100%; display: block;}
#menuLink {float: left; color: white; font-size:3rem; cursor:pointer;}
#mainNav {display: none;}
#smallLogin {display: none;}
/* Masterpage Controls*/
body {font-size: 1rem !important; overflow: auto; height: 100%; }
h2 {font-size: 1.5em !important;}
p {margin-top:1em !important; margin-bottom: .5em !important;}
.container_12 {overflow: auto;}
#crumbs {display: none;}
#header {display: none; }
#footer {display: none; }
#content {
width: 94%;
margin: 3%;
height: auto;
margin-bottom:75px;
}
#smallLogin {display: none;}
#header {padding-left: .5em}
/* Typical Controls*/
.buttons {width: 100%; }
.instructions {font-size: 1.1em; margin-top: .5em;}
.articleheader, .articlefooter
{
padding: 4px;
}
fieldset h3 {
font-size:1.5em !important;
}
input[type='text'].phoneNumbers {width: 7em !Important;}
/* Inputs */
input[type=checkbox], input[type=radio] {height: 1.25rem; width: 1.25rem;}
input[type=submit], input[type=button], input[type=number] {font-size: 1em;}
input[type=text], input[type=password] {width: 98% !Important; }
input[type=text], input[type=password], input[type=number], select
{
font-size: 1.2em;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 4px;
margin-right: 4px;
}
form .input {width: 100%;}
.input select {width: 98%; }
form .inputs-span li { display: block; margin-bottom: 10px; }
label, .fakeLabel {font-size: 1.2rem;}
/* Dialog */
.ui-dialog
{
left: 0 !Important;
top: 0 !Important;
height: auto !Important;
width: 100% !Important;
overflow-y: auto;
}
.ui-dialog fieldset{ width: 70% !Important; padding: 0px; }
/* Specific control styling */
/* Login */
form .login { width: 100%; }
/* My Account */
.phoneType {width: auto !Important;}
#genderSelection { padding-right: 0;}
/* Event Selection Page*/
.eventfilters { width: 85%;}
.eventfilters li {margin-bottom: .2em;}
.eventfilters label {display: inline; width: 20em;}
/* Registration Wizard */
#checkoutWizardSteps {display: none;}
#ManageRegistrationsLayoutTable {font-size:12px;}
/* Attendee Wizard */
#attendeeWizardSteps {display: none;}
/* Medical Wizard */
#medConditions li {display: inline; margin-left: 20px;}
#medConditions fieldset {padding: 0px;}
#medConditions label {margin: 0;}
.medicalconditiontext {width:100% !important; height:125px;}
.wizardbuttons {
position:fixed;
left:0px;
bottom:0px;
width:100%;
height:40px;
background-color: #464646;
z-index:2000;
}
.wizardbuttons input {
right:10px;
}
.ecWidth {width:40% !important;}
/*Cards*/
.addCard {min-width:100%;min-height:138px;}
.card-edit {text-align:center !important;}
/* Quick Enroll */
.quickEnrollLinkList a {padding-left: 8px;}
#registrationInfo {padding: 0px; width: 100%;}
label.divisionSelection {width: 100%;}
.registrationContent {padding-left: .2em; width: 100%}
.quickEnrollSelection {width: 12em;}
.quickEnrollSelection .description {display: block;}
.eventNeeded {padding-bottom: 10px; }
.qeTotalPrice::before { content:"Total Price: "; }
.qeDueNow::before { content:"Due Now: "; }
.qeTotalPriceHeader, .qeDueNowHeader {display: none;}
.regPrice {width: 95% }
input.creditCardCsv {width: 50px !Important; }
/* Payment Dialog */
#editEFTContainer fieldset {width: 100% !Important;}
#editEFTAccountDialog {height: 100% !Important;}
.eftAccountForm {width: 100%; padding: 0px; height: auto;}
.eftAccountForm label {font-size: 1rem; }
.eftAccountForm input[type=text], .eftAccountForm select { max-width: 90% !Important; }
.eftAccountForm textarea { width: 90% !Important; }
.eftDetails img::after { content:"<Br>"; }
.eftInfoMain {padding-left: 0px;}
/* ItinerarieS */
.itineraryname {display: block; margin-top: 10px;}
.top-banner-right {margin-bottom: 0px;}
.bottom-banner-right {position: relative; margin-top: 4px; bottom: 0px; float: right;}
[class*="-banner-right"] {margin-left: 0px; font-size: 1.1em; border-width: 0px;}
[class*="-banner-right"]:before,
[class*="-banner-right"]:after {
border-width: 0px;
text-indent: -0px;
position: relative;
}
.registration a.action.small { padding: 8px;}
.securityanswer {width: 100% !Important; }
/* AuthenticationWizard */
.wizard-steps {display: none !Important;}
/* Action Links */
a.action .name { font-size: 1.4em; margin-bottom: .2em; font-weight: bold; }
a.action .desc {font-size: 1.2em; }
/* Attributes */
.attributeContainer {margin-bottom:.5em;}
/*Donations*/
.donationPayments {width:auto;}
.donationAmount {width:50% !important;}
.donationFunds { width:auto !important;}
/* Containers ----------------------------------------------------------------------------------------------------*/
.container_12 { width: auto;}
/* Grid >> Global ----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
float: none;
position: relative;
margin-left: 0px;
margin-right: 0px;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha, .omega {margin-right: 0; }
/* Set Widths ----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1,
.container_12 .grid_2,
.container_12 .grid_3,
.container_12 .grid_4,
.container_12 .grid_5,
.container_12 .grid_6,
.container_12 .grid_7,
.container_12 .grid_8,
.container_12 .grid_9,
.container_12 .grid_10,
.container_12 .grid_11,
.container_12 .grid_12 {
width: auto;
}
/* Clear Prefixs ----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1,
.container_12 .prefix_2,
.container_12 .prefix_3,
.container_12 .prefix_4,
.container_12 .prefix_5,
.container_12 .prefix_6,
.container_12 .prefix_7,
.container_12 .prefix_8,
.container_12 .prefix_9,
.container_12 .prefix_10,
.container_12 .prefix_11 {
padding-left: 0px;
}
/* Clear Suffix ----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1,
.container_12 .suffix_2,
.container_12 .suffix_3,
.container_12 .suffix_4,
.container_12 .suffix_5,
.container_12 .suffix_6,
.container_12 .suffix_7,
.container_12 .suffix_8,
.container_12 .suffix_9,
.container_12 .suffix_10,
.container_12 .suffix_11 {
padding-right: 0px;
}
/* Clear Push ----------------------------------------------------------------------------------------------------*/
.container_12 .push_1,
.container_12 .push_2,
.container_12 .push_3,
.container_12 .push_4,
.container_12 .push_5,
.container_12 .push_6,
.container_12 .push_7,
.container_12 .push_8,
.container_12 .push_9,
.container_12 .push_10,
.container_12 .push_11 {
left: 0px;
}
/* Clear Pull ----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1,
.container_12 .pull_2,
.container_12 .pull_3,
.container_12 .pull_4,
.container_12 .pull_5,
.container_12 .pull_6,
.container_12 .pull_7,
.container_12 .pull_8 ,
.container_12 .pull_9 ,
.container_12 .pull_10 ,
.container_12 .pull_11 {
left: 0px;
}
/* Clear Floated ----------------------------------------------------------------------------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix { margin-bottom: 0px; }
.clearfix:after { clear: both; }
}