/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
/*line-height: 1.4;*/
line-height: normal;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: none;
}
/*!*********************************
*
* Developed by Redwood Matthews
* http://redwoodmatthews.com/
* Copyright 2012 Redwood Matthews
* All rights reserved.
*
**********************************!*/
/* Global */
html {
height: 100%;
}
body {
height: 100%;
font-size: 100%;
font-family: myriad pro, sans-serif;
color: #f7f7f7;
}
#page {
min-height: 100%;
padding: 14px;
overflow: hidden;
}
ol, ul {
//overflow: hidden;
list-style-type: none;
}
input, select {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: .9em 2.475em .625em .825em;
//background: rgba(247,247,247,.85);
background: none;
border: none;
-webkit-border-radius: 0;
//-webkit-box-shadow: inset 0 -1px 1px 0 #c4c4c4;
-webkit-box-shadow: none;
color: #5e5e5e;
-webkit-transition: all .3s ease-out, color 0s linear;
-webkit-appearance: none;
}
select {
-webkit-border-radius: 0;
color: #AEAEAE;
}
input:focus, select:focus {
outline: none !important;
background: #fff !important;
-webkit-box-shadow: inset 0 0 3px 1px rgba(42, 103, 196, .65) !important;
-webkit-transition: all .15s ease-out !important;
}
input[type="radio"]:focus + label {
-webkit-box-shadow: inset 0 0 3px 1px rgba(42, 103, 196, .65) !important;
-webkit-transition: all .15s ease-out !important;
}
input.valid, select.valid {
background: #fff !important;
}
select.valid {
color: #5e5e5e !important;
}
input.invalid:focus, select.invalid:focus {
-webkit-box-shadow: inset 0 0 3px 1px rgba(181, 22, 32, .65) !important;
-webkit-transition: none !important;
}
input[type="radio"].invalid:focus + label {
-webkit-box-shadow: inset 0 0 3px 1px rgba(181, 22, 32, .65) !important;
-webkit-transition: none !important;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input::-webkit-calendar-picker-indicator{
display: none;
}
input[type="date"]::-webkit-input-placeholder{
visibility: hidden !important;
}
/* Absolute/Fixed */
#back {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background: url(../img/newYork3.jpg);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
background-size: cover;
}
#modal {
opacity: 0;
position: fixed;
padding: 14px;
top: -28px;
left: 0;
right: 0;
z-index: 1;
background: rgba(255, 255, 255, .85);
color: #5E5E5E;
-webkit-transition: all .4s ease-out;
}
#modal.alert {
opacity: 1;
top: 0;
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3);
}
span.validCheck {
opacity: 0;
display: block;
width: 8px;
height: 8px;
position: absolute;
top: 50%;
right: .825em;
z-index: 1;
margin: -4px 0 0 -4px;
-webkit-border-radius: 50%;
background: #4CC376;
-webkit-transition: opacity .15s ease-out;
}
input.valid + span.validCheck, select.valid + span.validCheck {
opacity: 1;
}
/* Header */
#page > header h1 {
margin: 14px 0 0 0;
font-size: 1.5em;
font-weight: 100;
text-align: center;
text-shadow: 0 1px 1px rgba(36,32,33,.3);
}
/* Main */
/* General */
#pageMain {
padding: 42px 0 0 0;
}
#a1Order {
}
#a1Order > fieldset {
margin:0 0 2em 0;
}
#a1Order > fieldset > legend {
font-size: 1.125em;
line-height: 2.333em;
text-shadow: 0 1px 1px rgba(36,32,33,.3);
}
/*#a1Order > fieldset > ol li {
position: relative;
}*/
.stateSelect:before, .stateSelect:after {
content: "";
position: absolute;
top: 50%;
right: 2em;
z-index: 1;
margin: -10px 0 0 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid #A9A9A9;
}
.stateSelect:after {
margin: 6px 0 0 0;
border-top: 6px solid #A9A9A9;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 0;
}
/* Function */
li.module, .hidden {
display: none;
}
/* Main Sections */
/* Your Details */
.details input, .details select {
background: rgba(247,247,247,.85);
-webkit-box-shadow: inset 0 -1px 0 0 #c4c4c4;
}
.details label {
display: none;
}
.details > ol {
-webkit-box-shadow: 0 1px 1px 0 rgba(36,32,33,.3);
}
.details > ol li {
position: relative;
}
.details > ol li:first-child input {
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
}
.details > ol li:last-child input {
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-webkit-box-shadow: none;
}
/* Services */
/* Global */
.services > ol > li {
margin:0 0 28px 0;
overflow: hidden;
background: rgba(247,247,247,.85);
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 1px 0 rgba(36,32,33,.3);
color: #5e5e5e;
}
.services > ol legend {
width: 100%;
position: relative;
padding: .9em 0 .625em 0;
background: #fff;
-webkit-box-shadow: inset 0 -1px 0 0 #c4c4c4;
text-align: center;
color: #5987cb;
}
.services > ol label {
display: block;
width: 100%;
/*height: 100%;*/
padding: .9em 0 .625em 0;
-webkit-box-shadow: inset -1px 0 0 0 #c4c4c4, inset 0 -1px 0 0 #c4c4c4;
cursor: pointer;
text-align: center;
}
.services li.delivery.module > ol > li:first-child > fieldset > ol > li:first-child legend,
.services li.subSum.module > ol > li:first-child legend {
-webkit-box-shadow: inset 0 1px 0 0 #c4c4c4, inset 0 -1px 0 0 #c4c4c4;
}
.services input, .services select {
height: auto;
//background: rgba(247,247,247,.85);
-webkit-box-shadow: inset 0 -1px 0 0 #c4c4c4;
}
.services input:checked + label {
background: #fff;
}
.services h2 {
display: none;
}
.services fieldset.module > ol {
position: relative;
}
.services .newAddressModule li, .services .subSumLocation li {
position: relative;
}
.services .newAddressModule label, .services .subSumLocation label {
display: none;
}
.services input[type=radio]{
height: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.services li {
position: relative;
overflow: hidden;
}
/* Type */
.services > ol .type legend {
display: none;
}
.services > ol .type li {
width: 33.33%;
float: left;
}
.services .type > ol > li label {
-webkit-box-shadow: inset -1px 0 0 0 #c4c4c4;
}
.services .type > ol > li:last-child label {
-webkit-box-shadow: none;
}
/*.services > ol .type li input {
display: none;
}*/
fieldset.type:focus {
background: red;
}
/* Delivery */
.delivery.module > ol > li > fieldset > legend {
display: none;
}
/* Pick Up */
/* Location */
.deliveryPickUpLocation > li:first-child {
width: 50%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
text-align: center;
}
.deliveryPickUpLocation > li > ol > li:first-child {
width: 50%;
margin: 0 0 0 50%;
}
.deliveryPickUpLocation > li > ol > li:first-child label {
-webkit-box-shadow: inset 0 -1px 0 0 #c4c4c4;
}
/* Time */
.deliveryPickUpTime .dateTime li {
position: relative;
}
.deliveryPickUpTime .dateTime label {
display: none;
}
.deliveryPickUpTime > li:first-child {
width: 50%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.deliveryPickUpTime > li > ol > li:first-child {
width: 50%;
margin: 0 0 0 50%;
}
.deliveryPickUpTime > li > ol > li:first-child label {
-webkit-box-shadow: inset 0 -1px 0 0 #c4c4c4;
}
/* Package Details */
.deliveryPickUpDetails > li:nth-child(1), .deliveryPickUpDetails > li:nth-child(2){
width: 50%;
float: left;
}
.deliveryPickUpDetails > li:nth-child(2) label {
-webkit-box-shadow: inset 0 -1px 0 0 #c4c4c4;
}
.deliveryPickUpDetails > li:last-child {
width: 100%;
float: left;
}
.deliveryPickUpDetails .packageDetails label {
display: none;
}
.deliveryPickUpDetails .packageDetails li {
position: relative;
}
.deliveryPickUpDetails .packageDetails li:last-child:after {
content: "lbs";
position: absolute;
top: .9em;
right: 50px;
z-index: 1;
}
/* Reference */
.deliveryPickUpReference li {
position: relative;
}
.deliveryPickUpReference li label {
display: none;
}
/* Deliver */
/* Location */
.deliveryDeliverLocation > li:first-child {
width: 50%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
text-align: center;
}
.deliveryDeliverLocation > li > ol > li:first-child {
width: 50%;
margin: 0 0 0 50%;
}
.deliveryDeliverLocation > li > ol > li:first-child label {
-webkit-box-shadow: inset 0 -1px 0 0 #c4c4c4;
}
/* Time */
ol.delivery ol.dateTime li {
position: relative;
}
ol.deliver ol.dateTime li label {
display: none;
}
/* Additional */
.deliveryDeliverAdditional {
position: relative;
}
.deliveryDeliverAdditional li {
position: relative;
}
.deliveryDeliverAdditional li label {
display: none;
}
.deliveryDeliverAdditional li input {
-webkit-box-shadow: none;
}
/* SubSum */
/* Reference */
.subSumRef li {
position: relative;
}
.subSumRef li label {
display: none;
}
/* Time */
.subSumTime > li:first-child > ol > li:first-child {
width: 50%;
margin: 0 50% 0 0;
}
.subSumTime > li:first-child > ol > li:last-child label {
-webkit-box-shadow: none;
}
.subSumTime > li:last-child {
width: 50%;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.subSumTime > li:last-child label {
-webkit-box-shadow: inset 0 -1px 0 0 #c4c4c4;
}
/* Manner */
.subSumManner > li label {
-webkit-box-sizing: border-box;
padding-left: .825em;
padding-right: .825em;
text-align: left;
}
/* Additional */
.subSumAdditional li label {
display: none;
}
/* Upload */
.subSumUpload li label {
-webkit-box-shadow: none;
}
/* Submit */
/* Footer */
/* Media Queries */
/* Bigger */
@media only screen and (min-width: 480px) {
/* Style adjustments for viewports that meet the condition */
}
/* HiDPI */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/* Style adjustments for high resolution devices */
}
/* Fallback */