@charset "UTF-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Quicksand:400,700,300);

body,html{
	width:100%;
	height:100%;
	font-family: 'Quicksand', sans-serif;
	font-weight:700;
	color:#333333;
	font-size:16px;
	background:#ececec;
}
.light{
	font-weight:400;
}
.button{
	border:none;
	background:#FF9966;
	color:#FFF;
	border-radius:8px;
	padding:8px 50px;
	display:inline-block;
	text-transform:uppercase;
	cursor:pointer;
	transition:all ease-in-out 0.4s;
}
.button.full{
	display:block;
	text-align:center;
}
.button:hover{
	background:#E08F66 !important;
}
.click{
	cursor:pointer;
}
.center{
	text-align:center !important;
}
.container{
	display:inline-block;
	width:100%;
	width:calc(100% - 30px);
	margin:5px;
	padding:10px;
	max-width:800px;
	background:#FFF;
}
.box{
	background:rgba(255,255,255,0.3);
	padding:6px;
	width:calc(100% - 12px);
	max-width:600px;
	display:inline-block;
	border-radius:12px;
	vertical-align:top;
}
.box .boxInsert{
	width:100%;
	width:calc(100% - 12px);
	padding:6px;
	height:100%;
	background:#FFF;
	display:inline-block;
	position:relative;
	border-radius:8px;
	text-align:center;
	margin:0;
}
.wide{
	padding:6px;
	width:calc(100% - 12px);
	max-width:600px;
	display:inline-block;
	border-radius:12px;
}
#coverall{
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	top:0;
	left:0;
	opacity:0;
	position:fixed;
	display:none;
	z-index:9000;
}
#busycoverall{
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	top:0;
	left:0;
	opacity:0;
	position:fixed;
	display:none;
	z-index:9010;
}

#busy{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-98px;
	margin-top:-19px;
	z-index:9011;
	display:none;
	background:url(../media/images/assets/loading.gif) no-repeat center;
	height:38px;
	width:196px;
}
.window{
	background:rgba(255,255,255,0.3);
	padding:6px;
	
	width:calc(100% - 12px);
	height:calc(100% - 12px) !important;
	max-height:650px;
	max-width:400px;
	display:inline-block;
	opacity:0;
	margin:auto;
	margin:auto;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:9001;
	border-radius:12px;
}
.window .rel{
	width:100%;
	height:100%;
	background:#FFF;
	display:inline-block;
	position:relative;
	overflow:hidden;
	border-radius:8px;
}
.window .container{
	display:inline-block;
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	margin:0 !important;
	padding:0 !important;
}
.window .block{
	display:inline-block;
	width:100%;
	height:100%;
	float:left;
	overflow:hidden;
	overflow-y:auto;
}
.window .backContainer{
	width:0px;
	height:0px;
	position:relative;
	z-index:100;
}
.window .back{
	width:50px;
	height:50px;
	top:0;
	left:0;
	display:inline-block;
	position:absolute;
	background: url(/spectrum/media/images/icons/backArrow.png) no-repeat #42B691;
	background-size:50px 50px;
	z-index:100;
	cursor:pointer;
}
.window .closeWindow{
	width:50px;
	height:50px;
	top:0;
	left:0;
	display:inline-block;
	position:absolute;
	background: url(/spectrum/media/images/icons/delete.png) no-repeat #42B691;
	background-size:50px 50px;
	z-index:100;
	cursor:pointer;
}
.prompt{
	
	
	height:0%;
	max-height:250px;
	display:inline-block;
	opacity:0;
	margin:auto;
	margin:auto;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:9001;
	background:rgba(255,255,255,0.3);
	padding:6px;
	width:calc(100% - 12px);
	max-width:400px;
	border-radius:12px;
}
.prompt .rel{
	
	
	
	position:relative;
	overflow:hidden;
	
	width:100%;
	width:calc(100% - 12px);
	padding:6px;
	height:100%;
	height:calc(100% - 26px);
	background:#FFF;
	display:inline-block;
	position:relative;
	border-radius:8px;
	text-align:center;
	margin:0;
	padding-bottom:20px;
}
.prompt .button{
	margin:6px;
}
.prompt h2{
	color:#333;
	padding-top:20px;
}

/************Page Styles************/

header{
	display:inline-block;
	height:44px;
	width:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
	background:url(../media/images/assets/navLogo.png) no-repeat center #FFF;
	background-size:44px 44px;
}
#openNav{
	display:inline-block;
	background:#F96;
	float:left;
	width:44px;
	height:44px;
	cursor:pointer;
}

nav#side{
	width:100%;
	max-width:250px;
	height:100%;
	background:#FFF;
	vertical-align:top;
	display:inline-block;
	overflow:auto;
	overflow-x:hidden;
	overflow-y:auto;
	position:fixed;
	top:0;
	left:-250px;
	z-index:20;
	transition:all ease-in-out 0.4s;
}
nav#side a{
	color:inherit;
	text-decoration:none;
}
.navOn nav#side{
	left:0;
}
#userPhoto{
	width:80px;
	height:80px;
	display:inline-block;
	vertical-align:middle;
	border-radius:100%;
	overflow:hidden;
	margin:12px;
}
#userPhoto img{
	width:100%;
}
nav#side>ul{
	list-style:none;
	display:block;
	padding:0;
}
nav#side>ul>li{
	display:block;
	padding:0 16px;
	padding-left:16px;
	transition:all ease-in-out 0.2s;
	border-left:solid 0px #FF9966;
}
nav#side>ul>li .gatewayLabel{
	display:block;
	padding:10px 6px;
	border-top:solid 2px #ECECEC;
	font-weight:400;
	text-transform:uppercase;
	font-size:1.25em;
	background:#FFF;
	transition:all ease-in-out 0.4s;
}
nav#side>ul>li .gatewayLabel:hover{
	background:#ececec;
	cursor:pointer;
}
nav#side>ul>li:first-child .gatewayLabel{
	border-top:none;
}
nav#side>ul>li.on{
	border-left:solid 5px #FF9966;
	padding-left:11px;
}
#main{
	display:inline-block;
	vertical-align:top;
	width:100%;
	height:100%;
	height:calc(100% - 44px);
	margin-top:44px;
	overflow:auto;
	overflow-x:hidden;
	overflow-y:auto;
}

/***************************/
@media screen and (min-width: 700px) {
	nav#side{
		position:static;
		top:auto;
		left:auto;
	}
	#main{
		width:80%;
		width:calc(100% - 250px);
		height:100%;
		margin-top:0;
	}
	#userPhoto{
		width:226px;
		height:226px;
	}
	header{
		display:none;
	}
}

.subMenu{
	padding:0 6px;
	margin-bottom:12px;
}

.viewPad{
	padding:24px;
}

#login{
	background:url(../media/images/bgs/mountain.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
#createAccount{
	text-align:center;
}
#login nav,#createAccount nav{
	background:#FFF;
	display:block;
	padding:10px;
	text-align:center;
}
#login nav h1,#createAccount nav h1{
	display:inline-block;
	vertical-align:middle;
	margin:0;
	margin-left:10px;
	text-transform:uppercase;
	font-size:1.6em;
	transition:all ease-in-out 0.4s;
}
#login #logo,#createAccount #logo{
	height:40px;
	display:inline-block;
	vertical-align:middle;
}
.loginContainer{
	background:rgba(255,255,255,0.3);
	padding:6px;
	
	width:calc(100% - 12px);
	height:calc(100% - 12px) !important;
	max-height:330px;
	max-width:270px;
	display:inline-block;
	margin:auto;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:9001;
	border-radius:12px;
}
.login{
	width:100%;
	height:100%;
	background:#FFF;
	display:inline-block;
	position:relative;
	overflow:hidden;
	border-radius:8px;
	text-align:center;
}
.login h2{
	text-transform:uppercase;
	font-size:2.5em;
}
.login label, .login #loginButton{
	display:none;
}
.login input{
	border:none;
	background:#ececec;
	border-radius:8px;
	padding:8px;
	display:inline-block;
	margin-bottom:20px;
	text-align:center;
}
.login #create{
	padding:15px;
	display:inline-block;
	cursor:pointer;
	color:#FFF;
	text-decoration:none;
}
.login #signup{
	background:#66CCCC;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	display:inline-block;
	color:#FFF;
}
.formMessageWrap{
	padding-top:6px;
}
#formMessage{
	background:#F96;
	display:inline-block;
	padding:6px;
	color:#FFF;
	position:top;
	left:50%;
	top:80px;
	opacity:0;
	border-radius:6px;
}

#login .verse{
	display:inline-block;
	width:calc(100% - 12px);
	text-align:center;
	padding:6px;
	position:absolute;
	bottom:0;
	left:0;
	color:#FFF;
	background:#66CB98;
}
.createAccount{
	display:block;
	padding:20px;
}
@media screen and (min-width: 600px) {
	#login nav h1,#createAccount nav h1{
		font-size:2.1875em;
	}
	#login nav,#createAccount nav{
		text-align:left;
	}
	#login #logo,#createAccount #logo{
		height:50px;
	}
}



/*Form Styles*/

.lightForm label{
	display:block;
	margin-top:6px;
	color:#333;
	text-align:left;
	text-transform:uppercase;
}	
.lightForm input{
	border:none;
	background:#ececec;
	border-radius:8px;
	padding:8px;
	display:inline-block;
	width:auto;
	width:calc(100% - 16px);
	margin-bottom:20px;
	text-align:left;
}	
.lightForm textarea{
	display:block;
	width:calc(100% - 16px);
	padding:8px;
	border:none;
	border-radius:8px;
	color:#333;
	background:#ECECEC;
	height:200px;
	resize: none;
}
.lightForm input[type=checkbox],.lightForm input[type=radio]{
	display:inline-block;
	width:auto;
	padding:6px;
	border:none;
	border-radius:10px;
	color:#FFF;
	margin-right:10px;
	vertical-align:middle;
	background:rgba(0,0,0,0.2);
}	
.lightForm .validated{
	border-right:solid 6px #66CB98 !important;
	border-radius:8px 0 0 8px !important;
	padding-right:0 !important;
}
.lightForm .unvalidated{
	border-right:solid 6px #C00 !important;
	border-radius:8px 0 0 8px !important;
	padding-right:0 !important;
}
#addPageWindow{
	margin-top:56px;
}
.switchContainer{
	display:block;
	text-align:left;
}
.switch{
	display:inline-block;
	background:none;
	padding:6px 3px;
	color:#FF9966;
	border:solid #FF9966 2px;
	border-radius:10px;
}
.switch .option{
	display:inline-block;
	background:none;
	padding:6px 10px;
	color:#FF9966;
	border-radius:6px;
	margin:0 3px;
	transition:all ease-in-out 0.4s;
	cursor:pointer;
}
.switch .option:hover{
	background:#ececec;
}

.switch .on{
	background:#FF9966;
	color:#FFF;
}
.switch .on:hover{
	background:#FF9966;
	color:#ECECEC;
}

/*Date Picker*/

.dateContainer{
	display:block;
	position:relative;
}
.datePicker{
	width:calc(100% - 64px) !important;
	height:40px !important;
	border:4px solid #ececec !important;
	border-right:none !important;
	border-radius:0 !important;
	box-shadow:none;
	background:none !important;
	display:inline-block !important;
	color:#333;
	font-size:16px !important;
	padding:0 6px !important;
	vertical-align:top;
}
.dateContainer .dateButton{
	width:48px;
	height:48px;
	display:inline-block;
	background-image: url(/spectrum/media/images/icons/datePicker.png);
	background-repeat:no-repeat;
	background-color:#ececec;
	background-size:48px 48px;
	vertical-align:top;
	position:relative;
	cursor:pointer;
	transition:all ease-in-out 0.4s;
}
.dateContainer .dateButton:hover{
	background-color:#CCC;
}
.dateContainer .datePickerWindow{
	width:100%;
	background:#465558;
	min-height:90px;
	display:none;
	position:absolute;
	top:48px;
	left:0;
	z-index:1000;
}
.datePickerWindow .left{
	background:url(/spectrum/media/images/icons/backArrow.png) no-repeat #31393C;
}
.datePickerWindow .right{
	background:url(/spectrum/media/images/icons/forwardArrow.png) no-repeat #31393C;
}
.datePickerWindow .left, .datePickerWindow .right{
	display:table-cell;
	width:30px;
	background-position:center;
	background-size:30px 30px;
	cursor:pointer;
}
.datePickerWindow .dates{
	display:table-cell;
	width:calc(100% - 66px);
}
.datePickerWindow .cal{
	padding-right:6px;
	padding-bottom:6px;
	text-align:left;
}
.datePickerWindow .date{
	display:inline-block;
	margin:6px;
	margin-right:0;
	margin-bottom:0;
	background:#FFF;
	color:#465558;
	width:calc(14.2857% - 6px);
	text-align:center;
	cursor:pointer;
}
.datePickerWindow .off{
	cursor:default !important;
	background:none !important;
}
.datePickerWindow .pick{
	width:50%;
	display:inline-block;
	float:left;
}
.datePickerWindow .radiateSelect{
	border-radius:0;
}




/*Key Value Pair*/
.kv_key, .kv_value{
	width:calc(50% - 38px) !important;
	background:rgba(255,255,255,0.3) !important;
	color:#FFF !important;
	padding:3px !important;
	margin:2px !important;
	border-radius:0 !important;
	display:inline-block !important;
	font-size:18px;
}
.keyValueButtons{
	text-align:right;
	background:#42B691;
}
.keyValueButton{
	display:inline-block;
	width:40px;
	height:40px;
	background-color:#42B691;
	cursor:pointer;
	transition:all ease-in-out 0.4s;
	border:solid 5px rgba(0,0,0,0.0);
	opacity:0.3;
}
.keyValueButton.on{
	opacity:1.0;
}
.keyValueButton:hover{
	background-color:#389779;
}
.keyValueButtons .add{
	background-image:url(../media/images/icons/add.png);
	background-repeat:no-repeat;
	background-size:30px 30px;
	background-position:5px 5px;
}
.keyValueButtons .remove{
	background-image:url(../media/images/icons/closeX.png);
	background-repeat:no-repeat;
	background-size:30px 30px;
	background-position:5px 5px;
}
.keyValueButtons .up{
	background-image:url(../media/images/icons/upArrow.png);
	background-repeat:no-repeat;
	background-size:40px 40px;
}
.keyValueButtons .down{
	background-image:url(../media/images/icons/downArrow.png);
	background-repeat:no-repeat;
	background-size:40px 40px;
}
.kv_row label{
	display:inline-block !important;
}
.keyValueLabels{
	padding-left:28px;
}
.keyValueLabel{
	width:calc(50% - 38px) !important;
	display:inline-block;
	color:#FFF;
	text-align:left;
	font-size:14px;
	padding:3px !important;
	margin:2px !important;
}


select{
	display:block;
	width:100%;
	padding:4px 0px;
	background:#fff;
	border:none;
	color:#666;
	height:40px;
	font-size:18px;
	margin-top:0px;
}
.radiateSelect select {
   background: transparent;
   -webkit-appearance: none;
   width:620px;
   width: -webkit-calc(100% + 40px);
   width: -moz-calc(100% + 40px);
	width: -ms-calc(100% + 40px);
	width: -o-calc(100% + 40px);
	width: calc(100% + 40px);
	height:100%;
	color:#FFF;
	font-size:18px;
	padding:8px;
}
.radiateSelect select option{
	background:#465558;
	cursor:pointer;
}
.lightForm .radiateSelect select option{
	background:#ececec;
}
.radiateSelect {
	width:calc(100% - 8px);
   height: 40px;
   overflow: hidden;
   border:solid 4px #FFF;
   border-radius:8px;
   background: url(/spectrum/media/images/icons/downArrow.png) no-repeat right;
   background-size:40px 40px;
   margin-bottom: 20px;
}
.lightForm .radiateSelect select {
	color:#333;
}
.selectColored{
	border:none;
   	background: url(/spectrum/media/images/icons/downArrow.png) no-repeat right #F96;
   background-size:50px 50px;
	width:100%;
}
.lightForm .selectColored{
	background-color:#ececec;
	color:#333;
}
.selectDarkColored{
	border:none;
   	background: url(/spectrum/media/images/icons/downArrow.png) no-repeat right #E08F66;
    background-size:50px 50px;
	width:100%;
}
.lightForm .selectDarkColored{
	background-color:#CCC;
	color:#333;
}

.datePickerWindow .pick .selectColored, .datePickerWindow .pick .selectDarkColored{
	 /*background-position:120% 50%;*/
     background-size:48px 48px;
}
.radiateSelect select option:hover {
	box-shadow: 0 0 10px 100px #F96 inset;
	color:#FFF;
}

	
.windowContent{
	padding-top:60px;
}
.windowContent h1{
	color:#FFF;
	font-size:1.5em;
}
.fileDrop{
	width:calc(100% - 60px);
	padding:50px 20px;
	margin:6px;
	border:dashed #42B691 4px;
	border-radius:10px;
	text-align:center;
}
.filehover
{
	border-color: #389779;
	background:#ececec;
}
.loadingContainer{
	width:calc(100% - 32px);
	margin:6px;
	padding:6px;
	border:solid #FFF 4px;
	text-align:left;
}
.loadingBar{
	width:0%;
	height:12px;
	background:#42B691;
	display:inline-block;
}

.windowPrompt{
	background:rgba(255,255,255,0.2);
	padding:10px;
	width:calc(100% - 40px);
	height:calc(100% - 20px);
	max-height:300px;
	max-width:300px;
	display:inline-block;
	opacity:0;
	margin:auto;
	margin:auto;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:9005;
}
.windowPromptContent{
	background:#31393C;
	width:calc(100% - 12px);
	height:calc(100% - 12px);
	padding:6px;
	overflow:hidden;
	overflow-y:auto;
}
.windowPromptContent h2{
	color:#FFF;
	font-size:18px;
	margin:12px 0;
}
.fileContainer{
	display:block;
}
.fileContainer input{
	width:calc(100% - 20px);
	height:40px;
	border:4px solid #FFF;
	border-radius:0;
	box-shadow:none;
	background:url(radiate/media/images/icons/upArrow.png) no-repeat;
	background-size:48px 48px;
	background-position: 100% 80px;
	display:inline-block;
	color:#FFF;
	font-size:16px;
	padding:0 6px;
	vertical-align:top;
	transition: all 0.3s ease 0s;
	cursor:pointer;
}
.fileContainer input:hover{
	background-position: right;
}
.selectFile input {
   opacity:0;
   width:620px;
   width: -webkit-calc(100% + 40px);
   width: -moz-calc(100% + 40px);
	width: -ms-calc(100% + 40px);
	width: -o-calc(100% + 40px);
	width: calc(100% + 40px);
	height:100%;
	color:#FFF;
	font-size:18px;
	padding:0 6px;
	position:absolute;
	z-index:9010;
	top:0;
	left:0;
}
.selectFile {
	/*width:200px;
   	height: 36px;*/
   	overflow: hidden;
   	/*border:solid 4px #FFF;
   	border-radius:0;*/
	position:relative;
}
.selectFile div {
	width:100%;
	height:100%;
	text-align:center;
	color:#FFF;
	padding:6px 0;
}

/*MultiSelect*/
.multiSelectContainer{
	background:rgba(0,0,0,0.4);
	border-radius:10px;
	padding:6px 0;
}
.selectedOption{
	display:none !important;
}
.multiSelectPicks{
	width:calc(100% - 20px);
	/*border:4px solid #FFF;
	border-radius:0;*/
	box-shadow:none;
	display:inline-block;
	color:#FFF;
	font-size:16px;
	padding:0 0 6px 6px;
	vertical-align:top;
	transition: all 0.3s ease 0s;
	cursor:pointer;
	overflow-x:hidden;
	overflow-y:auto;
	text-align:left;
}
.multiSelectSelection{
	background:url(../media/images/icons/closeX.png) no-repeat right #42B691;
	background-position:center right;
	background-size:30px 30px;
	display:inline-block;
	padding:6px;
	padding-right:36px;
	color:#FFF;
	margin-right:6px;
	margin-top:6px;
	border-radius:10px;
	transition:all ease-in-out 0.4s;
}
.multiSelectSelection:hover{
	background:url(../media/images/icons/closeX.png) no-repeat right #389779;
	background-position:center right;
	background-size:30px 30px;
}
.multiSelectContainer .listFilter{
	margin-top:6px;
	width:calc(100% - 24px) !important;
}
/*Counter*/
.counter{
	width:calc(100% - 66px);
	height:42px;
	border:4px solid #FFF;
	border-right:none;
	border-radius:0;
	box-shadow:none;
	background:none;
	display:inline-block;
	color:#FFF;
	font-size:16px;
	padding:0 6px;
	vertical-align:top;
}
.counterContainer{
	width:100%;
	display:inline-block;
	position:relative;
}
.counterContainer .counterButtons{
	width:50px;
	height:50px;
	display:inline-block;
	/*background: url(/radiate/media/images/icons/datePicker.png) no-repeat #FFF;
	background-size:48px 48px;*/
	vertical-align:top;
}
.counterContainer .counterButtons .up{
	width:50px;
	height:25px;
	display:inline-block;
	background: url(/radiate/media/images/icons/upArrowGrey.png) no-repeat #FFF;
	background-size:25px 25px;
	background-position:center;
	vertical-align:top;
	transition:all ease-in-out 0.4s;
}


.counterContainer .counterButtons .up:hover{
	background: url(/radiate/media/images/icons/upArrowGrey.png) no-repeat #42B691;
	background-size:25px 25px;
	background-position:center;
	color:#FFF;
}
.counterContainer .counterButtons .down{
	width:50px;
	height:25px;
	display:inline-block;
	background: url(/radiate/media/images/icons/downArrowGrey.png) no-repeat #FFF;
	background-size:25px 25px;
	background-position:center;
	vertical-align:top;
	transition:all ease-in-out 0.4s;
}
.counterContainer .counterButtons .down:hover{
	background: url(/radiate/media/images/icons/downArrowGrey.png) no-repeat #42B691;
	background-size:25px 25px;
	background-position:center;
	color:#FFF;
}
.counterContainer input{
	width:calc(100% - 70px);
	height:42px;
	border:4px solid #FFF;
	border-radius:0;
	box-shadow:none;
	background:transparent;
	display:inline-block;
	color:#FFF;
	font-size:16px;
	padding:0 6px;
	vertical-align:top;
	transition: all 0.3s ease 0s;
	cursor:pointer;
}

#colorPicker{
	width:100%;
	max-width:400px;
	height:600px;
	margin:50px 0;
}
.tabContainer{
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
	display:inline-block;
}
.tabSlider{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
.tabContainer .tabItem{
	width:100%;
	height:100%;
	display:inline-block;
	vertical-align:top;
}
.tabButton{
	background:#465558;
	text-align:center;
	padding:14px 0;
	text-transform:uppercase;
	display:inline-block;
	font-family:Arial, Helvetica, sans-serif;
	color:rgba(255,255,255,0.3);
	cursor:pointer;
	-webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */
	transition: all 0.3s ease-in-out;
}
.tabButton:hover{
	color:rgba(255,255,255,0.75);
}
.tabButton.active{
	color:#FFF;
	border-bottom:solid 4px #FFF;
	padding:14px 0 10px 0;	
}
.radiateSlider{
	display:block;
	padding:20px;
}
.radiateSlider .track{
	display:block;
	padding:4px 0;
	background:#389779;
	border-radius:8px;
}
.radiateSlider .groove{
	display:block;
	height:0;
	position:relative;
}
.radiateSlider .point{
	position:absolute;
	width:0;
	height:0;
	left:0%;
	top:0px;
}
.radiateSlider .handle{
	margin-top:-10px;
	margin-left:-10px;
	background:#fff;
	width:16px;
	height:16px;
	border-radius:100%;
	border:solid 2px #42B691;
	cursor:move;
}

#colorWheelImage{
	width:100%;
}
.colorWheel{
	display:inline-block;
	position:relative;
	width:100%;
}
.spacer {
    margin-top: 100%;
}
.spectrum {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	overflow:hidden;
	padding:0 10px;
}
.alphaWrap{
	background:url(../media/images/assets/colorAlpha.png) repeat;
	background-size:20px 20px;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:50px;
	z-index:9001;
	
}
.selectedColor{
	width:calc(100% - 50px);
	height:50px;
	background:none;
	display:inline-block;
}
.approveColor{
	width:50px;
	height:50px;
	display:inline-block;
	background:url(../media/images/icons/ok.png) no-repeat #42B691;
	background-size:40px 40px;
	background-position:5px 5px;
	cursor:pointer;
}
.colorPickerContainer{
	display:block;
}
.colorPickerContainer input{
	width:calc(100% - 20px);
	height:40px;
	border:4px solid #FFF;
	border-radius:0;
	box-shadow:none;
	display:inline-block;
	color:#FFF;
	font-size:16px;
	padding:0 6px;
	vertical-align:top;
	transition: all 0.3s ease 0s;
	cursor:pointer;
}
.colorPickerContainer input:hover{
	-moz-box-shadow:    inset 0 0 0px 4px #42B691;
   	-webkit-box-shadow: inset 0 0 0px 4px #42B691;
   	box-shadow:         inset 0 0 0px 4px #42B691;
}
#viewPort{
	position:absolute;
	top:50%;
	left:50%;
	width:16px;
	height:16px;
	border:3px solid #FFF;
	margin-left:-11px;
	margin-top:-11px;
	z-index:9000;
	border-radius:100%;
}
.mixLabel{
	width:40px;
	color:#fff;
	font-size:16px;
	display:inline-block;
	vertical-align:middle;
}
.mixValue{
	width:40px;
	color:#fff;
	font-size:16px;
	display:inline-block;
	vertical-align:middle;
}
.mixSlider{
	width:calc(100% - 80px);
	display:inline-block;
	vertical-align:middle;
}
.swatch{
	cursor:pointer;
	border:solid 4px rgba(255,255,255,0.8);
	width:40px;
	height:40px;
	display:inline-block;
	margin:5px;
}
.roundedCheck input[type=checkbox] {
	visibility: hidden;
}
.roundedCheck {
	width: 28px;
	height: 28px;
	background: #fcfff4;
	display:inline-block;
	background:none;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	border:solid #333 4px;
	position: relative;
	vertical-align:middle;
}

.roundedCheck label.check {
	padding:0;
	margin:0;
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;

}

.roundedCheck label.check:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 5px;
	left: 4px;
	border: 3px solid #333;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	
	transition: all 0.3s ease 0s;
}

.roundedCheck label.check:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.roundedCheck input[type=checkbox]:checked + label.check:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
.checkLabel{
	padding:6px;
	display:inline-block !important;
	vertical-align:middle;
	margin-top:0 !important;
}
.donateButton{
	margin-top:26px;
	background:#F96 !important;
	color:#FFF;
	text-align:center !important;
	transition:all ease-in-out 0.4s;
}
.donateButton:hover{
	background:#E08F66 !important;
}
/*Radio Button */
.roundedRadio input[type=radio] {
	visibility: hidden;
}
.roundedRadio {
	width: 28px;
	height: 28px;
	background: #fcfff4;
	display:inline-block;
	background:none;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	border:solid #FFFFFF 4px;
	position: relative;
	vertical-align:middle;
}

.roundedRadio label.check {
	padding:0;
	margin:0;
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;

}

.roundedRadio label.check:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background: #fcfff4;
	top: 5px;
	left: 5px;
	border-radius:100%;
	border-top: none;
	border-right: none;
	
	transition: all 0.3s ease 0s;
}

.roundedRadio label.check:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.roundedRadio input[type=radio]:checked + label.check:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}


/********Donations**********/
.creditCardOption{
	display:inline-block;
	width:80%;
	width:calc(100% - 12px);
	margin-top:12px;
	padding:6px;
	background:rgba(0,0,0,0.1);
	border:thin #CCC 1px;
	border-radius:12px;
	text-align:left;
}
.creditCardOption input,.creditCardOption img{
	vertical-align:middle;
	margin-right:12px;
	margin-bottom:0;
}
.creditCardOption .creditCardNumbers{
	display:inline-block;
	vertical-align:middle;
}
.creditCardOption .delete{
	display:inline-block;
	float:right;
	vertical-align:middle;
	padding:8px;
}
.creditCardOption .defaultIt{
	display:inline-block;
	float:right;
	vertical-align:middle;
	padding:8px;
	margin-right:6px;
}
.transactionItem{
	display:inline-block;
	width:80%;
	width:calc(100% - 12px);
	margin-top:12px;
	padding:6px;
	background:rgba(0,0,0,0.1);
	border:thin #CCC 1px;
	border-radius:12px;
	text-align:left;
}
.transactionItem .date,.transactionItem .amount{
	vertical-align:middle;
	margin-right:12px;
	margin-bottom:0;
	display:inline-block;
}
.transactionItem .amount{
	float:right;
}
.transactionItem .processing{
	color:#66CB98 !important;
}
.transactionItem img{
	vertical-align:middle;
	margin-right:12px;
	margin-bottom:0;
}
.transactionItem .creditCardNumbers{
	display:inline-block;
	vertical-align:middle;
	color:#999;
}
.churchPreview{
	display:inline-block;
	padding-top:6px;
	width:calc(100% - 12px);
	background:#FFF;
	border-radius:6px;
	position:relative;
	margin-top:30px;
	text-align:left;
}
.churchPhoto{
	display:inline-block;
	width:120px;
	height:120px;
	background-size:cover;
	border-radius:100%;
	margin-top:-30px;
	margin-left:6px;
	cursor:pointer;
}
.churchTitle{
	color:#F96;
	font-size:2em;
	text-transform:uppercase;
	display:inline-block;
	width:70%;
	width:calc(100% - 220px);
	padding-left:12px;
	vertical-align:top;
	cursor:pointer;
}
.followButton{
	display:block;
	padding:6px;
	border-radius:0 0 6px 6px;
	cursor:pointer;
	color:#FFF;
	text-align:center;
}
.churchPlace{
	color:#999;
	font-size:0.5em;
}
.followButton.on{
	background-color:#66CC99;
}
.followButton.off{
	background-color:#F96;
}
#addCardArea{
	display:none;
}
#churchHeader{
	display:inline-block;
	width:100%;
	height:220px;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	background-color:#F96;
}
.profileTitle{
	display:inline-block;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	background:rgba(255,255,255,0.3);
}
.profileTitle .viewTitle{
	padding-left:140px;
	padding-right:24px;
	font-size:1.1em;
	color:#FFF;
	background-color:rgba(255,153,102,0.8);
	display:inline-block;
	margin:0 !important;
	padding-top:12px;
	padding-bottom:12px;
}
.churchPhotoWrap{
	display:inline-block;
	width:80px;
	height:80px;
	padding:6px;
	border-radius:100%;
	background:rgba(255,255,255,0.3);
	overflow:hidden;
	margin-top:-70px;
	position:relative;
}
#churchPhoto{
	display:inline-block;
	width:100%;
	height:100%;
	border-radius:100%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#66CC99;
	overflow:hidden;
}
.photoEdit{
	display:inline-block;
	width:44px;
	height:44px;
	background:url(../media/images/icons/edit.png) no-repeat rgba(0,0,0,0.8);
	border:solid 4px #FFF;
	background-size:32px 32px;
	background-position:6px 6px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-26px;
	margin-top:-26px;
	cursor:pointer;
	opacity:0.0;
	transition: opacity 0.4s ease 0s;
	border-radius:100%;
}
#churchPhoto:hover .photoEdit,#churchHeader:hover .photoEdit{
	opacity:1.0;
}
.churchBox{
	display:inline-block;
	width:100%;
	width:calc(100% - 48px);
	max-width:900px;
	padding:0 24px;
}

.profilePad{
	display:inline-block;
	width:100%;
	width:calc(100% - 12px);
	padding:6px;
	max-width:1000px;	
}
.profileContent{
	display:block;
	width:100%;
	vertical-align:top;
}
.profileSide{
	display:block;
	width:100%;
	padding:6px;
	vertical-align:top;
	color:#999;
	font-size:0.8em;
}
.profileSide .boxInsert{
	text-align:left;
}
.profileSide h3{
	display:block;
	color:#333;
	border-bottom:2px solid #ececec;
}
.profileSide .button{
	margin-top:12px;
}

.billingConnection .button{
	margin:6px 3px 0 3px;
}
.billingConnection .amountDue{
	background:#ececec;
	border-radius:6px;
	overflow:hidden;
	text-align:left;
}
.billingConnection .due{
	background:#F96;
	color:#FFF;
	padding:6px;
	display:inline-block;
}
.billingConnection .amount{
	display:inline-block;
	padding:6px;
	float:right;
}
.clientListing{
	background:#FFF;
	border-radius:6px;
	overflow:hidden;
	text-align:left;
	padding:6px;
	margin-bottom:6px;
}
.clientListing .button{
	margin-right:6px;
}
.subMenu .button{
	margin-right:6px;
}
.viewTable{
	display:table;
	width:100%;
	text-align:left;
	border-collapse: collapse;
}
.viewRow{
	display:table-row;
	border-top:solid 1px #ececec;
}
.viewTable>.viewRow:first-child{
	border-top:none;
}
.viewCell{
	display:table-cell;
	padding:6px;
}
.viewKey{
	font-weight:700;
	padding-right:36px;
}
.viewValue{
	font-weight:400;
}
.modify{
	display:inline-block;
	width:30px;
	height:30px;
	background-color:#F96;
	border-radius:100%;
	margin-right:6px;
	margin-top:6px;
	transition: all 0.4s ease 0s;
}
.modify:hover{
	background-color:#E08F66 !important;
}
.modify.edit{
	background-image:url(../media/images/icons/edit.png);
	background-position:center;
	background-size:25px 25px;
}
.modify.delete{
	background-image:url(../media/images/icons/delete.png);
	background-position:center;
	background-size:25px 25px;
}
#profileBase #x_content{
	height:140px !important;
	color:#333 !important;
}
#profileBase .donateButton{
	margin: 6px 0 0 0;
}
.post{
	display:block;
	border-radius:12px;
	background:#FFF;
	padding:12px;
	margin-top:6px;
	text-align:left;
}
.postPhoto{
	display:inline-block;
	width:60px;
	height:60px;
	background-size:cover;
	background-position:center;
	border-radius:100%;
	cursor:pointer;
	vertical-align:top;
}
.postTitle{
	display:inline-block;
	margin-left:12px;
	padding:6px 0;
	vertical-align:top;
	font-size:1.2em;
	color:#F96;
}
.postContent{
	display:block;
	padding-left:72px;
}
.postAgo{
	font-size:0.7em;
	color:#999;
}
.loadMore{
	margin-top:6px;
}
.loadingPost{
	background:url(../media/images/assets/loading.gif) no-repeat center;
	height:38px;
	margin-top:6px;
}
.removePost{
	display:inline-block;
	float:right;
	width:30px;
	height:30px;
	background:url(../media/images/icons/delete.png) no-repeat center #F96;
	background-size:26px 26px;
	border-radius:100%;
	cursor:pointer;
	opacity:0.0;
	transition: opacity 0.4s ease 0s;
}
.post:hover .removePost{
	opacity:0.4;
}
.removePost:hover{
	opacity:1.0 !important;
}
.connectionBox{
	background:rgba(255,255,255,0.3);
	padding:6px;
	display:table;
	width:100%;
	border-radius:12px;
	vertical-align:top;
}
.connectionBox .connectionBoxInsert{
	width:100%;
	height:100%;
	background:#FFF;
	display:block;
	position:relative;
	border-radius:8px;
	text-align:left;
	margin:0;
	overflow:hidden;
	overflow-x:auto;
	overflow-y:hidden;
}
.mainOption,.mainMore{
	display:table-cell;
	width:120px;
	background:#FFF;
	text-align:center;
	border-radius:8px;
	padding:6px;
	transition: all 0.4s ease 0s;
	vertical-align:top;
	cursor:pointer;
}
.mainOption:hover,.mainMore:hover{
	background:#ececec;
}
.mainOption.on{
	background:#F96 !important;
	color:#FFF;
}
.mainPhotoWrap{
	display:inline-block;
	width:100px;
	height:100px;
	padding:6px;
	border-radius:100%;
	background:rgba(255,255,255,0.3);
	overflow:hidden;
	position:relative;
}
.mainMore .mainPhoto{
	background-image:url(../media/images/assets/add.png);
}
.mainPhoto{
	display:inline-block;
	width:100%;
	height:100%;
	border-radius:100%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#FFF;
	overflow:hidden;
}

.userCard{
	display:inline-block;
	border-radius:12px;
	background:#FFF;
	padding:12px;
	margin:6px;
	text-align:center;
	width:calc(100% - 36px);
	vertical-align:top;
	margin-top:30px;
}
.userPhotoWrap{
	display:inline-block;
	width:50px;
	height:50px;
	padding:6px;
	border-radius:100%;
	background:rgba(255,255,255,0.3);
	overflow:hidden;
	margin-top:-37px;
	position:relative;
}
.userPhoto{
	display:inline-block;
	width:100%;
	height:100%;
	border-radius:100%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	background-color:#66CC99;
	overflow:hidden;
}
.profileOptions{
	display:block;
	border-radius:12px;
	background:#FFF;
	text-align:left;
	margin-bottom:6px;
	overflow:hidden;
}
.profileOptions .followButton{
	display:block;
	padding:6px;
	float:none;
	margin:6px;
	border-radius:6px;
}
.profileOption{
	display:inline-block;
	background:#FFF;
	padding:16px 16px 12px 16px;
	text-transform:uppercase;
	border-bottom:solid 4px #FFF;
	transition: all 0.4s ease 0s;
	cursor:pointer;
	font-size:0.75em;
}
.profileOption:hover{
	background:#F96;
	border-bottom:solid 4px #F96;
}
.profileOption.on{
	border-bottom:solid 4px #F96;
}
.connectionDashboard{
	display:block;
	width:100%;
}
.approvalBox{
	display:inline-block;
	width:90%;
	width:calc(100% - 18px);
	max-width:512px;
	vertical-align:top;
	margin-right:6px;
	padding:6px;
	background:rgba(255,255,255,0.3);
	margin-top:6px;
	border-radius:12px;
}
.approval{
	display:inline-block;
	width:100%;
	width:calc(100% - 12px);
	max-width:500px;
	background:#FFF;
	margin-top:6px;
	padding:6px;
	border-radius:8px;
}
.approval:first-child{
	margin-top:0;
}
.approvalPhotoWrap{
	display:inline-block;
	width:60px;
	height:60px;
	padding:6px;
	border-radius:100%;
	background:rgba(255,255,255,0.3);
	overflow:hidden;
	position:relative;
	vertical-align:middle;
}
.approvalName{
	display:inline-block;
	vertical-align:middle;
	margin-left:6px;
	width:50%;
	width:calc(100% - 190px);
}
.approvalButtons{
	display:inline-block;
	vertical-align:middle;
	width:100px;
	float:right;
	margin-right:12px;
}
.approvalButtons>div{
	display:inline-block;
	width:100px;
	border-radius:6px;
	background:#ececec;
	padding:6px;
	text-align:center;
	cursor:pointer;
	transition: all 0.4s ease 0s;
}
.approvalApprove{
	background:#F96 !important;
	color:#FFF;
	margin-bottom:6px;
}
.approvalApprove:hover{
	background:#E08F66 !important;
}
.approvalDeny:hover{
	background:#CCC;
}
.findBox{
	display:block;
	vertical-align:middle;
	padding:6px;
}
.findBox input,.findBox label, .findBox div{
	display:block;
	width:100%;
	width:calc(100% - 18px);
	margin:auto;
	vertical-align:middle;
}

.findBox .radiateSelect{
	padding-right:20px;
}
.connectionBox .donateButton{
	margin:6px;
}
.page{
	display:inline-block;
	margin:6px;
	border-radius:100%;
	width:36px;
	height:36px;
	vertical-align:middle;
	text-align:center;
	background:#CCC;
	color:#FFF;
	cursor:pointer;
	transition: all 0.4s ease 0s;
	line-height:36px;
}
.page:hover{
	background:#999;
}
.page.current{
	background:#F96;
}
@media screen and (min-width: 700px) {
	.churchPhotoWrap{
		display:inline-block;
		width:200px;
		height:200px;
		margin-top:-136px;
	}
	#churchHeader{
		height:400px;
	}.profileTitle .viewTitle{
		padding-left:260px;
		font-size:1.5em;
	}
	.userCard{
		display:inline-block;
		border-radius:12px;
		background:#FFF;
		padding:12px;
		margin:6px;
		text-align:center;
		width:calc(50% - 36px);
		vertical-align:top;
		margin-top:30px;
	}
}
@media screen and (min-width: 880px) {
	.profileContent{
		display:inline-block;
		width:100%;
		width:calc(100% - 362px);
	}
	.profileSide{
		display:inline-block;
		width:300px;
	}
	.profileOptions .followButton{
		display:inline-block;
		float:right;
		margin:18px;
		min-width:80px;
		font-size:0.8em;
	}
	.profileOption{
		font-size:0.8em;
		padding:24px 24px 20px 24px;
	}
	.findBox{
		display:inline-block;
		max-width:33.3333%;
		max-width:calc(33.3333% - 12px);
	}
	.findBox input,.findBox label, .findBox div{
		display:inline-block;
		width:auto;
	}
	.findBox input{
		max-width:60px;
	}
}
@media screen and (min-width: 1200px) {
	.userCard{
		width:calc(33.3333% - 36px);
	}
}