/**
* global.css
* created:20140831 modified:20160328 
* Styles to use in CMS and the site
*/

/*generic*/
.clear {
  clear:both
}

.hidden {
  display:none
}
/*end generic*/

/*forms*/
form fieldset {
  margin-bottom:1rem
}

form legend {
  font-size:1.1rem;
  font-weight:700
}

form label,
form .label,
.label {
  font-size:.9rem;
  font-weight:700
}
/*
form label:first-child::after,
form .label::after,
.label::after {
  content:' :'
}
*/
form input[type=text],
form input[type=password], 
form textarea,
form .sizeFull {
  max-width:100%;
  width:16.667rem /*300px for 18px font-size*/
}

form input[type=checkbox]:first-child {/*
  margin-right:1rem*/
  margin-right:0.5rem
}

form input[type=submit] {
}

form .formField {
  margin:.5rem 0
}

form .formField > span,
form .labelSpan {
  display:inline-block;
}

form .formField > span:first-child,
form .labelSpan {
  vertical-align:top
}

form .formFieldInfo, 
form .error {
  font-size:.8em;
  font-weigh:400
}

form .error {
	color:#cc0000;
}

form .information {
  margin:2rem 5% 1rem
}

form .required {
  color:red;
  font-weight:700
}

form div .required {
  text-align:right
}

/*15px width of 'M' char for 18px font-size*/
form .size2 {
  width:1.944rem !important /*35px for 18px font-size*/
}

form .size3 {
  width:2.778rem !important /*50px for 18px font-size*/
}

form .size4 {
  width:3.611rem !important /*65px for 18px font-size*/
}

form .size5 {
  width:4.444rem !important /*80px for 18px font-size*/
}

form .size6 {
  width:5.278rem !important /*95px for 18px font-size*/
}

form .size10 {
  width:8.611rem !important /*155px for 18px font-size*/
}

form .size15 {
  width:12.778rem !important /*230px for 18px font-size*/
}

form .repeatableContainer > div {
  border-bottom:1px solid;
  margin-bottom:1rem;
  padding-bottom:2rem
}

form .repeatableActions {
  text-align:right
}

form .costSpan {
  text-align:right;
  white-space:nowrap
}

form .costFlex {
  display:flex;
  justify-content:space-between  
}

form .quantityInput {
  text-align:right  
}

form .costTotalSpan {
  border-top:1px solid;
}

form #discountApply {
  font-weight:700;
  text-align:right
}
/*end forms*/

/*tables*/
table {
  border-collapse:collapse
}
/*end tables*/

/*other*/
.actionIcon,
.actionIcon:visited {
  color:red;
  display:inline-block;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap
}

.actionIcon:hover,
.actionIcon:active,
.actionIcon:focus {
  color:red
}

.actionIcon span {
  display:inline-block;
  vertical-align:middle
}

.actionIcon .actionText {
  font-weight:400;
  margin-left:.5rem;
  overflow:hidden;
  text-align:left;
  transition:width .3s ease-out;
  width:0
}

.actionIcon:hover .actionText {
  width:100%
}

/* HVGA Screen and smaller */
@media screen and (max-width:480px) {
form .formField > span {
  display:block;
  width:100%
}
}


/* WVGA Screen and larger */
@media screen and (min-width:481px) {
form .formField > span:first-child,
form .labelSpan {
  margin-right:1rem;
  max-width:300px;
  text-align:right;
  width:33%
}

form .formField > span:nth-child(2) {
  width:calc(66% - 3rem)
}
}

/*end global.css*/