/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* --- debug --- */
#browser-type {
	bottom: 0;
	margin: 10px;
	padding: 10px;
	position: fixed;
	right: 0;
}


body {
	background-color: #fefcfc;
	color: #A6A6A6;
	font-family: "proxima-nova",Arial,sans-serif;
	font-size: 18px;
	line-height: 32px;
	background-image: url("../img/s3/body-bg.png");
	background-size: 24px auto;
}
input:focus { outline: none; }
p {
  padding: 0 10%;
}

p:first-child {
	padding-top: 2%;
}

p:last-child {
	padding-bottom: 5%;
}

a:focus {
	outline: 0 !important;
	text-decoration: none !important;
}

a {
	color: #86B12F;	
	-webkit-transition: color .4s linear;
	-moz-transition: color .4s linear;
	-o-transition: color .4s linear;
	transition: color .4s linear;
}

a:hover {
	color: #6C9715;
	-webkit-transition: color .4s linear;
	-moz-transition: color .4s linear;
	-o-transition: color .4s linear;
	transition: color .4s linear;
	text-decoration:none;
}

.error {
  color: #B0373A !important;
}



#qty-control {
  background-image: url("../img/s3/drop-down-tag.png");
  background-position: center top;
  background-repeat: no-repeat;
  max-width: 120px;
  padding-top: 6px;
  position: absolute;
  z-index: 99999;
}

#qty-control button {
  background-image: none;
  border: medium none;
  padding: 8px 0;
}

#qty-control button.less, #qty-control button.more {
  color: white;
  font-size: 26px;
}

#qty-control > div + div {
  background-color: white;
}

#qty-control button.less {
  background-color: #B0373A;
}

#qty-control button.more {
  background-color: #8CB948;
}

#qty-control button.done {
	text-transform: uppercase;
}


#qty-control input {
  border: medium none;
  color: #8CB948;
  font-size: 24px;
  padding: 7px;
  text-align: center;
}



.tooltip.top .tooltip-arrow {
	border-top-color: #B0373A;
}

.tooltip-inner {
	background-color: #B0373A;
	color: white;
	font-size: 12px;
}

.alert-danger, .alert-error {
  background-color: #F2DEDE;
  border-color: #EED3D7;
  color: #B94A48;
  margin: 0 auto -25px;
  max-width: 660px;
  padding: 10px 0;
  display: none;
  text-transform: uppercase;
}

/* ---------------------------------------- */
/* ------------- header & nav-------------- */
/* ---------------------------------------- */

body > header {
    margin-bottom: 0;
    position: relative;
	z-index: 1;

}

body > header p {
	color: #fff;
}

#header-prime {
  background-color: #555555;
  background-image: url("../img/s3/top-header-bg.png");
  background-size: 60px auto;
  position: relative;
}

#header-prime .masthead {
  background-image: url("../img/s3/top-header-bg-glow.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 46px;
}

#header-prime .masthead h1 {
	float: none;
	margin: 0 auto;
	width: 100%;
	position: absolute;
}

#header-prime .masthead h1 a {
	color: #52614A;
	font-size: 1em;
	border: 1px solid;
	display: block;
	margin: 0 auto;
	float: none;
}

#header-prime .masthead h1 a:hover, #header-prime .masthead h1 a:focus {
	color: #D4E3CC;
}

#header-prime .masthead > h2 {
  font-size: x-small;
  font-weight: normal;
  letter-spacing: 3px;
  margin: 0;
  padding-left: 14px;
  text-transform: uppercase;
  color: #eafad6;
}

#header-prime .masthead .dropdown {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  font-size: x-small;
  letter-spacing: 3px;
  padding: 3px 0 5px;
  text-align: center;
  text-transform: uppercase;
}

#header-prime .masthead .dropdown > a{
	color: #C9F15A;
}

#header-prime .masthead .dropdown .caret {
  border-bottom-color: #C9F15A;
  border-top-color: #C9F15A;
  margin-top: 14px;
}

#header-prime .masthead .dropdown li {
	text-align: left;
}

#header-prime .masthead > h2#shoebox-title span.arrow + span {
  background-image: url("../img/s3/green-arrow.png");
  background-position: 1px center;
  background-repeat: no-repeat;
  background-size: 4px auto;
  color: #EAFAD6;
  margin-left: 4px;
  padding-left: 20px;
}

#header-prime .masthead > h2#shoebox-title span.arrow {
	display: none;
}

#header-prime .masthead > h2#sp-title {
  color: #ADAEA9;
  padding-right: 14px;
}

#header-prime .dropdown-menu .divider {
  margin: 0;
}

#header-prime .dropdown-menu {
  left: auto;
  position: absolute;
  right: 0;
  background-position: 160px 0;
}


#header-sub {
  background-color: #84B744;
  background-image: url("../img/header-bg.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 422px;
}

#header-sub .masthead h1 a {
  color: white;
  display: block;
  margin: 25px auto 0;
  padding-bottom: 62px;
  text-indent: -99999px;
}

#header-sub #directive {
  margin: 0 auto;
  max-width: 440px;
  padding: 86px 0 6px;
  opacity: 0;
}

#directive a#action-giftfriends, #directive a#action-challenge {
  border: 2px solid #A9D27E;
  border-radius: 10px 10px 10px 10px;
  color: #EFFFEC;
  font-size: 12px;
  margin-bottom: 4px;
  margin-top: 26px;
  padding: 7px 0;
  text-transform: uppercase;
letter-spacing: 2px;
}

#directive a#action-giftfriends:focus, #directive a#action-challenge:focus {
	outline: 0;
}

body.giftfriends #directive a#action-giftfriends, body.challenge #directive a#action-challenge {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #6F9D37;
  color: white;
}

#header-sub #directive a#action-build {
	background-color: #96C355;
	background-image: none;
	border: none;
	border-radius: 12px 12px 12px 12px;
	box-shadow: 5px 5px 0 #7DAB45, 0.5px 0.5px 0 #CCE3A6 inset;
	color: #F2F9D5;
	display: block;
	font-size: 28px;
	letter-spacing: 4px;
	margin-bottom: 0;
	margin-top: 0;
	overflow: hidden;
	text-shadow: -0.5px -0.5px 0 #81A54B;
	text-transform: uppercase;
	width: 100%;
	text-decoration: none;
	
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #A6CE64 0%, #86B747 100%);
	
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #A6CE64 0%, #86B747 100%);
	
	/* Opera */ 
	background-image: -o-linear-gradient(top, #A6CE64 0%, #86B747 100%);
	
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A6CE64), color-stop(1, #86B747));
	
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #A6CE64 0%, #86B747 100%);
	
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, #A6CE64 0%, #86B747 100%);
}

#header-sub #directive a#action-build:hover {

	box-shadow: 5px 5px 0 #7DAB45, 0.5px 0.5px 0 #B9D093 inset;

	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #86B747 0%, #A6CE64 100%);
	
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #86B747 0%, #A6CE64 100%);
	
	/* Opera */ 
	background-image: -o-linear-gradient(top, #86B747 0%, #A6CE64 100%);
	
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #86B747), color-stop(1, #A6CE64));
	
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #86B747 0%, #A6CE64 100%);
	
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, #86B747 0%, #A6CE64 100%);
}

#header-sub #directive a#action-build:focus {
	outline: 0;
}

body.shoebox #header-sub #directive a#action-build {
  box-shadow: 0 0 26px #699628, 5px 5px 0 #8AB852, 0.5px 0.5px 0 #CCE3A6 inset;
}

#action-build > span {
  background-image: url("../img/s3/shine-overlay.png");
  background-position: 600px center;
  background-repeat: no-repeat;
  display: block;
  padding: 22px 0;
}

div#directive > button {
  background-image: none;
  border: medium none;
  border-radius: 7px 7px 7px 7px;
  padding: 10px;
  text-transform: uppercase;
}

ul.dropdown-menu {
  background-color: transparent;
  background-image: url("../img/s3/drop-down-tag.png");
  background-position: center top;
  background-repeat: no-repeat;
  border: medium none;
  border-radius: 0 0 0 0;
  box-shadow: none;
  padding-top: 8px;
  text-align: left;
  z-index: 99999;
}

ul.dropdown-menu > li > a {
	color: #8BB84A;
	background-color: white;
	padding: 14px;
}


ul.dropdown-menu > li > a:focus {
	color: #8BB84A;
	background-color: white;
	background-image: none;
}

/*
ul.dropdown-menu > li > a:hover {
	background-color: #b4d352;
	background-image: none;
	color: white;
}
*/

ul.dropdown-menu > li > a:hover {
  background-color: #A4D85A;
  background-image: none;
  color: #fff;
}

/*
#directive-action button {
  background-color: transparent;
  background-image: url("../img/s3/green-arrow-icon.png");
  background-size: 118px auto;
  border: medium none;
  height: 119px;
  margin-bottom: -36px;
  text-indent: -99999px;
  width: 119px;
  display: none !important;
}


#directive-action button {
	display: none;
}
*/
body.main #directive-action button {
	display: none;
}
#directive-action button.cart {
  	background-color: transparent;
	border: medium none;
	color: #C4E48D;
	display: inline;
	font-size: 15px;
	margin-top: 19px;
	width: 314px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

#directive-action button.cart span {
  color: #ECECEC;
}

#directive-action button.btn-box {
	  background-image: url("../img/s3/green-box-icon.png");
	  background-size: 125px auto;
}

#directive-action button.btn-fullbox {
	  background-image: url("../img/s3/green-arrow-icon.png");
	  background-size: 118px auto;
}

#directive-action {
  	background-image: url("../img/s3/dashed-line.png");
	background-position: center 10px;
	background-repeat: repeat-x;
	background-size: 28px auto;
	height: 53px;
	background-color: #86AF48;
}

ul#action-gender li a {
  padding-left: 54px;
}

ul#action-gender li.girl a {
  background-image: url("../img/s3/girl-icon-green.png");
  background-position: 2px center;
  background-repeat: no-repeat;
}

ul#action-gender li.boy a {
  background-image: url("../img/s3/boy-icon-green.png");
  background-position: 4px center;
  background-repeat: no-repeat;
}

/* --- content --- */

body > #content {
	position: relative;
	overflow: hidden;
}

#content > section {
	overflow: hidden;
	display: none;
	position: absolute;
}

#content > section:first-child {
	display: block;
	position: static;
}

.js #content > section:first-child {
	visibility: hidden;
}



/* --- section misc --- */

.hint-down {
	background: url("../img/s3/down-hint.png") no-repeat scroll 0 0 transparent;
	background-size: 100% auto;
}

body.main .hint-down {
  background-color: rgba(0, 0, 0, 0.2);
  background-position: center center;
  background-size: 40px auto;
  border: 2px solid white;
  border-radius: 36px 36px 36px 36px;
  height: 33px;
  padding: 14px 5px;
  width: 52px;
  display: none;
}

.price-tag {
  background-image: url("../img/price-tag.png");
  background-repeat: no-repeat;
  background-size: 140px auto;
  height: 96px;
  left: 50%;
  margin-left: 136px;
  position: absolute;
  top: 249px;
  width: 140px;
  z-index: 2;
  display: none;
}

#content > section button.btn {
  background-color: #fbfbfb;
  background-image: none;
  border: medium none;
  border-radius: 8px 8px 8px 8px;
  color: #8bb84a;
  display: block;
  margin-top: 20px;
  padding: 13px 0;
  text-transform: uppercase;
  width: 300px;
  text-shadow: none;
  box-shadow: none;
  letter-spacing: 2px;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-o-transition: color .4s linear;
transition: color .4s linear;
}


#content > section button.btn:hover {
  background-color: #8bb84a;
  color: #fff;
  -webkit-transition: color .4s linear;
  -moz-transition: color .4s linear;
  -o-transition: color .4s linear;
  transition: color .4s linear;
}
#content > section button.continue {

}

#content > section button.continue span {
  background-image: url("../img/s3/green-arrow.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 6px auto;
  display: block;
  width: 280px;
letter-spacing: 2px;
}

#content > section button.goback {
  background-color: rgba(251, 251, 251, 0.2);
}

#content > section button.goback span {
  background-image: url("../img/s3/white-arrow-back.png");
  background-position: 20px center;
  background-repeat: no-repeat;
  background-size: 6px auto;
  color: white;
  display: block;
}


/* ---------------------------------------- */
/* ---------------- main ------------------ */
/* ---------------------------------------- */


section#main #intro-video {
  background-color: tan;
  background-image: url("../img/s3/wood-bg.jpg");
  background-size: 734px auto;
  background-position: top center;
  box-shadow: 0 0 13px #755538 inset;
}

section#main #intro-video h3 {
	display: none;
}

#main #intro-text {
  padding-top: 100px;
}

#main #intro-text p {
	font-size: 17px;
}

#main #intro-text h3 {
  color: #9AC543;
  margin-top: 20px;
  font-weight: 300;
}

/* etchy without toys */
/*
#intro-video > #video-container {
  background-image: url("../img/s3/etchy-bg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 576px auto;
  height: 533px;
  margin: 40px auto -112px;
  padding-top: 40px;
}
*/


/* etchy with toys */
#intro-video > #video-container {
  background-image: url("../img/s3/main-toy-bg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 996px auto;
  height: 582px;
  margin: 40px auto -132px;
  padding-top: 40px;
}

#video-container > div#main-video {
  background-image: url("../img/s3/video-overview-bg.jpg");
  border-radius: 12px 12px 12px 12px;
  display: block;
  height: 277px;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 0;
  width: 494px;
  cursor: pointer;
}

#video-container > #main-video object, #video-container > #main-video iframe {
  height: 277px !important;
  width: 494px !important;
}

#intro-text > div {
  margin: 0 auto;
  max-width: 835px;
}

#content > section button#sub-action-start {
	border: 2px solid;
	margin: 38px auto 0;
}


/* ---------------------------------------- */
/* --------------- shoebox ---------------- */
/* ---------------------------------------- */

#myModalLabel {
	display: none;
}

.close {
  color: white;
  font-size: 37px;
  opacity: 1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  text-shadow: 1px 1px 0 black;
  height: 30px;
}

.close:hover {
	color: white;
}

section#shoebox {
  background-color: tan;
  background-image: url("../img/s3/wood-bg.jpg");
  background-size: 734px auto;
  background-position: top center;
  box-shadow: 0 0 13px #755538 inset;
}

#toy-controls {
  max-width: 768px;
  margin: 0 auto;
}

#toy-controls > div {
  margin: 18px auto 0;
  max-width: 245px;
}

#toy-controls div.slider {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px 5px 5px 5px;
  display: block;
  height: 10px;
  overflow: hidden;
  position: relative;
  width: 150px;
  float: left;
}

.lt-ie9 #toy-controls div.slider {
  background-color: #E3D9C9;
}

#toy-controls div.slider span.slide {
  background-color: white;
  border-radius: 5px 5px 5px 5px;
  display: inline-block;
  height: 10px;
  left: 0px;
  opacity: 0.95;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
  position: absolute;
  width: 15px;
}

#toy-controls div.grouping {
	float: left;
	margin-left: 5px;
}

#toy-controls div.grouping span.group {
	background-color: white;
	opacity: .55;
	 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
	border-radius: 5px 5px 5px 5px;
	display: inline;
	float: left;
	height: 10px;
	margin: 0 5px;
	width: 10px;
}

#toy-controls div.grouping span.group.active {
	opacity: .95;
	 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
}

#toy-controls div.grouping span.group.full {
	background-color: #B5E875;
	opacity: 1;
	 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#toy-scroll-controls {
	z-index: 1000;
}



.toy-scroller {
	position: absolute;
	padding: 100px 5px 100px 0;
	filter:Alpha(opacity=85);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
	opacity: 0.85;
	background-color: #86BA33;
	cursor: pointer;
	z-index: 1000;
}

.toy-scroller > i {
	width: 33px;
	height: 37px;
}

.toy-scroller:hover {
	filter:Alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	opacity: 1;
}

#toy-scroll-left {
	left:0;
	padding: 100px 11px 100px 0px;
}
#toy-scroll-left > i {
	background-image: url("https://s3.amazonaws.com/buildabox/images/left-cntrl-arrow.png");
	background-position: left center;
}

#toy-scroll-right {
	right:0;
	padding: 100px 0px 100px 11px;
}
#toy-scroll-right > i {
	background-image: url("https://s3.amazonaws.com/buildabox/images/right-cntrl-arrow.png");
	background-position: right center;
}


#toy-list {
	margin: 15px 0 0;
}

#toy-list h3 {
	display: none;
}

#toy-list ul {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	z-index: 0;
	text-transform: uppercase;
}

#toy-list > div {
	/* match height of the li's in the list */
	height: 146px;
}

#toy-list ul:first-child {
	position: absolute;
	overflow: visible;
}

#toy-list li ul li, #toy-list-added li {
  background-repeat: no-repeat;
  background-size: 146px auto;
  color: white;
  color: rgba(255,255,255,0.30);
  display: inline-block;
  font-size: 12px;
  height: 146px;
  margin: 0 -3px;
  overflow: hidden;
  white-space: nowrap;
  width: 146px;
  background-position: center center;
}

#toy-list li ul li, #toy-list-added li {
  cursor:hand;
  cursor:grab;
  cursor:-moz-grab;
  cursor:-webkit-grab;
}

#toy-list li ul li.grabbing, #toy-list-added li.grabbing {
  cursor:grabbing;
  cursor:-moz-grabbing;
  cursor:-webkit-grabbing;
}

#toy-list li ul li {
  cursor:hand;
}

#toy-list-added > li {
  background-size: auto 100% !important;
}

#toy-list li {
  display: inline-table;
  list-style: none outside none;
}

#toy-list div > ul > li {
  	border-left: 3px solid rgba(131, 73, 0, 0.75);
	padding-right: 28px;
	text-align: left;
	background: transparent;
	margin-right: 20px;
	border-radius: 20px;
	box-shadow: inset 0px 0px 30px rgba(94, 52, 0, 0.5);
	padding-top: 20px;
}

#toy-list div > ul > li:first-child {
	border-left: none;
}

#toy-list div > ul > li > span {
  	color: #FFF4F2;
	display: block;
	margin-bottom: 10px;
	padding-left: 45px;
	letter-spacing: 2px;
	font-size: 0.85em;
	text-shadow: 0px -2px rgba(0, 0, 0, 0.13);
}

#toy-list li span, #toy-list-added li span{
	display: inline;
}

#toy-list li.toy-group span > span:first-child {
  display: none;
}

#toy-list li.toy-group span > span + span {
  	background-position: 15% center;
	background-repeat: no-repeat;
	background-size: 6px auto;
	color: #F1DFD9;
	padding-left: 14px;
	background-color: rgba(107, 70, 41, 0.37);
	padding: 6px 16px;
	border-radius: 50px;
	font-size: 15px;
	letter-spacing: 2px;
	margin-left: 10px;
}

#toy-list li.toy-group.full span > span + span {
  text-decoration: line-through;
}

#toy-list .toy-group li span, #toy-list-added li span {
	color: rgba(255,255,255,0);
}

#toy-list-added li {
  margin: 15px 0 0;
}

#toy-list li.added span {
  background: url("../img/s3/item-remove-icon.png") no-repeat scroll center center transparent;
  background-size: 130px auto;
  display: block;
  height: 140px;
}

#toy-list li.adding {
	opacity: .5;
	 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#toy-list li.added {
	opacity: .5;
	 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	cursor: pointer;
}

#toy-list li.toy-group.full li {
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	opacity: .5;
}

#theshoebox {
  background-image: url("../img/s3/shoebox-back.png");
  background-position: center 125px;
  background-repeat: no-repeat;
  background-size: 669px auto;
  position: relative;
}

#theshoebox h3 {
	display: none;
}

#theshoebox div#shoebox-included {
  background-image: url("../img/s3/shoebox-front.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 669px auto;
  height: 163px;
  margin: -115px auto -132px;
  position: relative;
  text-indent: -99999px;
  z-index: 1;
}

#shoebox .content-sub {
  background-color: #FEFCFC;
  background-image: url("../img/s3/body-bg.png");
  background-size: 24px auto;
  box-shadow: 0 0 13px #755538;
  height: 101px;
}

/* larger toybox acceptance zone
#theshoebox > div#toy-list-added {
  height: 267px;
  margin: 80px auto 0;
  width: 376px;
}
*/

#theshoebox > div#toy-list-added {
  height: 160px;
  margin: 218px auto 0;
  width: 250px;
}

#theshoebox #shoebox-actions {
	display: none;
}

section#shoebox div#shoebox-actions button.message.added {
	background-color: rgba(251, 251, 251, 0.2);
	color: white;
}

section#shoebox div#shoebox-actions button.message.added span {
	background-image: url("../img/s3/white-arrow-right.png");	
}

/* full shoebox */
section#shoebox.fullbox #theshoebox {
	background-image: none;
}

section#shoebox.fullbox div#shoebox-included {
  background-image: url("../img/s3/shoebox-packed.png");
  background-position: center top;
  background-size: 393px auto;
  height: 298px;
  margin-top: -250px;
}

section#shoebox.fullbox div#toy-list {
	visibility: hidden;
}

section#shoebox.fullbox div#toy-list-added {
	visibility: hidden;
}

section#shoebox.fullbox div#shoebox-actions {
  display: block;
  left: 50%;
  margin-left: -150px;
  position: absolute;
  top: 70px;
}

section#shoebox.fullbox div#shoebox-actions.added-note {
	top: 30px;
}


section#shoebox div#shoebox-actions button {
	display: none;
}

section#shoebox.fullbox div#shoebox-actions button {
	display: block;
}

section#shoebox div#shoebox-actions button.finalize {
	display: none;
}

/* modal tweaks */
#content section > div.modal {
	width: 400px;
	margin-left: -200px;
}

#content section > div.modal .modal-header {
  background-color: #A6A6A6;
  height: 200px;
}

#content section > div.modal .modal-body {
  font-size: 14px;
  line-height: 26px;
  max-height: 200px;
  text-align: left;
}

#content section > div.modal .modal-footer {
	border-radius: 0;
	background-color: #F5F5F5;
	border-top: none;
	padding: 0;
}

#content section > div.modal .modal-footer button.btn {
  background-color: #9BC25B;
  background-image: none;
  border: medium none;
  border-radius: 0 0 0 0;
  padding: 25px;
  text-shadow: 0 0;
  margin: 0;
  width: 100%;
  color: white;
}

#content section#checkout > div.modal .modal-header {
  background-color: white;
  height: auto;
  border: none;
}

#content section#checkout > div.modal .modal-header .close {
	color: #B0373A;
}

#content section#checkout > div.modal .modal-header .close:hover {
	color: #E86F72;
}

#content section#checkout > div.modal .modal-footer button.btn {
  background-color: #B0373A;
  color: white;
  font-family: "proxima-nova";
  letter-spacing: 2px;
}



/* ---------------------------------------- */
/* ---------------- message --------------- */
/* ---------------------------------------- */

section#message {
  background-image: url("../img/s3/sandy-tile-bg.png");
  background-size: 100px auto;
}

section#message > div#message-content {
  background-image: url("../img/s3/top-cut-bg.png");
  background-repeat: repeat-x;
  background-size: 24px auto;
  padding-top: 20px;
}

section#message > div#message-actions {
  background-image: url("../img/s3/btm-cut-bg.png");
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 24px auto;
}

section#message #message-content h3 {
  display: none;
}

section#message #add-message {
  margin-top: 40px;
}

section#message #add-message textarea {
  background: transparent url("../img/s3/page-line-bg.png") left top;
  background-size: 2px auto;
  border: medium none;
  box-shadow: none;
  font-size: 19px;
  font-weight: 200;
  letter-spacing: 1px;
  line-height: 48px;
  padding-top: 0;
  width: 300px;
  resize: none;
}

#add-photo {
	background: url("../img/s3/occ-watermark-letter.png") no-repeat scroll 0 0 transparent;
	background-size: 345px auto;
	margin-top: 10px;
}

section#message #add-photo img {
	background: #998A7D url("../img/s3/camera-icon.png") center center no-repeat;
	background-size: 100px auto;
	
	border: 10px solid white;
	display: block;
	height: 280px;
	margin: 50px auto;
	max-width: 100%;
	transform:rotate(-5deg);
	-ms-transform:rotate(-5deg); /* IE 9 */
	-webkit-transform:rotate(-5deg); /* Safari and Chrome */
	vertical-align: middle;
	width: 280px;
}

#content > section#message button {
  display: inline;
  margin: 20px 20px 49px;
}

#content > section#message button.goback {
  background-color: rgba(153, 138, 125, 0.2);
  border: 2px solid white;
  padding: 11px 0;
}


/* ---------------------------------------- */
/* --------------- checkout --------------- */
/* ---------------------------------------- */

section#checkout {
  background-image: url("../img/s3/sandy-tile-bg.png");
  background-size: 100px auto;
}


#checkout-boxes, #checkout-form-cont {
  background-image: url("../img/s3/btm-cut-narrow-bg.png");
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: 24px auto;
  padding-bottom: 74px;
}

#checkout-form {
  background-image: url("../img/s3/checkout-bg.png");
  background-position: left 34px;
  background-size: 156px auto;
}

#checkout-total {
  background-image: url("../img/s3/checkout-trans-bg.png");
  background-repeat: repeat-x;
  background-size: 156px auto;
  height: 156px;
}

#checkout-total span {
  color: #8BB84A;
  display: block;
  font-size: 60px;
  font-weight: bold;
  padding-top: 50px;
  text-shadow: 0 1px 0 #FFFFFF;
}

#checkout-total span span {
	display: inline;
	padding: 0;
}

#checkout-total span sup {
	font-size: 38px;
}

#checkout-pay-actions {
	margin-top: -32px;
}

#content > section#checkout #checkout-pay-actions button {
  display: inline;
  margin: 20px 20px 18px;
  border: 2px solid white;
}

#content > section#checkout #checkout-pay-actions button.active {
  border: 2px solid #8BB84A;
}

/* hide in favor of Barclays payment screen */
#checkout-pay-options,
#checkout-pay-actions {
	display: none;
}

#checkout-pay-options .pay-option {
	display: none;
}

#checkout-pay-options .pay-option.active {
	display: block;
}


#checkout-form form {
  margin: 0 auto;
  max-width: 660px;
  padding-bottom: 36px;
}

#content > section#checkout #checkout-form form button, #checkout-form form .button.gform_button {
  background-color: #F0F4EA;
  border: medium none;
  border-radius: 32px 32px 32px 32px;
  box-shadow: none;
  color: white;
  font-size: 16px;
  letter-spacing: 5px;
  margin-top: 40px;
  padding: 20px;
  text-transform: uppercase;
  width: 100%;
}

#content > section#checkout #checkout-form form button.form-submit, #checkout-form form .button.gform_button {
	background-color: #8bb84a;
	box-shadow: 4px 4px 0 #728953;
}

#content > section#checkout #checkout-form form button.form-warning {
	background-color: #cca681;
	box-shadow: 4px 4px 0 #968169;
	display: none;
}


#checkout-form form h3 {
  clear: both;
  color: white;
  font-weight: lighter;
  letter-spacing: 4px;
  margin: 0;
  padding: 40px 0;
  text-shadow: -1px -1px 0 #CFCFCF;
  text-transform: uppercase;
}

#checkout-form input:not([type="radio"]), #checkout-form select {
  background-color: #F0F4EA;
  border: 4px solid white;
  border-radius: 32px 32px 32px 32px;
  box-shadow: none;
  color: inherit;
  float: left;
  font-size: 16px;
  height: 66px;
  letter-spacing: 3px;
  margin-left: 2.12766%;
  margin-top: 15px;
  margin-bottom: 0;
  padding: 20px;
}

#checkout-form label {
  background-color: #F0F4EA;
  border: 4px solid white;
  border-radius: 32px 32px 32px 32px;
  box-shadow: none;
  color: inherit;
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 20px;
  text-align: left;
}

#checkout-form select {
}

#checkout-form input:first-child, #checkout-form input.span12, #checkout-form select:first-child, #checkout-form select.span12 {
	margin-left: 0;
}


#checkout-boxes ul.checkout-items {
  margin: 0 auto;
  max-width: 660px;
}

#checkout-boxes li {
  background-color: #D4C8BE;
  border-radius: 32px 32px 32px 32px;
  box-shadow: none;
  color: white;
  font-size: 14px;
  height: 70px;
  letter-spacing: 5px;
  list-style: none outside none;
  margin-left: 2.12766%;
  margin-top: 24px;
  overflow: hidden;
  position: relative;
}

#checkout-boxes li.template {
	display: none;
}

#checkout-boxes li.checkout-item.co-sponsor-item {
  background-image: url("../img/s3/flag-icon.png");
  background-position: 96px center;
  background-repeat: no-repeat;
  background-size: 19px auto;
}

#checkout-boxes li.checkout-item.co-shoebox-item {
  background-image: url("../img/s3/white-box.png");
  background-position: 82px center;
  background-repeat: no-repeat;
  background-size: 43px auto;
}

#checkout-boxes li.checkout-item.shoebox-more {
  background-image: url("../img/s3/white-box-open.png");
  background-position: 96px center;
  background-repeat: no-repeat;
  background-size: 55px auto;
}
#checkout-boxes li.checkout-item.shoebox-more .price {
	float: right;
	margin-right: 1.5em;
}


#content > section #checkout-boxes button {
  background-color: #FBFBFB;
  background-image: none;
  border: medium none;
  border-radius: 24px 24px 24px 24px;
  box-shadow: none;
  color: white;
  padding: 4px 8px;
  text-shadow: none;
  text-transform: uppercase;
  margin: 0;
  width: auto;
  letter-spacing: 2px;
}

.shoebox-add > span {
  font-size: 23px;
}

#checkout-boxes li div {
  float: left;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#checkout-boxes li div.item-name {
  margin-left: 110px;
  margin-top: 26px;
  text-align: left;
}

#checkout-boxes li div.item-name span {
  color: white;
  font-size: 12px;
  font-weight: normal;
  padding-left: 25px;
  text-transform: uppercase;
  vertical-align: middle;
}

#checkout-boxes li div.item-name span:first-child {
  font-size: 20px;
  font-weight: bold;
}

#content > section #checkout-boxes button.item-edit {
  background-color: #8CB948;
  border-radius: 32px 0 0 32px;
  color: white;
  float: left;
  font-size: 12px;
  height: 70px;
  padding: 4px 15px;
}

#content > section #checkout-boxes button.item-delete {
  background-color: #B0373A;
  border-radius: 0 32px 32px 0;
  color: white;
  float: right;
  font-size: 33px;
  font-weight: 100;
  height: 70px;
  padding: 2px 30px;
  text-transform: none;
}

#content > section #checkout-boxes button.item-quantity {
  float: right;
  height: 46px;
  margin-right: 30px;
  margin-top: 12px;
}

#content > section #checkout-boxes button.item-quantity > span {
  color: #9EC74C;
  font-size: 20px;
  letter-spacing: 2px;
  padding: 0 7px;
  vertical-align: middle;
}


#content > section #checkout-boxes button.item-quantity > span:first-child > span {
  font-size: 21px;
  font-weight: bold;
}


#content > section #checkout-boxes button.item-quantity > span:first-child {
  font-size: 12px;
  padding: 2px 0 0 10px;
}

#checkout-boxes li.shoebox-more {
  background-color: rgba(212, 200, 190, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 36px 36px 36px 36px;
}

#content > section #checkout-boxes button.shoebox-add {
  background-color: transparent;
  height: 75px;
  width: 100%;
}

#checkout-boxes > h3 {
  	background-image: url("../img/s3/brown-dashed-line.png");
	background-position: center bottom;
	background-repeat: repeat-x;
	background-size: 28px auto;
	color: #CCA782;
	font-size: 20px;
	font-weight: lighter;
	letter-spacing: 10px;
	margin-top: 40px;
	padding-bottom: 32px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	line-height: 1.15;
}

#checkout-form input:focus, #checkout-form select:focus {
  background-color: white;
  border-color: #8BB84A;
  color: #8BB84A;
}

#checkout-form input.error, #checkout-form select.error {
  background-color: white;
  border-color: #B0373A;
  color: #B0373A;
}

.checkout-errors {
  color: #B0373A;
  display: none;
  margin-bottom: -25px;
  margin-top: 15px;
  text-transform: uppercase;
}


/* ---------------------------------------- */
/* -------------- challenge --------------- */
/* ---------------------------------------- */

section#challenge, section#_challenge, section#sponsor, section#giftfriends {
  background-image: url("../img/s3/sandy-tile-bg.png");
  background-size: 100px auto;
}

.challenge-meter, .challenge-info, .challenge-action button {
  margin: 0 auto;
  max-width: 660px;
}

#challenge .content-prime > h3, #sponsor .content-prime > h3 {
  display: none;
}

.challenge-info input, .challenge-meter, #giftfriends input {
  background-color: #D4C8BE;
  border: medium none;
  border-radius: 36px 36px 36px 36px;
  color: white;
  font-size: 17px;
  height: 70px;
  letter-spacing: 3px;
  margin-top: 0;
  text-align: left;
}

.challenge-info p, .challenge-info .challenge-desc, #giftfriends p {
  color: #ADA19D;
  padding-left: 0;
  padding-right: 0;
}

.challenge-info > .challenge-name > input {
  background-image: url("../img/s3/flag-icon.png");
  background-position: 34px center;
  background-repeat: no-repeat;
  background-size: 19px auto;
  padding-left: 76px;
  padding-right: 140px;
}

.challenge-info > .challenge-person > input, #giftfriends .giftfriends-giver input {
  margin-top: 30px;
  padding-left: 26px;
}

.challenge-quantity {
  margin-top: -59px;
  padding-right: 17px;
  text-align: right;
  text-transform: uppercase;
}

.challenge-quantity button {
  background-color: #FBFBFB;
  border-radius: 24px 24px 24px 24px;
  color: white;
  padding: 4px 8px;
  height: 46px;
  border: none;
}

.challenge-quantity button > span:first-child {
  font-size: 12px;
  padding: 2px 0 0 10px;
}

.challenge-quantity button > span:first-child > span {
  font-size: 21px;
  font-weight: bold;
}

.challenge-quantity button > span {
  /*color: #CCA782;*/
  color: #9EC74C;
  font-size: 20px;
  letter-spacing: 2px;
  padding: 0px 7px;
  vertical-align: middle;
}

.challenge-meter {
	background-color: rgba(212, 200, 190, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.7);
	box-shadow: 0 0 28px rgba(212, 200, 190, 0.5) inset;
	text-transform: uppercase;
	width: 100%;
}

.challenge-count {
  background-color: #A5C94F;
  border-radius: 36px 0 0 36px;
  box-shadow: 6px 10px 0 #B2D169 inset, 0 0 28px #F2FBC6;
  display: inline-block;
  height: 52px;
  padding-top: 18px;
  text-align: center;
  width: 20%;
}

.one-quarter .challenge-count {
  background-color: #C0DE7B;
  box-shadow: 6px 10px 0 #B7D572 inset, 0 0 28px #C0DE7B;
}

.two-quarter .challenge-count {
  background-color: #B3CD53;
  box-shadow: 6px 10px 0 #ACC64C inset, 0 0 28px #B3CD53;
}

.three-quarter .challenge-count {
  background-color: #C9A54F;
  box-shadow: 6px 10px 0 #D1B269 inset, 0 0 28px #FBF2C6;
}

.four-quarter .challenge-count {
  background-color: #B0373A;
  box-shadow: 6px 10px 0 #90171A inset, 0 0 28px #B0373A;
}

.full .challenge-count {
  background-color: #B0373A;
  box-shadow: 6px 10px 0 #90171A inset, 0 0 28px #B0373A;
  border-radius: 36px 36px 36px 36px;
}

.challenge-left {
  color: #9F938F;
  border-radius: 0 36px 36px 0;
  display: inline-block;
  height: 52px;
  padding-top: 18px;
  text-align: center;
  width: 80%;
}

.challenge-action button, .giftfriends-action button {
  background-color: #9EC74C;
  border: medium none;
  border-radius: 36px 36px 36px 36px;
  box-shadow: 4px 4px 0 #728953;
  color: white;
  font-size: 16px;
  letter-spacing: 5px;
  margin-top: 40px;
  margin-bottom: 10px;
  padding: 26px 20px;
  text-transform: uppercase;
  width: 100%;
}

.challenge-action, .giftfriends-action {
	background-image: url("../img/s3/brown-dashed-line.png");
	background-repeat: repeat-x;
	margin-top: 50px;
	padding-top: 10px;
}



.challenge-errors {
  color: #B0373A;
  display: none;
  padding-top: 24px;
  text-transform: uppercase;
}

.challenge-image > img {
	background: url("../img/s3/camera-icon.png") no-repeat scroll center center #998A7D;
	background-size: 100px auto;
	background-color: #D4C8BE;
	border: 10px solid white;
	border-radius: 110px 110px 110px 110px;
	height: 200px;
	margin-top: -36px;
	margin-bottom: 14px;
	width: 200px;
	cursor: pointer;
}

#challenge .content-prime, #_challenge .content-prime, #sponsor .content-prime, #giftfriends .content-prime {
  background-image: url("../img/s3/btm-cut-narrow-bg.png");
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: 24px auto;
  padding-bottom: 74px;
}

#challenge div.content-sub h3, #challenge div.content-sub #challenge-share {
  display: none;
}


#_challenge .challenge-image > img {
	cursor: default;
}

#_challenge  .challenge-desc {

}

#_challenge.loading > div {
	visibility: hidden;
}

#_challenge .challenge-desc h3 {
  background-image: url("../img/s3/flag-icon.png");
  background-position: left center;
  background-repeat: no-repeat;
  display: inline;
  background-size: 19px auto;
  padding-left: 32px;
}



body.challengeMode #directive a#action-giftfriends, 
body.challengeMode #directive a#action-challenge,
body.giftfriendsMode #directive a#action-giftfriends, 
body.giftfriendsMode #directive a#action-challenge  {
	display: none;	
}

body.challengeMode #header-sub #directive,
body.giftfriendsMode #header-sub #directive {
	margin-bottom: 30px;
}

body.giftfriendsMode .price-tag,
body.giftfriendsMode #directive-action button.cart,
body.giftfriendsMode button.item-quantity,
/*body.giftfriendsMode .checkout-item.shoebox-more,
body.giftfriendsMode #checkout-total span,*/
body.giftfriendsMode #checkout-pay-actions,
body.giftfriendsMode #checkout-pay-options,
body.giftfriendsMode  #checkout-payer h3
{display: none !important;}

#checkout-total {
	margin-bottom: 2em;
}
.shipping-included {
	color: #8BB84A;
	font-size: 14px;
	letter-spacing: 3px;
	margin-top: .5em;
}
.giftcard-applied {
	display: none;
	font-size: 14px;
	letter-spacing: 3px;
	margin-top: -1em;
	text-transform: uppercase;
	font-size: 60%;
}
body.giftfriendsMode .giftcard-applied {
	display: block;
}



button.loading {
	background-color: #D0D1CD !important;
	box-shadow: 4px 4px 0 #C3C4C0 !important;
}

button.success {
	background-color: #C1C989 !important;
	box-shadow: 4px 4px 0 #B2BA7A !important;
}

button.error {
	background-color: #B0373A !important;
	box-shadow: 4px 4px 0 #9E2528 !important;
	color: white !important;
}




/* ---------------------------------------- */
/* ------------- GIFT FRIENDS ------------- */
/* ---------------------------------------- */


#giftfriends h3 {
  margin-top: 38px;
  color: #978B87;
}

/*
#giftfriends .content-prime > div {
  margin: 0 auto;
  max-width: 660px;
}
*/

#giftfriends .giftfriends-info > div:first-child, .giftfriends-action button, .giftfriends-friends {
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
}

#giftfriends textarea#gf-message {
  background: transparent url("../img/s3/page-line-bg.png") left top;
  background-size: 2px auto;
  border: medium none;
  box-shadow: none;
  font-size: 19px;
  font-weight: 200;
  letter-spacing: 1px;
  line-height: 48px;
  padding-top: 0;
  resize: none;
  margin-top: 10px;
}

.phrase-holder {
  background-color: white;
  border: 1px solid #ADA19D;
  border-radius: 36px 36px 36px 36px;
  box-shadow: 0 0 2px #D5D5D5 inset;
  margin: 0 auto;
  padding-top: 10px;
  text-align: left;
}

.phrase-holder .phrase-data, .phrase-holder .phrase-control {
  display: inline-block;
  font-size: 18px;
  height: 30px;
  line-height: 18px;
  margin: 0 0 10px 10px;
  padding: 11px 14px 5px;
}

.phrase-holder .phrase-data {
  background-color: #B6DF64;
  border-radius: 32px 32px 32px 32px;
  color: #FEFED0;
  cursor: pointer;
}

.phrase-holder .phrase-data:after {
  color: #79A227;
  content: "x";
  padding-left: 13px;
}

.phrase-holder .phrase-data:hover:after {
  color: #578005;
}

.phrase-holder .phrase-control {
  background: none repeat scroll 0 0 transparent;
  border: medium none;
  box-shadow: none;
  overflow: hidden;
  padding-left: 0;
  resize: none;
  vertical-align: bottom;
  margin-left: 15px;
}


/* --- landing page --- */

.giftfriends-desc {
  margin: 30px auto;
  max-width: 660px;
}


/* ---------------------------------------- */
/* ------------- confirmation ------------- */
/* ---------------------------------------- */


#confirmation-message {
  margin: 0 auto;
  max-width: 660px;
}

#confirmation-message p {
	padding: 0;
}

#receipt {
  background-color: white;
  padding: 12px;
  color: black;
}

#receipt > div {
  border-top: 1px solid;
}

#receipt > div:first-child {
  border-top: none;
}

/* ---------------------------------------- */
/* ---------------- sponsor --------------- */
/* ---------------------------------------- */

/* some sponsor styles included in challenge */


/*

*/

#sharing input {
  background-color: #FFFFFF;
  border: 4px solid #EAE3DD;
  border-radius: 32px 32px 32px 32px;
  box-shadow: none;
  color: inherit;
  float: left;
  font-size: 14px;
  letter-spacing: 2px;
  margin-top: 15px;
  padding: 20px;
  padding-right: 140px;
  cursor: text;
}

#share-container {
  margin: 0 auto;
  max-width: 660px;
}

#sharing h3 {
  color: #9A75AF;
}

#sharing input + button, #sharing input + label {
  display: block;
  float: right;
  margin-right: 15px;
  margin-top: -50px;
  padding: 7px 0;
  text-align: center;
  text-transform: uppercase;
  width: 120px;
}

#sharing input + button {
  background-color: #9EC74C;
  border: medium none;
  border-radius: 20px 20px 20px 20px;
  color: white;
  letter-spacing: 1px;
}

#sharing input + label {
  border-left: 1px solid;
  color: #D6CFC9;
  margin-bottom: 40px;
}

#tw-share-text, #tw-chal-share, #fb-share-text, #fb-chal-share {
  -moz-box-sizing: border-box;
  border: medium none;
  border-radius: 48px 48px 48px 48px;
  display: inline;
  float: left;
  height: 100px;
  text-indent: 0;
  box-shadow: none;
  color: #737373;
}

#tw-share-text, #fb-share-text {
	resize: none;
}

#tw-chal-share, #fb-chal-share {
  border-radius: 48px 48px 48px 48px;
  color: white;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 10px;
}

#fb-chal-share {
  background-color: #3063A7;
  background-image: url("../img/s3/facebook-small.png");
  background-position: 25px center;
  background-repeat: no-repeat;
  background-size: 24px auto;
}

#tw-chal-share {
  background-color: #00B0ED;
  background-image: url("../img/s3/twitter-small.png");
  background-position: 25px center;
  background-repeat: no-repeat;
  background-size: 27px auto;

}





/* ---------------------------------------- */
/* ---------------- footer ---------------- */
/* ---------------------------------------- */


body > footer {
  margin-top: 50px;
}

body > footer nav.footer-prime {
  border: 2px solid #E5E5E5;
  margin: 0 auto;
  max-width: 660px;
}

body > footer nav.footer-prime * {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

body > footer nav.footer-prime ul {
	margin: 0;
}

body > footer nav.footer-prime li {
  list-style: none outside none;
  margin: 0;
}

body > footer nav.footer-prime > ul {
  display: block;
  font-size: 12px;
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

body > footer nav.footer-prime > ul > li {
	display: block;
	width: 100%;
}

li#occ-nav > span {
  border-right: 2px solid;
  display: block;
  float: left;
  height: 125px;
  width: 21%;
  
  background-image: url("../img/s3/occ-watermark.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 109px auto;
  border-right: 2px solid #E5E5E5;
  text-indent: -99999px;

}

li#occ-nav li#occ-visit {
	background-color: #C8C8C8;
	clear: left;
	width: 21%;
	color: white;
	display: block;
}

li#occ-nav li#occ-visit a {
	display: block;
	height: 37px;
	width: 100%;
	color: white;
	padding-top: 8px;
}

li#occ-nav li#occ-total-gifts {
  float: right;
  height: 100px;
  margin-top: -140px;
  width: 79%;
}

#occ-total-gifts > span:first-child {
  background: url("../img/s3/gray-box-closed.png") no-repeat scroll right top transparent;
  background-size: 41px auto;
  display: block;
  float: left;
  font-size: 32px;
  font-weight: 100;
  height: 45px;
  letter-spacing: 0;
  padding-left: 25px;
  padding-top: 10px;
  text-align: left;
  width: 55%;
}

#occ-total-gifts > span + span {
  display: block;
  float: left;
  width: 40%;
}

li#occ-nav li#occ-volunteer {
	background-color: #E5E5E5;
	margin-left: 21%;
	margin-top: -37px;
	display: block;
	width: 41%;
}

li#occ-nav li#occ-volunteer a {
	height: 37px;
	width: 100%;
	display: block;
	padding-top: 8px;
	color: #A6A6A6;
}

li#share-nav {
  float: right;
  margin-top: -80px;
  z-index: 10000;
  position: relative;
}

li#share-nav > span {
  float: left;
  height: 43px;
  margin-left: 21%;
  width: 41%;
  border-top: 2px dashed;
  padding-top: 10px;
}

li#share-nav > ul {
  float: right;
  width: 38%;
}

li#share-nav > ul > li {
  float: left;
  height: 80px;
  margin-left: 1%;
  overflow: hidden;
  text-indent: -99999px;
  width: 32.3333%;
}

li#share-nav > ul li a {
  color: white;
  display: block;
  width: 100%;
  height: 100%;
}

li#share-nav > ul li.facebook {
	background-color: #3063A7;
	background-image: url("../img/s3/facebook-small.png");
	background-position: center 20px;
	background-repeat: no-repeat;
	background-size: 24px auto;
}

li#share-nav > ul li.twitter {
  background-color: #00B0ED;
  background-image: url("../img/s3/twitter-small.png");
  background-position: center 24px;
  background-repeat: no-repeat;
  background-size: 27px auto;
}

li#share-nav > ul li.pinterest {
	background-color: #d62c54;
	background-image: url("../img/s3/pinterest-small.png");
	background-position: center 20px;
	background-repeat: no-repeat;
	background-size: 26px auto;
}

body > footer .footer-sub {
  font-size: 10px;
  line-height: 16px;
  margin: 0 auto;
  max-width: 660px;
  text-align: center;
}



/* ---------------------------------------- */
/* ------------ media queries ------------- */
/* ---------------------------------------- */


/* Landscape phones and down */
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

	body > header, body #content {
		margin-left: -20px;
		margin-right: -20px;
	}
	
	#header-prime .masthead .dropdown {
		position: absolute;
		top: 0;
		right: 0;
		width: 84px;
	}
	
	#content section > div.modal {
		margin: 0 auto;
		width: 298px;
	}
	
	#content section > div.modal .modal-header {
		height: 160px;
	}
	
	#content section > div.modal .modal-body {
		max-height: 104px;
	}
	
	#content section > div.modal .modal-header .close {
		height: 35px;
	}
	
	
	body > footer nav.footer-prime ul, body > footer nav.footer-prime li, body > footer nav.footer-prime span {
		display: block !important;
		float: none !important;
		left: 0 !important;
		margin: 0 !important;
		/*padding: 0 !important;*/
		top: 0 !important;
		width: 100% !important;
	}
	
	li#occ-nav li#occ-total-gifts {
		height: auto;
	}
	
	#occ-total-gifts > span:first-child {
		padding-left: 0;
		background: none;
		text-align: center;
	}
	
	#checkout-form input, #checkout-form select {
		margin-left: 0;
	}
	
	#header-sub #directive {
	  max-width: 90%;
	  padding: 10px 0 6px;
	}
	
	#directive a#action-giftfriends, #directive a#action-challenge {
	  margin-top: 10px;
	}
	
	#header-sub {
		background-size: auto 264px;
	}
	
	.price-tag {
		background-size: 70px auto;
		
		display: none;
		
		height: 71px;
		width: 96px;
		
		margin-left: -121px;
		top: 71px;
		
		transform:rotate(-44deg);
		-ms-transform:rotate(-44deg); /* IE 9 */
		-webkit-transform:rotate(-44deg); /* Safari and Chrome */
	}
	
	#content > section#message button {
	  margin: 0 20px 35px;
	}
	
	#checkout-boxes li.checkout-item.shoebox-more {
		background-image: none !important;
  	}
  	
  	#checkout-boxes li.checkout-item.co-shoebox-item {
	  	background-image: none !important;
  	}
  	
	#checkout-boxes li div.item-name {
	  margin-left: 70px;
	  margin-top: 35px;
	  text-align: left;
	}
	
	#content > section #checkout-boxes button.item-quantity {
	  /*margin-right: 30px;*/
	  margin-top: -19px;
	}
	
	#content > section #checkout-boxes button.item-quantity > span {
	  padding: 32px 7px 0;
	}
	
	#content > section #checkout-boxes button.item-quantity > span:first-child {
	  padding: 32px 0 0 10px;
	}
	
	#content > section button.btn {
	  width: 90%;
	  min-width: 295px;
	}
	
	#content > section button.btn span {
	  width: 95%;
	}
	
	#intro-video > #video-container {
	  background-size: 160% auto;
	  height: auto;
	  margin: 0 auto;
	  padding-top: 0;
	}
	
	#video-container > div#main-video {
	  background: none repeat scroll 0 0 transparent;
	  height: auto;
	  margin: 5% auto -27%;
	  width: 78%;
	}	
	
	#main-video > div {
	  background-image: url("../img/s3/video-overview-bg.jpg");
	  background-repeat: no-repeat;
	  background-size: 100% auto;
	  border-radius: 6px 6px 6px 6px;
	  margin-bottom: 53%;
	  margin-top: 8.5%;
	  padding-bottom: 56.5%;
	  position: relative;
	  width: 100%;
	}
	
	#video-container > #main-video object, #video-container > #main-video iframe {
	  height: 100% !important;
	  top: 0;
	  left: 0;
	  position: absolute;
	  width: 100% !important;
	}

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	#checkout-form input, #checkout-form select {
	  margin-left: 2.76243%;
	}
}

/* Retina-specific stuff here */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

	.hint-down {
		background-image: url("../img/s3/down-hint-2x.png");
	}

	.price-tag {
		background-image: url("../img/price-tag-2x.png");
	}


	#header-sub {
		background-image: url("../img/header-bg-2x.jpg");
	}
	
	ul.dropdown-menu {
	  background-image: url("../img/s3/drop-down-tag-2x.png");
	  background-size: 19px auto;
	}

	section#shoebox, section#main #intro-video {
		background-image: url("../img/s3/wood-bg-2x.jpg");
	}
	    
    #toy-list li ul li, #toy-list-added li{
		background-image: url("../img/s3/toy-sunglasses-2x.png");
	}

	#toy-list li ul li.toy-yoyo, #toy-list-added li.toy-yoyo {
	  background-image: url("../img/s3/toy-yoyo-2x.png");
	}
	
	#toy-list li ul li.toy-ball, #toy-list-added li.toy-ball {
	  background-image: url("../img/s3/toy-ball-2x.png");
	}
	
	#toy-list li ul li.toy-harmonica, #toy-list-added li.toy-harmonica {
	  background-image: url("../img/s3/toy-harmonica-2x.png");
	}

	/*
	#theshoebox {
		background-image: url("../img/s3/shoebox-back-2x.png");
	}
	*/
	/*
	#theshoebox div#shoebox-included {
		background-image: url("../img/s3/shoebox-front-2x.png");
	}
    */
    
    #toy-list li.added span {
		background-image: url("../img/s3/item-remove-icon-2x.png");
	}
    
    /*
    section#shoebox.fullbox div#shoebox-included {
		background-image: url("../img/s3/shoebox-packed-2x.png");
	}
	*/
	
	.challenge-info > .challenge-name > input, 
	#checkout-boxes li.checkout-item.co-sponsor-item, 
	#_challenge .challenge-desc h3 {
		background-image: url("../img/s3/flag-icon-2x.png");
	}

	section#message #add-photo img, .challenge-image > img {
		background-image: url("../img/s3/camera-icon-2x.png");
	}
	
	li#share-nav > ul li.twitter {
		background-image: url("../img/s3/twitter-small-2x.png");
	}
	
	#checkout-boxes li.checkout-item.co-shoebox-item {
		background-image: url("../img/s3/white-box-2x.png");
	}

	#checkout-boxes li.checkout-item.shoebox-more {
		background-image: url("../img/s3/white-box-open-2x.png");
	}


}