/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,button,input,select,textarea {
color:#222;
}
html {
font-size:1em;
line-height:1.4;
}
/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets 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, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio,canvas,img,video {
vertical-align:middle;
}
/*
 * Remove default fieldset styles.
 */
fieldset {
border:0;
margin:0;
padding:0;
}
/*
 * Allow only vertical resizing of textareas.
 */
textarea {
resize:vertical;
}

/* ==========================================================================
   styles
   ========================================================================== */
@font-face {
	font-family: 'LeagueGothicRegular';
	src: url('fonts/LeagueGothic-Regular-webfont.eot');
	src: url('fonts/LeagueGothic-Regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/LeagueGothic-Regular-webfont.woff') format('woff'),
	     url('fonts/LeagueGothic-Regular-webfont.ttf') format('truetype'),
	     url('fonts/LeagueGothic-Regular-webfont.svg#LeagueGothicRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

html{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select: none;-webkit-touch-callout:none; background:#404558;}
body{font-family:LeagueGothicRegular, Arial, sans-serif;}
a{ text-decoration:none;}

/*-- Header & Footer -- */
header{ text-transform: uppercase;text-align:center; width:calc(100% + 40px); margin-left:-20px;}
header #title{ background:url(../images/bg_stripe.jpg) repeat-x center;}
header #title .wrapper{ padding:0px 20px; width:50%; white-space: nowrap; overflow: hidden; margin: auto; }
header #title .wrapper span{ display: inline-block; }
header #title .wrapper .advance{position: relative; animation: 5s linear 0s infinite alternate advanced;}
header #date{ margin-top:-50px; }
footer{background:url(../images/bg_footer.png) #404558 repeat-x; width:calc(100% + 40px); height:50px; margin-top:50px; margin-left:-20px;}

@keyframes advanced {
  0%, 25% {
    transform: translateX(0%);
    left: 0%;
  }
  75%,
  100% {
    transform: translateX(-100%);
    left: 100%;
  }
}

/*-- Content Wrapper -- */
.contentWrapper{width:100%; max-width: 940px; margin:auto; padding:20px 20px 0 20px;}

/*-- Fonts -- */
.fontTitle{ font-size:130px; letter-spacing: 0px; }
.fontTitleDate{ font-size:60px; }
.fontLabel{ font-size:25px; letter-spacing:1px; }
.fontSlaveTitle{ font-size:30px; }
.fontAction{ font-size:30px; }
.fontInput{ font-size:25px; letter-spacing:1px; }
.fontInputLarge{ font-size:40px; }
.fontToolTitle{ font-size:40px;letter-spacing:1px; }
.fontToolDesc{ font-size:25px; }
.fontButton{ font-size:30px;letter-spacing:1px; }
.fontQuote{ font-size:40px; line-height:42px }
.fontPayTitle{ font-size:40px; }
.fontPayAmount{ font-size:150px; line-height:190px; }
.fontThankyou{ font-size:90px; line-height: 90px; }

/*-- Table List Wrapper -- */
.tableWrapper{ width:100%; min-width: 800px; margin-top: 20px; }
.mealcolumna, .mealcolumnb, .mealcolumnc, .mealcolumnd{float:left;}
.meallabel{text-indent:0px; text-transform:uppercase; text-align:center;}
.mealcolumna{width:22%;}
.mealcolumnb{width:9%;}
.mealcolumnc{width:10%;}
.mealcolumnd{width:18%;}

#tableListLabel, .person{ border-bottom:#666 2px solid; height:auto; padding: 10px 0 10px 18px; min-width: 800px; }
#tableListLabel{ min-width: 820px; }
.person{border-bottom:#666 2px dashed;}
.personitem{ position: relative; height:45px; width: 100%; }
.personitem input{ width:calc(100% - 5px);}
.removeitem{position:absolute; margin-top:10px; margin-left:calc(100% - 25px); cursor: pointer; cursor: hand;}
#slaveDesc{text-transform:uppercase; text-align:center; width:100%; min-width: 800px;}

input, textarea{font-family:LeagueGothicRegular, Arial, sans-serif; border:none;padding:5px 15px; text-transform:uppercase; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
textarea{width:90%; text-align:center; resize:none; height:100px;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {/* display: none; <- Crashes Chrome on hover */-webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */}
input.inputNone, input.inputTitle, #slaveList input.inputNone{background:none; color:#168074; text-align:right; visibility:hidden;}
input.inputTitle{visibility:visible;}

.textAlignRight{ text-align:right; }
.calculatorMode .person:hover{cursor:move;}

/*-- Tools Wrapper -- */
#toolsOption{margin-top:10px; position:relative;}
#fieldEdit{width:100%;}
#fieldEdit img{ margin-top:-5px;}
#fieldEdit .action span:nth-child(2){ display: contents; }
#fieldEdit .action span:nth-child(3){ display: none; }
.floatEdit{ position:fixed; bottom:0; background:#F2F1D2;}

#fieldOption{width:100%; padding-top:10px; padding-bottom:10px;}
#fieldOption .title{ width:100%; text-align:center; }
#fieldOption .column{width:50%; height:45px; float: left;}
#fieldOption .column input{ width:calc(50% - 10px);}
#additem, #addperson, #addslave, #duplicateitem{float:left; margin-right:30px; cursor: pointer;}
#edittotal{float:right;}
#desc{ text-align:center; margin:10px 0 20px; }

.generatelink{width:100%;}
.generatelink #wrapper{margin-top:10px; width:100%; position: relative; text-align: center; }
.generatelink #export, .generatelink #preview, .generatelink #magic{text-align:center;width:200px;padding:10px 20px; cursor: pointer; cursor: hand; display: inline-block; margin: 5px; }
.generatelink #magic{margin:auto; float:none; margin-top:10px; width:300px; display:block;}
.generatelink #url, .generatelink #magicurl{ text-align:center; margin-top:10px;}
.url{text-transform:none;}
.generatelink #geturl, .generatelink #getmagicurl{padding:5px 15px; height:55px; width:90%; text-align:center;}

/*-- Meals Result Wrapper -- */
#result{width:100%;margin-bottom: 40px;margin-top:-2px;padding-top: 20px;text-transform: uppercase;text-align:center;border-top:#666 2px solid;}
#result #pay{height:40px;}
#slave{display:none;}
#totalspent{ background:url(../images/tag.png) no-repeat; background-size: contain; width:100%; max-width:550px; height:180px; margin:auto; margin-bottom:30px;}
.spenttitle{ height:18px;}
#toggleEdit{display:block; font-size:25px;}

/* hides the spin-button for firefox */
input[type=number] {-moz-appearance:textfield;}
/* hides the spin-button for chrome*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}

/*-- Colours -- */
.backgroundColor{ background-color:#404558;}
.foregroundBgColor{background-color:#F2F1D2; color:#F2F1D2;}
.divideSection{ border-top:#F2F1D2 solid 10px;}

.fontColorGreen{color:#168177;}
.fontColorGreenLight{color:#7CBF9C;}
.fontColorDescLight{color:#FFF;}
.fontColorDescDark{color:#444B5D;}

.grandtotal{color:#fff;}
.person:hover{background:#7CBF9C;}
.selected{ background:url(../images/icon_arrow.gif) no-repeat 2px 19px;}
.selected:hover{ background:url(../images/icon_arrow_hover.gif) no-repeat 4px 19px #7CBF9C;}
#fieldOption{background:#7CBF9C;}

input, textarea{background:#168177; color:#F2F1D2;}
#slaveList input{background:#474E60;}

.button{background:#474E60; color:#FFF;}
.button:hover{background:#5C657D;}

.qrborder{ text-align:center; margin-top:10px;}
.qrborder canvas{ border:#168177 10px solid; padding:15px; text-align:center; background:#FFF;}

.ignorePadding{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

@media only screen and (max-width: 800px) {
	.fontTitle{ font-size:100px; }
	.fontTitleDate{ font-size:50px; }
	.fontLabel{ font-size:20px; }
	.fontSlaveTitle{ font-size:25px; }
	.fontAction{ font-size:25px; }
	.fontInput{ font-size:20px; }
	.fontInputLarge{ font-size:35px; }
	.fontToolTitle{ font-size:35px; }
	.fontToolDesc{ font-size:20px; }
	.fontButton{ font-size:25px; }
	.fontQuote{ font-size:35px; line-height:42px }
	.fontPayTitle{ font-size:35px; }
	.fontPayAmount{ font-size:130px; line-height:170px; }
	.fontThankyou{ font-size:80px; line-height: 80px; }
	
	header #date{ margin-top:-40px; }
	.personitem{ height:40px; }
	#fieldOption .column{width:100%; height:40px; }
	
	#fieldEdit .action span:nth-child(2){ display: none; }
	#fieldEdit .action span:nth-child(3){ display: contents; }
	#additem, #addperson, #addslave, #duplicateitem{margin-right:10px; }
}

@media only screen and (max-width: 580px) {
	.fontPayTitle{ font-size:6.5vw; }
	.fontPayAmount{ font-size:24vw; line-height:28vw; }
}

@media only screen and (max-width: 450px) {
	.fontTitle{ font-size:80px; }
	.fontTitleDate{ font-size:40px; }
	.fontLabel{ font-size:20px; }
	.fontSlaveTitle{ font-size:22px; }
	.fontAction{ font-size:22px; }
	.fontInput{ font-size:20px; }
	.fontInputLarge{ font-size:32px; }
	.fontToolTitle{ font-size:30px; }
	.fontToolDesc{ font-size:20px; }
	.fontButton{ font-size:25px; }
	.fontQuote{ font-size:30px; line-height:42px }
	.fontThankyou{ font-size:50px; line-height: 50px; }
	
	header #date{ margin-top:-30px; }
}



/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Image replacement
 */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}

.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
display: none !important;
visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,.clearfix:after{
content: " "; /* 1 */
display: table; /* 2 */
}

.clearfix:after{
clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix{
*zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print{
* {
background:transparent!important;
color:#000!important;
box-shadow:none!important;
text-shadow:none!important;
}

a,a:visited {
text-decoration:underline;
}

a[href]:after {
content:" (" attr(href) ")";
}

abbr[title]:after {
content:" (" attr(title) ")";
}

.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {
content:"";
}

pre,blockquote {
border:1px solid #999;
page-break-inside:avoid;
}

thead {
display:table-header-group;
}

tr,img {
page-break-inside:avoid;
}

img {
max-width:100%!important;
}

@page {
margin:.5cm;
}

p,h2,h3 {
orphans:3;
widows:3;
}

h2,h3 {
page-break-after:avoid;
}
}