/*-------------------- OUTLINE ---------------------*/
body{
	min-height:100%;
	width: 100%;
	margin:0;
	padding:0;
	font-family: 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	overflow-x: auto;
}

a{
	cursor: pointer;
}

div.mainArea{
	height: 100%;
	width: 100%;
	display: inline;
	position: absolute;
}
img.logo{
	width: 30px;
	padding: 10px;
	float: left;
}
div.helpArea{
	float:right;
	vertical-align: middle;
}
div.workScreen{
	width: 40%;
	height: 88%;
	float: left;
	display: inline-block;
	padding-bottom: 50px;
}
div.extraHelpContactInfo{
	float: right;
	width: 150px;
	font-size: 11px;
	vertical-align: middle;
	line-height: 18px;
	padding-left: 20px;
	color: rgb(200,200,200);
	padding-top: 7px;
}
a.underlineLink{
	border-bottom: 1px solid rgb(255,202,10);
	color: rgb(200,200,200);
}
a.underlineLink:HOVER{
	text-decoration: none;
	color: rgb(100,100,100);	
}
a.helpButton{
	background-color: rgb(225,225,225);
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: white;
	cursor: pointer;
	position: relative;
	top: 10px;
	float: left;
	margin-left: 5px;
	margin-right: 5px;
}
a.helpButton:HOVER{
	background-color: rgb(205,205,205);
	text-decoration: none;
}

/*-------------------- DEMO SCREEN ---------------------*/
div.demoScreen{
	background-color: rgb(251,251,251);
	height: 88%;
	position: relative;
	float: right;
	text-align: center;
	font-weight: bold;
	font-size: 11px;
	padding-top: 30px;
	width: 50%;
}
div.wholeScreen{
	width: 100%;
}
div.phoneDemoArea{
	height: 83%;
}
div.phoneDemoAreaInner{
	height: 100%;
	position: relative;
	text-align: center;
	display: inline-block;
}
img.demoPictureOutline{
	height: 100%;
}
div.innerPhoneDemo{
	background-color: white;
	position: absolute;
	height: 100px;
	width: 100px;
	top: 16.5%;
	left: 7.5%;
	width: 86.1%;
	height: 70.5%;
}
div.banner{
	width: 100%;
	/*background-color: rgb(120,120,120);*/
	height: 13%;
	padding-top: 10%;
	padding-bottom: 5%;
	vertical-align: middle;
	text-align: center;
	/*background-image: url("/beengo/appFrontAdmin/getHeaderImage");*/
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
div.bannerEmpty{
	background-color: rgb(238,204,45);
}
div.bannerLogo{
	height: 100%;
	min-width: 20%;
	margin-left: auto;
	margin-right: auto;
}
div.bannerLogoEmpty{
	background-color: rgb(238,204,45);
}
img.bannerLogo{
	height: 100%;
}
div.iphoneTabs{
	height: 11%;
	min-width: 100%;
	background-color: rgb(100,100,100);
	margin-top: 118%;  
}
img.settingsButton{
	height: 40%;
	position: relative;
	float: right;
	margin-right: 5%;
	margin-top: -16%;
}
a.iphoneTab{
	display: inline-block;
	min-width: 24.7%;
	margin-left: -3px;
	height: 100%;
	background-color: transparent;
	text-align: center;
	color: rgba(0,0,0,0.5);
	font: 100 10px/13px 'Raleway', 'Century Gothic','Open Sans', sans-serif;  
}
a.selectedIphoneTab{
	color: white;
}
a.iphoneTab:HOVER{
	background-color: rgba(0,0,0,0.2);
	text-decoration: none;
	cursor: pointer;
}
img.iphoneTabImg{
	height: 35%;
	max-width: 30px;
	padding-top: 15%;
	padding-bottom: 2px;
}
div.iphoneMainArea{
	height: 69%;
	position: absolute;
	width: 100%;
	/*background-color: white*/;
}
div.innerCardScreenDemoView{
	padding: 5%;
}

hr.labelBorder{
	border-top: 1px solid rgb(120,120,120);	
	margin: 0px;
	border-bottom: 0px solid;
}
hr.half{
	width: 38%;
	display: inline-block;
}
hr.third{
	width: 25%;
	margin-left: 5px;
	margin-right: 5px;
	display: inline-block;
}
img.labelBorderImage{
	width: 12%;
	display: inline-block;
	padding: 5px;
}
h1.cardAmountLabel{
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 0px;
	padding-bottom: 15px;
	margin: 0px;
	font: 100 55px/60px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
a.payNowButton{
	display: inline-block;
	width: 100%;
	background-color: rgb(136,136,136);
	color: white;
	padding-top: 5%;
	padding-bottom: 5%;
	margin-top: 20%;
	margin-bottom: 5%;
	font: 600 13px/20px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	cursor: pointer;
}
a.payNowButton:HOVER{
	text-decoration: none;
}
a.loadCardButton{
	background-color: rgb(236,236,236);
	display: inline-block;
	width: 100%;
	color: black;
	padding-top: 2%;
	padding-bottom: 2%;
	font: 100 13px/13px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	cursor: pointer;
}
a.loadCardButton:HOVER{
	text-decoration: none;
	background-color: rgb(206,206,206);
}
font.buttonSubtext{
	color: rgb(166,166,166);
	font: 100 10px/12px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}

/*-------------------- MAIN WORK AREA ---------------------*/
h1.mainWorkHeader{
	font: 100 35px/40px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}

div.workArea{
	margin-top: 10%;
	width: 100%;
	height: 100%;
}

div.designTabs{
	display: inline;
	font: 100 12px/13px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	width: 100%;
}

hr.designTabs{
	width: 100%;
	margin-top: 3px;	
	border-top: 1px solid rgb(72,196,248);
}
div.designTabNumber{
	background-color: rgb(216,216,216);
	width: 20px;
	height: 18px;
	border-radius: 10px;
	vertical-align: middle;
	text-align: center;
	color: white;
	float: left;
	margin-right: 5px;
	top: -3px;
	position: relative;
	padding-top: 2px;
}
div.designTabNumber:HOVER{
	background-color: rgb(186,186,186);
}
div.designTab{
	min-width: 10%;
	max-width: 25%;
	padding-right: 15px;
	display: inline-block;
	vertical-align: middle;
	color: rgb(176,176,176);
	padding-top: 10px;
	cursor: pointer;
}
a.link{
	color: rgb(52,176,228);
}
a.link:HOVER{
	color: rgb(32,156,208);
	text-decoration: none;
}
div.chosenDesignTabNumber{
	background-color: rgb(72,196,248);
}
div.chosenDesignTabNumber:HOVER{
	background-color: rgb(32,156,208);
}
div.chosenDesignTab{
	color: rgb(72,196,248);
}
h2.detailsHeader{
	color: black;
	font: 700 12px/15px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	margin-bottom: 0px;
}
h3.details{
	color: rgb(116,116,116);
	font: 100 12px/15px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	margin-top: 10px;
}
div.dragImageBox{
	border: 1px solid rgb(255,202,10);
	color: rgb(226,226,226);
	font: 100 32px/35px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	text-align: center;
	width: 85%;
	padding: 20px;
	display: none;
}
a.selectButton{
	background-color: rgb(255,202,10);
	color: black;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	font: 100 17px/19px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	cursor: pointer;
}
a.selectButton:HOVER{
	background-color: rgb(245,192,0);
	text-decoration: none;
}
a.nextButton{
	background-color: rgb(206,206,206);
	color: white;
	font: 100 17px/19px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	padding: 5px;
	padding-left: 30px;
	padding-right: 30px;
	position: relative;
	float: right;
	margin-top: 10px;
	margin-right: 7%;
	cursor: pointer;
}
a.nextButtonGo{
	background-color: rgb(238,204,45);
}
a.nextButton:HOVER{
	background-color: rgb(186,186,186);
	text-decoration: none;
}
a.backButton{
	background-color: rgb(206,206,206);
	color: white;
	font: 100 17px/19px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	padding: 5px;
	padding-left: 30px;
	padding-right: 30px;
	position: relative;
	float: left;
	margin-top: 10px;
	cursor: pointer;
}
a.backButton:HOVER{
	background-color: rgb(186,186,186);
	text-decoration: none;
}

div.displayChosen{
	border: 1px solid rgb(206,206,206);
	padding: 5px;
	width: 90%;
}
div.displayChosenLogoDetails{
	padding-left: 10px;
	display: inline;
}
img.displayChosenLogoImage{
	height: 50px;
	max-width: 200px;
}
div.displayChosenHeaderDetails{
	padding-left: 10px;
	display: inline;
}
img.displayChosenHeaderImage{
	height: 70px;
}
img.displayChosenAppIcon{
	height: 70px;
}
div.displayChosenAppIconDetails{
	padding-left: 10px;
	display: inline;
}
a.replaceImgButton{
	color: rgb(72,196,248);
}
a.replaceImgButton:HOVER{
	text-decoration: none;
	color: rgb(52,176,228);
}
div.brandColorBox{
	width: 18%;
	height: 70px;
	background-color: rgb(100,100,100);
	text-align: center;
	vertical-align: middle;
	color: white;
	font: 100 12px/13px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	display: inline-block;
}
div.colorBoxDetails{
	padding-left: 10px;
	float: right;
	width: 75%;
	color: rgb(156,156,156);
	font: 100 12px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	display: inline-block;
}
img.brandColorBox{
	min-width: 5px;
	height: 20px;
	position: relative;
	margin-top: 25%;
	margin-bottom: 5px;
}
div.secondaryColorBox{
	width: 10%;
	height: 30px;
	background-color: rgb(100,100,100);
	text-align: center;
	vertical-align: middle;
	color: white;
	padding-left: 4%;
	padding-right: 4%;
	padding-top: 20px;
	padding-bottom: 20px;
	font: 600 16px/16px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	display: inline-block;
}

div.homescreen{
	width: 100%;
	height: 100%;
	position: absolute;
	background-image: url("/beengo/static/images/adminResources/iphone-apps-icons.png");
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
div.appIconAreaOnHomescreen{
	width: 20%;
	height: 60px;
	position: relative;
	margin-top: 115%;
	margin-left: 52%;
	border-radius: 10px;
	color: white;
	display: block;	
	font: 500 7px/16px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
div.appIconOnHomescreen{
	width: 100%;
	height: 65%;
	background-color: rgb(238,204,45);
	border-radius: 10px;
	position: relative;
}
img.appIconOnHomescreen{
	width: 100%;
	height: 100%;
	border-radius: 10px;
}
img.logoOnLaunchScreen{
	width: 50px;
	height: 50px;
	margin-top: 40%;
	margin-left: -12%;
	position: absolute;
}
div.launchScreen{
	width: 100%;
	height: 100%;
	background-color: rgb(238,204,45);
}
img.launchImageDemo{
	width: 100%;
	height: 100%;
	margin-left: -50%;
	position: absolute;
}
div.displayChosenLaunchImageDetails{
	padding-left: 10px;
	float: right;
	width: 75%;
	color: rgb(156,156,156);
	font: 100 12px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	display: inline-block;
}
img.displayChosenLaunchImage{
	height: 70px;
}
div.displayChosenLaunchImageDetails{
	padding-left: 10px;
	float: right;
	width: 75%;
	color: rgb(156,156,156);
	font: 100 12px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	display: inline-block;
}

/* ----------------- LOCATION ----------------- */
input[type=text].field{
	width: 90%;
}

div.listView{
	width: 93%;
	height: 30%;
	min-height: 100px;
	overflow-y: auto;
	padding-top: 5px;
	padding-bottom: 5px;
}
div.smallList{
	min-height: 100px;
	max-height: 100px;
}
div.largeList{
	height: 100%;
	width: 98%;
}
hr.listViewSeperator{
	margin: 0px;
	padding: 0px;
	border-bottom-width: 0px;
}
div.listViewItem{
	width: 100%;
	cursor: pointer;
}
h3.listViewItem{
	margin: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
}
div.listViewItem:HOVER{
	background-color: rgb(240,240,240);
}
div.selectedListViewItem{
	background-color: rgb(220,220,220);
}
a.addButton{
	color: rgb(72,196,248);
}
a.addButton:HOVER{
	text-decoration: none;
	color: rgb(52,176,228);
}
a.deleteButton{
	color: rgb(182,2,2);
	float: right;
	left: -10%;
	position: relative;
}
a.deleteButton:HOVER{
	text-decoration: none;
	color: rgb(122,0,0);
}
input[type=search].searchBar{
	width: 90%;
	height: 10%;
}
div.map{
	position: absolute;
	width: 100%;
	height: 82%;
	background-color: white;
	margin-left: -10px;
	margin-right: -5px;
}

/*-------------------- NEWS ---------------------*/
textarea.field{
	resize: none;
	height: 108px;
	width: 40%;
}

div.dragMessageImage{
	float: right;
	width: 35%;
	display: inline;
	margin-right: 7%;
}

div.messageBox{
	width: 100%;
}
img.messageImage{
	width: 100%;
	height: auto;
}
div.innerMessagesDemo{
	height: 90%;
	overflow-y: auto;	
}
div.messageText{
	padding: 5px;
	background-color: rgb(230,230,230);
}
h1.messageHeadline{
	margin: 0px;
	padding: 0px;
	font: 600 12px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	text-align: left;
}
h2.messageBodyText{
	margin: 0px;
	padding: 0px;
	font: 100 12px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	text-align: left;
}
img.imgPreview{
	max-height: 150px;
}
/*-------------------- MENU ---------------------*/
div.innerMenu{
	max-height: 400px;	
	overflow: auto;
	position: relative; 
}
div.demoMenu{
	height: 99%;
	width: 100%;
	position: absolute;
	margin-left: 0px;
	overflow-y: auto;
	padding: 0px;
}
h1.menuCategory{
	font: 600 12px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 5px;
	margin: 0px;
	cursor: pointer;
}
h1.menuCategory:HOVER{
	background-color: rgb(250,250,250);
}
div.menuItems{
	background-color: rgb(230,230,230);
}
h1.menuItem{
	font: 100 12px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	margin: 0px;
}
h1.menuItemDescription{
	font: 100 12px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	margin: 0px;
	color: rgb(150,150,150);
}
hr.menuSeperator{
	margin:0px;
	padding: 0px;
	border-top: 1px solid #e1e1e1;
	border-bottom: none; 
}
hr.lightSeperator{
	border-top: 1px solid rgb(230,230,230);
}
h1.menuLanguage{
	display: inline-block;
	font: 100 12px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
h2.menuHeader{
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
}
div.menu{
	cursor: pointer;
	padding-top: 5px;
	padding-bottom: 5px;
}
div.menu:HOVER{
	
}
input[type=text].menu{
	border: none;
	-moz-box-shadow: none;  
     -webkit-box-shadow: none;  
     box-shadow: none;
     margin: 0px;
     padding: 0px;  
     width: auto;
     font: 600 14px/16px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
select.menu{
	border: none;
	margin: 0px;
	padding: 0px;
	width: 150px;
	height: 20px;
}
input[type=text].newMenuItem{
	border: none;
	background-color: transparent;
	-moz-box-shadow: none;  
     -webkit-box-shadow: none;  
     box-shadow: none;
     margin: 0px;
     padding: 0px;  
     width: auto;
     font: 600 14px/16px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}

div.menuCategories{
}
div.menuItemFields{
	background-color: #f5f5f5;
}
div.menuItem{
	padding-top:10px;
	padding-bottom:10px;
	padding-left: 65px;
}
div.menuCategory{
	
}
div.menuCategoryTitle{
	padding-left: 30px;
	padding-top:10px;
	padding-bottom:10px;
}
div.menuTitle{
	font-weight: bold;
	display: inline-block;
	padding-top:10px;
	padding-bottom:10px;
	width: 100%;
}
hr.itemMenuSeperator{
	padding:0px;
	margin: 0px 0px 0px 45px;
	padding-left:30px;
	border-bottom: none;
	border-top: 1px solid #e1e1e1;
}
div.categorySelected{
	background-color: #f5f5f5;
}
input[type=text].menuItemField{
	width: 50%;
}
input[type=text].menuItemPriceField{
	width: 20%;
	font: 100 14px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
input[type=text].menuItemDetails{
	width: 90%;
	font: 100 14px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
section.itemOrderData{
	display: inline-block;
	width: 30%;
	height: 150px;
	vertical-align: top;
}
a.openClose{
	 font: 600 20px/22px 'Century Gothic','Open Sans', sans-serif;
	 padding-right: 10px;
}
a.openClose:HOVER{
	text-decoration: none;
}
a.deleteMenuButton{
	 font: 200 13px/13px 'Century Gothic','Open Sans', sans-serif;
	 padding-right: 10px;
	 float: right;
	 color: rgb(170,170,170);
}
a.deleteMenuButton:HOVER{
	text-decoration: none;
	color: rgb(100,100,100);
}

/*-------------------- LAUNCH ---------------------*/
div.launchButton{
	width: 100%;
	text-align: center;
}
img.launchButton{
	height: 20px;
	padding-right: 8px;
	margin-top: -5px;
}
a.launchButton{
	background-color: rgb(225,225,225);
	padding-left: 20px;
	padding-right: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
	cursor: pointer;
	position: relative;
	top: 10px;
	margin-left: auto;
	margin-right: auto;
}
a.launchButton:HOVER{
	text-decoration: none;
}
a.canLaunch{
	color: black;
	background-color: rgb(255,202,10);
}
a.canLaunch:HOVER{
	background-color: rgb(245,192,0);	
}
img.notChecked{
	background-color: rgb(204,28,41);
	width: 10px;
	height: 10px;
	border-radius: 10px;
	vertical-align: middle;
	text-align: center;
	color: white;
	float: right;
	position: relative;	
	padding: 3px;
	display: inline;
	margin-top: 10px;
}
img.checked{
	background-color: rgb(91,201,236);
	width: 10px;
	height: 10px;
	border-radius: 10px;
	vertical-align: middle;
	text-align: center;
	color: white;
	float: right;
	position: relative;	
	padding: 3px;
	display: inline;
	margin-top: 10px;
}
h3.inlineListViewItem{
	display: inline-block;
	height: 20px;
	padding-top: 10px;
}

/*-------------------- FOOTER ---------------------*/
.footer{
	width: 100%;
	position: fixed;
	bottom: 0px;
	left: 0px;
}

a.footer-tab{
	margin-left: -2.7px;
	margin-right: -0.7px;
	display: inline-block;
	width: 14.25%;
	min-width: 14.25%;
	height: 100%;
	text-align: center;
	position: relative;
	color: white;
	cursor: pointer;
	vertical-align: middle;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	font-weight: 600;
	bottom: 0px;
}
a.footer-tab:HOVER{
	text-decoration: none; 
}
img.footer-tab{
	padding-left: 5px;
	padding-right: 8px;
	height: 15px;
	margin-top: -5px;
}

a.registerPage{
	background-color: rgb(72,196,248);
}
a.registerPage:AFTER{ 
	content:""; 
	position: absolute; 
	left: 100%;
	margin-right: -20px; 
	top: 0px;
	z-index: 100; 
	width: 0; 
	height: 0; 
	border-top: 19px solid transparent; 
	border-left: 13px solid white; 
	border-bottom: 19px solid transparent; 
	border-left-color: rgb(72,196,248); 
}
a.registerPage:HOVER{
	background-color: rgb(52,176,228);
}
a.registerPage:HOVER:AFTER{
	text-decoration: none; 
	border-left-color: white;
	border-left-color: rgb(52,176,228);
}

a.page1{
	background-color: rgb(72,196,248);
}
a.page1:HOVER{
	background-color: rgb(52,176,228);
}

a.selectedFooterTab{
	background-color: rgb(217,244,253);
	color: rgb(72,196,248);
}
a.selectedFooterTab:HOVER{
	background-color: rgb(207,234,243);
}
a.selectedFooterRegisterTab:AFTER{ 
	border-left-color: rgb(217,244,253); 
}
a.selectedFooterRegisterTab:HOVER:AFTER{
	border-left-color: rgb(207,234,243);
}

@media (max-height: 650px) {
	img.phoneDemoArea{
		height: 75%;
	}
	h1.cardAmountLabel{
		font: 100 35px/35px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	}
	hr.half	{
		width: 30%;
	}
	hr.third{
		width: 15%;
	}
	a.payNowButton{
		font: 600 12px/15px 'Raleway','Century Gothic','Open Sans',sans-serif;
		margin-top: 5%;
	}
	div.iphoneTabs{
		height: 13%;
	}
	div.map{
		margin-left: -6px;
		height: 80%;
		margin-top: -5%;
	}
	input[type=search].searchBar{
		height: 10px;
	}
}

/*-------------------- LOGIN ---------------------*/
div.pad{
	padding: 20px;
}
div.userArea{
	width: 100%;
	text-align: center;
	vertical-align: middle;
	padding-top: 5%;
}
a.loginButton, input[type="submit"]{
	background-color: rgb(72,196,248);
	width: 100px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
	font: 100 15px/15px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: white;
	margin-top: 10px;
	position: relative;
	display: inline-block;
}
a.loginButton:HOVER, input[type="submit"]:HOVER{
	background-color: rgb(62,186,238);
	text-decoration: none;
}
input[type="submit"]{
	/* FOR WEB2PY PASSWORD FORM	*/
	border: 0px;
	width: 200px;
}
form.resetPasswordForm{
	/* FOR WEB2PY PASSWORD FORM	*/
	margin-right: auto;
	margin-left: auto;
}
form{
	/* FOR WEB2PY PASSWORD FORM	*/
	margin-right: auto;
	margin-left: auto;
}
div.passwordResetDiv{
	width: 250px;
	margin-left: auto;
	margin-right: auto;
	color: #999999;
	font: 100 11px/18px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
div.passwordDetails{
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	width: 220px;
}
a.registerButton{
	width: auto;	
}
img.loginLogo{
	height: 50px;
	margin-top: 50px;
	margin-bottom: 30px;
}
input[type=text].loginField, input[type=password].loginField{
	width: 200px;
}
div.forgotPasswordLink{
	width: 215px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
a.forgotPasswordLink{
	color: rgb(72,196,248);
}
div.helpRegistration{
	margin-top: -10px;
}
/* ---------------- THANK YOU ----------------- */
img.processDiagram{
	width: 40px;
	padding: 20px;
	padding-bottom: 5px;
}
img.processDiagramArrow{
	width: 50px;
	padding-top: 15px;
}
div.processDiagramElement{
	width: 40px;
	display: inline-table;
	width: 100px;
	margin-right: -10px;
	margin-left: -5px;
	text-align: center;
	font: 100 13px/15px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: rgb(143,143,143);
}
img.rightPicture{
	position: absolute;
	width: 30%;
	display: inline-block;
	float: right;
	bottom: 15%;
}
div.letterArea{
	margin: 20px;
	display: inline-block;
	width: 50%;
}
div.thankYouArea{
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	
}
img.thankYouLogo{
	height: 30px;
	display: inline;
	margin-top: 20px;
	margin-bottom: 30px;
	margin-left: 20px;
}
div.header{
	
}
h1.mainThankYouHeader{
	font: 100 65px/65px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	margin-bottom: 0px;		
}
h2.thankYouHeader{
	margin-top: 0px;
	font: 100 25px/28px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: rgb(143,143,143);	
}
h3.thankYouDetails{
	font: 100 15px/18px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: rgb(143,143,143);
}

div.processDiagram{
	width: 100%;
}
hr.thankYou{
	border-top: 1px solid rgb(255,202,10);
	margin:0px;
	padding:0px;
}
div.thankYouFooter{
	display: block;
	position: absolute;
	bottom: 15%;
	width: 90%;
	margin-left: 1.5%;
}
a.link{
	color: rgb(72,196,248);
}

/* ---------------- DASHBOARD ----------------- */
div.dashboardArea{
	height: 100%;
	padding-top: 5px;
	padding-left: 20px;
}
div.fullWorkspace{
	width: 100%;
	padding-bottom: 0px;
}
div.dashboardSquare{
	width: 46%;
	height: 49%;
	margin: 10px;
	padding: 10px;
	background-color: rgb(251,251,251);
	display: inline-table;
	border: 1px solid white;
	cursor: pointer;
	position: relative;
}
div.adminDashboardSquare{
	width: 94%;
}
div.dashboardSquare:HOVER{
	border: 1px solid rgb(200,200,200);
}
h2.dashboardSquareTitle{
	font: 500 15px/18px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: rgb(72,196,248);
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	width: 50%;
	display: inline-block;
}
h2.autoSize{
	width: auto;
}
h2.chargeColor{
	color: #ffc500;
}
h2.usageColor{
	color: #13a99e;
}
h2.padSides{
	padding-left: 5px;
	padding-right: 5px;
}
a.expandImg{
	float: right;
	position: absolute;
	padding-right: 10px;
	padding-top: 6px;
	color: rgb(130,130,130);
	display: none;
	font: 500 13px/13px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	right: 30px;
	top: 10px;
}
a.expandImg:HOVER{
	color: rgb(130,130,130);
	text-decoration: none;
}
img.expandImg{
	float: right;
	height: 20px;
	width: 20px;
	display: inline;
	position: absolute;
	right: 10px;
	top: 10px;
}
div.innerDashboardSquareArea{
	width: 100%;
	height: 210px; 
	vertical-align: top;
}
div.innerMoreDashboardSquareArea{
	width: 100%;
	height: 100%; 
	vertical-align: top;
}
h1.totalFinanceAmount{
	color: black;
	display: inline;
	font: 200 70px/70px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
h1.totalFinanceCurrency{
	color: black;
	display: inline;
	font: 200 40px/40px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
div.financeArea{
	text-align: center;
	vertical-align: middle;
	padding-top: 5%;
	padding-bottom: 10%;
}
div.activeUsersTable{
	border-left: 1px solid rgb(211,211,211);
	border-bottom: 1px solid rgb(211,211,211);
	height: 80%;
	width: 95%;
	margin-left: 0%;
	position: relative;
}
div.usersTable{
	height: 90%;
	margin-top: 20px;
}
h1.usersInformation{
	font: 100 15px/20px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: gray;
	display: inline;
	margin-left: 20px;
}
div.notSelectable{
	cursor: default;
}
hr.tableLevel{
	border-top: 1px solid rgb(231,231,231);
	border-bottom: none;
	border-right: none;
	border-left: none;
	display: inline-block;
	width: 85%;
	margin: 0px;
	margin-left: 2%;
	padding-bottom: 5px;
}
div.graphScale{
	height: 33.33%;
	color: rgb(211,211,211);
	padding-left: 5px;
	border-top: 1px solid rgb(231,231,231);
}
div.graphScaleLabel{
	background-color: rgb(251,251,251);
	position: absolute;
	display: inline-block;
	margin-top: -12px;
	padding-left: 4px;
	padding-right: 4px;
}
div.xAxis{
	color: rgb(201,201,201);
}
div.xAxisField{
	width: 10%;
	display: inline-block;
	text-align: center;
}

svg.graphCanvas{
	position: absolute;
	width: 100%;
	height: 100%;	
	top: 0%;
}
svg.chargesGraphCanvas{
	position: absolute;
	width: 100%;
	height: 100%;	
	
}
svg.aboveGraphScaleLines{
	position:relative;
	margin-top: -100%;
	top: -16px;
}
div.chargesTable{
	border-bottom: 1px solid rgb(211,211,211);
	height: 80%;
	width: 95%;
	margin-left: 0%;
}
div.leftSideLine{
	border-left: 1px solid rgb(211,211,211);
}
div.scootLeft{
	margin-left: 40px;
}
svg.scootLeft{
	margin-left: 40px;
}
div.activitiesListItem{
	padding: 10px;
	width:95%;
}
h4.dateDetails{
	display: inline;
	padding-right: 10px;
	color: rgb(150,150,150);
	font: 300 13px/13px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
div.loadedItem{
	display: inline;
	color: rgb(19,169,158);
}
div.openedDashboardSquareBackground{
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	padding-left: 10%;
	padding-top: 5%;
	background-color: rgba(256,256,256,0.8);
	z-index: 100;
}
div.openedDashboardSquare{
	background-color: rgb(251,251,251);
	-moz-box-shadow: 0 1px 3px black;  
    -webkit-box-shadow: 0 1px 3px black;  
    box-shadow: 0 1px 5px gray;
    width: 80%;
    height: 70%;
    padding: 20px;
}
a.closeButton{
	float: right;
	color: rgb(72,196,248);
	height: 20px;
	display: inline-block;
	position: relative;
	padding-right: 5px;
	font: 300 18px/18px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
a.closeButton:HOVER {
	text-decoration: none;
	color: rgb(52,176,228);
}
div.periodSelector{
	position: absolute;
	float: right;
	padding-right: 10px;
	right: 16%;
	margin-top: -35px;

}
div.floatRight{
	float: right;
}
a.periodSelector{
	font: 300 14px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: gray;
	padding-right: 10px;
	padding-left: 10px;
}
a.periodSelector:HOVER{
	text-decoration: none;
	color: black;
}
a.periodSelected{
	font: 600 14px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: black
}
div.timeSelector{
	position: absolute;
	float: right;
	padding-right: 10px;
	right: 16%;
	margin-top: -35px;
}
select.timeSelector{
	height: 30px;
	font: 200 14px/14px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	width: 150px;
	margin-left: 5px;
	margin-top: 5px;
}
h1.balance{
	font: 100 70px/80px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: rgb(171,171,171);
	vertical-align: bottom;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
h1.balanceFeeLabel{
	font-size: 40px;
	line-height: 80px;
}
h2.balanceLabel{
	font: 200 20px/80px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: rgb(171,171,171);
	padding-right: 15px;
	vertical-align: middle;
	display: inline-block;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
h2.feeLabel{
	font-size: 20px;
	line-height: 80px;
}
h1.balanceCurrency{
	font: 100 40px/80px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: rgb(171,171,171);
	vertical-align: bottom;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
h1.feeLabel{
	font-size: 20px;
	line-height: 80px;
}
div.balance{
	height: 15%;
	width: 100%;
	min-height: 50px;
	margin-top: 0px;
	margin-left: 5px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
div.balanceBelowGraph{
	margin-top: 20px;
	margin-left: 20px;
}
hr.verticalLine{
  width: 1px;
  position: relative;
  display: inline; 
  height: 70%; 
  border-left: 1px solid rgb(171,171,171);
  float: left;
  margin-left: 5%;
  margin-top: 5%;
}
div.balances{
	float:left;
	display: inline;
	margin-top: 6%;
	width: 50%;
}
h1.black{
	color: black;
}
svg.financeCanvas{
	width: 60%;
	height: 30%;
}
div.leftGraph{
	display: inline;
	width: 35%;
	position: absolute;
}
h2.centerTitle{
	text-align: center;
	position: relative;
	width: 100%;
}
svg.keyCanvas{
	width: 50%;
	height: 50%;
	position: absolute;
	display: inline;
	margin-left: -10%;
}
h3.financeTitle{
	color: rgb(156,156,156);
	font: 500 13px/15px 'Raleway','Century Gothic','Open Sans',sans-serif;
}

/* ------------------- MOBILE ADMIN -------------------- */
a.footerTwoTabs, a.footerThreeTabs, a.footerFourTabs, a.footerFiveTabs{
	margin-left: 0px;
	margin-right: -4px;
	min-width: 50%;
	max-width: 50%;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 15px;
	padding-bottom: 10px;
	display: inline-table;
    background: rgb(62,186,238);
    color: rgba(0,0,0,0.3);

}
a.footerThreeTabs{
	min-width: 33.33%;
	max-width: 33.33%;
}
a.footerFourTabs{
	min-width: 25%;
	max-width: 25%;
}
a.footerFiveTabs{
	min-width: 20%;
	max-width: 20%;
}
a.selectedMobileFooterTab {
    position: relative;
    background: rgb(77,201,253);
    color: rgba(256,256,256,1);
}
.selectedMobileFooterTab:after, 
.selectedMobileFooterTab:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.selectedMobileFooterTab:HOVER{
    background-color: rgb(52,176,228);
}
.selectedMobileFooterTab:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: rgb(77,201,253);
    border-width: 15px;
    left: 50%;
    margin-left: -15px;
}
.selectedMobileFooterTab:HOVER:AFTER{
    border-bottom-color: rgb(52,176,228);
}
div.mobilePOSArea{
	text-align: center;
	padding: 5%;
}
h3.mobilePOSAreaTitle{
	color: black;
	font: 600 15px/15px 'Raleway','Century Gothic','Open Sans',sans-serif;
	display: inline-block;
	margin-top: 10px;	
	width: 40%;
}
hr.thirdMobile{
	width: 20%;
	display: inline-block;
	padding-top: 3px;
}
input[type=text].mobileAdminField,input[type=tel].mobileAdminField, select.mobileAdminField{
	width: 95%;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
	text-align: center;
	height: 35px;
	font: 300 20px/20px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
a.mobileAdminApproveButton{
	display: inline-block;
	width: 95%;
	background-color: rgb(136,136,136);
	color: white;
	padding-top: 5%;
	margin-top: 10%;
	padding-bottom: 5%;
	font: 600 20px/20px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	cursor: pointer;
}
a.mobileAdminApproveButton:HOVER{
	text-decoration: none;
}
a.mobileAdminSmallCancelButton{
	display: inline-block;
	color: white;
	padding: 10%;
	margin-right: auto;
	margin-left: auto;
	font: 600 14px/24px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	cursor: pointer;	
	background-color: #aaaaaa;
	text-align: center;
}
a.mobileAdminSmallCancelButton:HOVER{
	text-decoration: none;
	background-color: #999999;
}
div.smallMobileAdminRecentHistory{
	padding: 10px;
	vertical-align: middle;
}
div.textForMobileRecentHistory{
	width: 50%;
	display: inline-block;
	padding-left: 10px;
}
div.buttonForMobileRecentHistory{
	width: 20%;
	display: inline-block;
	padding-left: 10px;
}
input[type=number].mobileAdminAmountField{
	height: 60px;
	font: 300 50px/50px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	width: 90%;
	text-align: center;
}
div.mobileAdminBackButton{
	text-align: left;
}
a.mobileAdminBackButton{
	color: rgb(170,170,170);
	font: 600 20px/20px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	padding-left: 10px;
}
a.mobileAdminBackButton:HOVER{
	text-decoration: none;
	color: rgb(150,150,150);
}
img.mobileAdminBackButton{
	margin-right: 5px;
	height: 20px;
	margin-top: -5px;
}
img.waitingForApprovalIcon{
	margin-top: 15%;
	max-height: 100px;
}
img.waitingForApprovalSmallIcon{
	max-height: 50px;
	max-width: 20%;
	margin-top: 4.5%;
	vertical-align: top;
}
h2.waitingForApprovalText{
	color: rgb(170,170,170);
	font: 400 18px/18px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	padding-top: 10px;
}
h2.waitingForApprovalSmallText{
	color: rgb(170,170,170);
	font: 400 18px/28px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	display: inline-block;
}
h2.doneWaitingForApproval{
	color: black;
}
div.mainMobileAdminArea{
	margin-bottom: 80px; 
}
div.mobileAdminList{
	width: 97%;
	overflow-x: hidden;
}
h4.mobileAdminDetails{
	color: rgb(170,170,170);
	display: inline;
	width: 100%;
	font: 600 13px/13px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
} 
h4.mobileDetailsBlack{
	color: black;
	text-align: right;
	display: inline-block;
	max-width: 60%;
	width: 50%;
	right: 10px;
	position: absolute;
	margin-top: 3px;
}
h4.loadItems{
	margin-left: 10%;
	max-width: 60%;
	width:60%;
}
font.loadedItem{
	display: inline;
	color: rgb(19,169,158);
}
div.seeMoreButton{
	text-align: center;
}
div.activityLogHeader{
	width: 100%;
	background-color: rgb(226,226,226);
	color: rgb(127,127,127);
	text-align: center;
	margin-top: -5px;
	padding-top:5px;
}
h4.activityHeaderTitle{
	font: 600 16px/16px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: rgb(127,127,127);
}
div.mobileAdminBanner{
	height: 60px;
}
div.svgInfo{
	position: fixed;
	min-width: 50px;
	padding: 5px;
	border: 1px solid #cccccc;
	font: 100 16px/16px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	color: black;
	background-color: white;
	display: none;
	text-align: center;
	vertical-align: middle;
}
a.checkMark{
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-top: 0px; 
	color: white; 
	display: inline; 
	text-align: center; 
	vertical-align: middle;
	margin-right: 10px;
	margin-left: 20px;
}
a.checkMark:HOVER{
	text-decoration: none;
	color: #f3f3f3;
}
img.checkMark{
	height: 20px; 
	width: 20px;
	margin-top: -5px;
}
h1.checkMarkDescription{
	color: #aaaaaa;
	display: inline;
	font: 100 14px/16px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	margin-right: 20px;
}
div.innerScrollable{
	height: 90%; 
}
div.scrollable{
	height: 92%;
	overflow-y: auto;
	margin-top: 5px;
}
div.notScrollable{
	overflow: visible;
}
div.seeMoreButtonAdmin{
	position: relative;
}
h1.activityLogItemDetail{
	display: inline-block;
	width: 25%;
	font: 100 14px/16px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	text-align: center;
}
div.activityLogItemDetail{
	display: inline-block;
	width: 25%;
	font: 100 14px/16px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	text-align: center;
}
h1.dateDetails{
	color: rgb(150,150,150);
}
h1.boldDetails{
	display: inline-block;
	font: 600 14px/16px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
h1.branchesLabel{
	display: inline-block;
	color: rgb(150,150,150);
	font: 100 14px/16px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
}
select.currency{
	width: 60px;
}
input[type=number].price{
	width: 100px;
}
div.cardField{
	display: inline-block;
	width: 45%;
	padding-right: 20px;
}
div.center{
	text-align: center;
}
a.cancelButton{
	background-color: red;
	color: white;
	padding: 5px;
	padding-right: 10px;
	padding-left: 10px;
	font: 100 14px/16px 'Raleway', 'Century Gothic','Open Sans', sans-serif;
	margin-left: 10px;
}
a.cancelButton:HOVER{
	background-color: rgb(200,0,0);
	text-decoration: none;
}
div.refundArea{
	display: none;
	padding-top: 20px;
	padding-bottom: 10px;
}
a.phoneNumber{
	display: inline;
	float: right;
	margin-right: 10px;
	color: black;
}
div.mobileDashboardSquare{
	width: 80%;
	text-align: center;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	background-color: #eeeeee;
	padding: 20px;
}
hr.titleBorder{
	border-top: 1px solid rgb(180,180,180);	
	border-bottom: 0px;
	margin: 0px;
}
hr.fill{
	width: 26%;
	margin-left: 10px;
	margin-right: 10px;
	display: inline-block;
}
div.mobileDashboardTitle{
	background-color: #eeeeee;
	position: relative;
	top: -10px;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
img.deleteSettingButton{
	margin-bottom: 5px;
}
span.menuComponents{
	margin-left: 15px;
	width: 100px;
	display: inline-block;
}
span.menuOptions{
	margin-left: 40px;
	width: 100px;
	display: inline-block;
}
input[type=text].menuComponents{
	margin-left: 15px;
	width: 100px;
	display: inline-block;
}
input[type=text].menuIngredients{
	margin-left: 15px;
	width: 40%;
	display: inline-block;
}
input[type=text].menuOptions{
	margin-left: 40px;
	width: 100px;
	display: inline-block;
}
span.menuOptionPrice{
	margin-left: 55px;
	width: 100px;
	display: inline-block;
	color: gray;
}
input[type=checkbox].menuOptionDefault{
	margin-left: 60px;
}
input[type=text].menuOptionPrice{
	margin-left: 40px;
	width: 100px;
	display: inline-block;
	color: gray;
}
img.smallMenuEditingButton{
	width: 15px;
	height: 15px;
	float: right;
	margin-left: 5px;
	margin-right: 5px;
}
a.okButton{
	text-decoration: none;
	padding: 5px;
	background-color: rgb(57,180,74);
	margin-bottom: -5px;
	color:white;
	margin-left: 10px;
	border-radius: 2px;
	
}
a.okButton:HOVER{
	background-color: rgb(37,160,54);
	color: #e1e1e1;
}
a.dropDownItem{
	text-decoration: none;
	color: black;
	width: 100%;
	display: inline-block;
}
a.dropDownItem:HOVER{
	background-color: rgba(200,200,200,0.5);
}

.hide {
	display: none;
}

.hide-block {
	visibility: hidden;
}