body {
	font-size: 12px;
	font-family: Arial,sans-serif;
	color: #333;
	margin: 90px 0 0;
	background: #333333;
}
textarea {
	overflow: auto;
	resize: vertical;
}
select {
	margin: 5px 0;
}
.jquery-placeholder {
	color: #afafaf !important;
}
::-webkit-input-placeholder {
	color: #afafaf;
}
:-moz-placeholder {
	color: #afafaf;
}
/************************************************************
	inputs and buttons
************************************************************/
.textarea:before,
.textarea:after,
.textarea > div:before,
.textarea > div:after {
	display: block;
	content: "";
	position: absolute;
	width: 4px;
	height: 4px;
}
.textarea:before {
	top: -4px;
	left: 0;
}
.textarea:after {
	bottom: -4px;
	left: 0;
}
.textarea > div:before {
	top: -4px;
	right: 0;
}
.textarea > div:after {
	bottom: -4px;
	right: 0;
}
.textarea {
	margin: 4px 0;
	display:inline-block;
	position: relative;
}
.textarea > div > div:before,
.textarea > div > div:after {
	content: "";
	height: 4px;
	position: absolute;
	left: 4px;
	right: 4px;
	width: auto;
	display: block;

	background: red;
}
.textarea > div > div:before {
	top: -4px;
}
.textarea > div > div:after {
	bottom: -4px;
}
.textarea textarea {
	display: block;
	margin: 0 4px;
	padding: 0 4px;
	border: 0;
	outline: none;
	font-size: 13px;
}
.input { 
	display:inline-block;
	height: 31px;
}
.input input {
	margin: 0 4px;
	padding: 0 4px;
	border: 0;
	height: 31px;
	line-height: 30px;
	outline: none;
	font-size: 13px;
}
.button { 
	display:inline-block;
	height: 31px;
	cursor: pointer;

	user-select: none;
	-0-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
.button > div { 
	height: 31px;
}
.button > div > div {
	margin: 0 8px;
	padding: 0 11px;
	height: 31px;
	line-height: 30px;
}
/*************************
	#header
*************************/
#header .input {
	background: url(../images/inputs/header-input-l.png) 0 0 no-repeat;
}
#header .input > div {
	background: url(../images/inputs/header-input-r.png) 100% 0 no-repeat;
}
#header .input input {
	background: url(../images/inputs/header-input-rep.png) 100% 100% repeat-x;
	color: #64b5de;
	font-size: 12px;
	font-weight: bold;
}
#header .button {
	background: url(../images/buttons/header-btn-l.png) 0 0 no-repeat;
}
#header .button > div {
	background: url(../images/buttons/header-btn-r.png) 100% 0 no-repeat;
}
#header .button > div > div {
	background: url(../images/buttons/header-btn-rep.png) 100% 100% repeat-x;
	text-shadow: 0 -1px rgba(0, 0, 0, 0.75);
	font-weight: bold;
	font-size: 12px;
	color: white;
}
#header .button:active {
	background: url(../images/buttons/header-btn-active-l.png) 0 0 no-repeat;
}
#header .button:active > div {
	background: url(../images/buttons/header-btn-active-r.png) 100% 0 no-repeat;
}
#header .button:active > div > div {
	background: url(../images/buttons/header-btn-active-rep.png) 100% 100% repeat-x;
}
/*************************
	#content
*************************/
#content .textarea {
	background: url(../images/inputs/content-input-sides.png) 0 0 repeat-y;
}
#content .textarea:before {
	background: url(../images/inputs/content-input-l.png) 0 0 repeat-y;
}
#content .textarea:after {
	background: url(../images/inputs/content-input-l.png) 0 100% repeat-y;
}
#content .textarea > div {
	background: url(../images/inputs/content-input-sides.png) 100% 0 repeat-y;
}
#content .textarea > div:before {
	background: url(../images/inputs/content-input-r.png) 0 0 repeat-y;
}
#content .textarea > div:after {
	background: url(../images/inputs/content-input-r.png) 0 100% repeat-y;
}
#content .textarea > div > div:before {
	background: url(../images/inputs/content-input-rep.png) 0 0 repeat-x;
}
#content .textarea > div > div:after {
	background: url(../images/inputs/content-input-rep.png) 0 100% repeat-x;
}
#content .textarea textarea {
	background: url(../images/inputs/content-input-background.png) 0 0 repeat;
	font-size: 12px;
	color: #333;
}

#content .input {
	background: url(../images/inputs/content-input-l.png) 0 0 no-repeat;
}
#content .input > div {
	background: url(../images/inputs/content-input-r.png) 100% 0 no-repeat;
}
#content .input input {
	background: url(../images/inputs/content-input-rep.png) 100% 100% repeat-x;
	font-size: 12px;
	color: #333;
}
#content .input.dis {
	opacity: 0.6;
}

#content .button {
	background: url(../images/buttons/content-btn-l.png) 0 0 no-repeat;
}
#content .button > div {
	background: url(../images/buttons/content-btn-r.png) 100% 0 no-repeat;
}
#content .button > div > div {
	background: url(../images/buttons/content-btn-rep.png) 100% 100% repeat-x;
	font-size: 12px;
	font-weight: bold;
	color: #333;
}
#content .button:active {
	background: url(../images/buttons/content-btn-active-l.png) 0 0 no-repeat;
}
#content .button:active > div {
	background: url(../images/buttons/content-btn-active-r.png) 100% 0 no-repeat;
}
#content .button:active > div > div {
	background: url(../images/buttons/content-btn-active-rep.png) 100% 100% repeat-x;
}

#content .button.pos {
	background: url(../images/buttons/content-btn-pos-l.png) 0 0 no-repeat;
}
#content .button.pos > div {
	background: url(../images/buttons/content-btn-pos-r.png) 100% 0 no-repeat;
}
#content .button.pos > div > div {
	background: url(../images/buttons/content-btn-pos-rep.png) 100% 100% repeat-x;
	text-shadow: 0 -1px rgba(0, 0, 0, 0.75);
	color: white;
}
#content .button.pos:active {
	background: url(../images/buttons/content-btn-pos-active-l.png) 0 0 no-repeat;
}
#content .button.pos:active > div {
	background: url(../images/buttons/content-btn-pos-active-r.png) 100% 0 no-repeat;
}
#content .button.pos:active > div > div {
	background: url(../images/buttons/content-btn-pos-active-rep.png) 100% 100% repeat-x;
}

#content .button.neg {
	background: url(../images/buttons/content-btn-neg-l.png) 0 0 no-repeat;
}
#content .button.neg > div {
	background: url(../images/buttons/content-btn-neg-r.png) 100% 0 no-repeat;
}
#content .button.neg > div > div {
	background: url(../images/buttons/content-btn-neg-rep.png) 100% 100% repeat-x;
	text-shadow: 0 -1px rgba(0, 0, 0, 0.75);
	color: white;
}
#content .button.neg:active {
	background: url(../images/buttons/content-btn-neg-active-l.png) 0 0 no-repeat;
}
#content .button.neg:active > div {
	background: url(../images/buttons/content-btn-neg-active-r.png) 100% 0 no-repeat;
}
#content .button.neg:active > div > div {
	background: url(../images/buttons/content-btn-neg-active-rep.png) 100% 100% repeat-x;
}


#content .button-list .button {
	background: url(../images/buttons/content-btnlist-btn-mid-l.png) 0 0 no-repeat;
}
#content .button-list .button > div {
	background: url(../images/buttons/content-btnlist-btn-mid-r.png) 100% 0 no-repeat;
}
#content .button-list .button > div > div {
	background: url(../images/buttons/content-btnlist-btn-mid-rep.png) 100% 100% repeat-x;
	font-size: 12px;
	font-weight: bold;
	color: #333;
}
#content .button-list .button:active,
#content .button-list .button.active {
	background: url(../images/buttons/content-btnlist-btn-mid-active-l.png) 0 0 no-repeat;
}
#content .button-list .button:active > div,
#content .button-list .button.active > div {
	background: url(../images/buttons/content-btnlist-btn-mid-active-r.png) 100% 0 no-repeat;
}
#content .button-list .button:active > div > div,
#content .button-list .button.active > div > div {
	background: url(../images/buttons/content-btnlist-btn-mid-active-rep.png) 100% 100% repeat-x;
	font-size: 12px;
	font-weight: bold;
	color: #333;
}
#content .button-list .button.first {
	background: url(../images/buttons/content-btnlist-btn-first-l.png) 0 0 no-repeat;
}
#content .button-list .button.first > div {
	background: url(../images/buttons/content-btnlist-btn-first-r.png) 100% 0 no-repeat;
}
#content .button-list .button.first > div > div {
	background: url(../images/buttons/content-btnlist-btn-first-rep.png) 100% 100% repeat-x;
	font-size: 12px;
	font-weight: bold;
	color: #333;
}
#content .button-list .button.first:active,
#content .button-list .button.first.active {
	background: url(../images/buttons/content-btnlist-btn-first-active-l.png) 0 0 no-repeat;
}
#content .button-list .button.first:active > div,
#content .button-list .button.first.active > div {
	background: url(../images/buttons/content-btnlist-btn-first-active-r.png) 100% 0 no-repeat;
}
#content .button-list .button.first:active > div > div,
#content .button-list .button.first.active > div > div {
	background: url(../images/buttons/content-btnlist-btn-first-active-rep.png) 100% 100% repeat-x;
	font-size: 12px;
	font-weight: bold;
	color: #333;
}
#content .button-list .button.last {
	background: url(../images/buttons/content-btnlist-btn-last-l.png) 0 0 no-repeat;
}
#content .button-list .button.last > div {
	background: url(../images/buttons/content-btnlist-btn-last-r.png) 100% 0 no-repeat;
}
#content .button-list .button.last > div > div {
	background: url(../images/buttons/content-btnlist-btn-last-rep.png) 100% 100% repeat-x;
	font-size: 12px;
	font-weight: bold;
	color: #333;
}
#content .button-list .button.last:active,
#content .button-list .button.last.active {
	background: url(../images/buttons/content-btnlist-btn-last-active-l.png) 0 0 no-repeat;
}
#content .button-list .button.last:active > div,
#content .button-list .button.last.active > div {
	background: url(../images/buttons/content-btnlist-btn-last-active-r.png) 100% 0 no-repeat;
}
#content .button-list .button.last:active > div > div,
#content .button-list .button.last.active > div > div {
	background: url(../images/buttons/content-btnlist-btn-last-active-rep.png) 100% 100% repeat-x;
	font-size: 12px;
	font-weight: bold;
	color: #333;
}
/************************************************************
	Icons
************************************************************/
.icon {
	position: relative;
	display: inline-block;
	width: 16px;
	height: 16px;
}
.icon.calendar {
	background-image: url(../images/icons/calendar.png);
}

/************************************************************
	wrapping and etc
************************************************************/
/*************************
	#header
*************************/
#header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	padding: 29px 0;
	height: 32px;
	width: 100%;
	border-bottom: 1px solid #003c4b;
	background: #333333;

	color: white;

	box-shadow: inset 0 -20px 20px -20px black;
	-o-box-shadow: inset 0 -20px 20px -20px black;
	-ms-box-shadow: inset 0 -20px 20px -20px black;
	-moz-box-shadow: inset 0 -20px 20px -20px black;
	-webkit-box-shadow: inset 0 -20px 20px -20px black;
}
#header a {
	color: #5BAED9;
	text-decoration: underline;
}
#header a:hover {
	text-decoration: underline;
}
#header input {
	width: 150px;
}
#header .button {
	width: 88px;
	text-align: center;
}
#header .forgot-password {
	position: absolute;
	right: 0;
	top: 37px;
}
#header > div {
	position: relative;
	margin: 0 auto;
	width: 936px;
	text-align: right;
}
#header .logo {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 256px;
	background: url(../images/header-logo.png) 50% 50% no-repeat;

	cursor: pointer;
}
#header .error-text {
	display: inline-block;
}
#header .item {
	display: inline-block;
	position: relative;
	margin-left: 6px;
}
#header .item label {
	position: absolute;
	top: -15px;
	left: 4px;
	font-size: 12px;
	color: #afafaf;
	font-weight: bold;
}
#header .button {
	margin-left: 6px;
}
/*************************
	#content
*************************/
#content .edit-mode.edit-mode-on .edit-item-off,
#content .edit-mode.edit-mode-off .edit-item-on {
	display: none !important;
}
#content .container {
	position: relative;
	margin: 0 0 12px 0;
	min-height: 216px;
}
#content .container:before {
	content: "";
	display: block;
	height: 12px;
	width: 100%;
	background:white url(../images/content-hr-top.jpg) 50% 50% no-repeat;
}
#content .container:after {
	display: block;
	content: "";
	position: absolute;
	bottom: -12px;
	left: 0;
	height: 12px;
	width: 100%;
	background:white url(../images/content-hr-bottom.jpg) 50% 50% repeat;
}
#content .container > div {
	margin: 0 auto;
	padding: 52px 0;
	width: 936px;
}
#content .container > div h2 {
	margin: -12px 0 36px;
	padding: 0;
	font-size: 42px;
	line-height: 36px;
	text-shadow: 0 1px white;
}
#content .container > div .h2-info {
	margin: -18px 0 18px;
}
#content .container > div .h3-info {
	line-height: 21px;
	margin: 0 0 36px;
}
#content .container > div .h3-info label {
	font-weight: bold;
	display: inline-block;
	margin-right: 6px;
}
#content .container > div .h3-info span {
	display: inline-block;
	margin-right: 18px;
}
#content .container > div h3 {
	margin: -6px 0 18px;
	padding: 0;
	font-size: 18px;
}
#content .container > div > .left {
	float: left;
	width: 50%;
}
#content .container > div > .right {
	float: right;
	width: 50%;
}
#content .container > div > .left-content {
	float: left;
	width: 756px;
}
#content .container > div > .right-navigation {
	float: right;
	width: 143px;
}
#content .container > div.error,
#content .container > div > .error {
	position: absolute !important;
	top: 12px;
	bottom: 0;
	left: 0;

	padding: 48px 0;

	width: 100%;
	height: auto;

	background: black;
	background: rgba(0, 0, 0, .85);
	
	color: white;
	font-size:16px;
	text-align:center;
}
#content .container > div.error p,
#content .container > div > .error p {
	line-height: 22px;
}
#content .container > div.error h3,
#content .container > div > .error h3 {
	font-size: 30px;
}
#content .container > div.error .button,
#content .container > div > .error .button {
	margin: 0 6px;
	width: 144px;
}
#content .container > div > .left-content > .item {
	width: 100%;
	height: 54px;
	margin-bottom: 6px;

	border-radius: 6px;
	background: white;

	color: #266f95;
	font-size: 18px;
	cursor: pointer;
	
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
	-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
	-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);

}
#content .container > div > .left-content > .item.dimmed {
	color: #c9dbe4;
}
#content .container > div > .left-content > .item:active {
	background: #eaeaea;
}
#content .container > div > .left-content > .item > div {
	padding: 10px;
	float: left;
}
#content .container > div > .left-content > .item > div.name {
	width: 396px;
}
#content .container > div > .left-content > .item > div.timeleft {
	text-align:center;
}
#content .container > div > .left-content > .item label {
	font-size: 12px;
	display:block;
}

#content .container > div > .left-content > .item > div.no-commitment {
	color: black;
	font-size: 12px;
	line-height: 18px;
}
#content .container > div > .left-content > .item > div.no-commitment label {
	font-weight: bold;
}
#content .container > div > .right-navigation > .button {
	width: 100%;
	text-align:center;
}
#content .container .remove {
	vertical-align: top;
	display: inline-block;
	width: 18px;
	height: 31px;
	background: url(../images/buttons/content-btn-clear.png) 50% 50% no-repeat;

	cursor: pointer;
}
#content .container .remove:active {
	background-image: url(../images/buttons/content-btn-clear-active.png);
}

#content .container.user {
	background: #f1f2ea url(../images/content-backg-f1f2ea.png) 0% 100% repeat-x;
}
#content .container.commitment {
	background: #d1d8d9 url(../images/content-backg-d1d8d9.png) 0% 100% repeat-x;
}
#content .container.header {
	background: #f1f2ea url(../images/content-backg-f1f2ea.png) 0% 100% repeat-x;
}
#content .container.statistics {
	background: #d1d8d9 url(../images/content-backg-d1d8d9.png) 0% 100% repeat-x;
}
#content .container.commitmentType {
	background: #f1f2ea url(../images/content-backg-f1f2ea.png) 0% 100% repeat-x;
}
#content .container.commitmentSettings {
	background: #f1f2ea url(../images/content-backg-f1f2ea.png) 0% 100% repeat-x;
}
#content .container.commitmentActivity {
	background: #d1d8d9 url(../images/content-backg-d1d8d9.png) 0% 100% repeat-x;
}
#content .container.stop-participantion {
	background: #f1f2ea url(../images/content-backg-f1f2ea.png) 0% 100% repeat-x;
}
#content .container.greyblue {
	background: #d1d8d9 url(../images/content-backg-d1d8d9.png);
}
#content .container.greyyellow {
	background: #f1f2ea url(../images/content-backg-f1f2ea.png);
}
#content .container.commitmentType > div {
	position: relative;
}
/*************************
	#footer
*************************/
#footer {
	padding: 12px 0;
	color: #666666;

	box-shadow: inset 0 20px 20px -20px black;
	-o-box-shadow: inset 0 20px 20px -20px black;
	-ms-box-shadow: inset 0 20px 20px -20px black;
	-moz-box-shadow: inset 0 20px 20px -20px black;
	-webkit-box-shadow: inset 0 20px 20px -20px black;
}
#footer a {
	color: #666666;
	text-decoration: none;
}
#footer a:hover {
	text-decoration: underline;
}
#footer .lunge {
	margin: 0 auto;

	width: 192px;
	height: 81px;

	background: url(../images/lunge-logo.png);
}
#footer .comprendo {
	margin: 12px 0 0;

	text-align: center;
}
/************************************************************
	Viewers and etc
************************************************************/
#content {
	background: white;
}
/*************************
	Forgot password
*************************/
#content .forgot-password h2 {
	margin: -12px 0 36px;
	padding: 0;
	font-size: 42px;
	line-height: 36px;
}
#content .forgot-password h3 {
	margin: -6px 0 18px;
	padding: 0;
	font-size: 18px;
}
#content .forgot-password > div {
	width: 450px;
	margin: 0 auto;
	padding: 38px 0;
}
#content .forgot-password .button {
	vertical-align: top;
	margin:0 0 0 6px;
}
#content .forgot-password .error-text {
	margin:6px 0 0;
	color: #cc0000;
	font-weight: bold;
}
/*************************
	create user (index)
*************************/
#content .create-user.index {
	position: relative;
	background: url( ../images/charming-guy-sleeping.jpg ) 44px 100% no-repeat;
	height: 944px;
	width: 936px;
	margin: 0 auto;
}
#content .create-user.index form {
	position: absolute;
	top: 44px;
	left: 515px;
}
#content .create-user.index .hello h2 {
	display: inline-block;
	margin: 0 6px 0 0;
	padding: 0;
	width: 165px;
	font-size: 60px;
	text-align:right;
}
#content .create-user.index .hello h3 {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: normal;
	width: 250px;
}
#content .create-user.index .wrap {
	margin-bottom: 6px;
}
#content .create-user.index form label {
	margin: 0 6px 0 0;
	display: inline-block;
	width: 165px;
	text-align:right;
}
#content .create-user.index form .error label {
	font-weight: bold;
	color: #cc0000;
}
#content .create-user.index form input {
	width: 234px;
}
#content .create-user.index form label.l2 {
	width: 30px;
}
#content .create-user.index form select {
	width: 107px;
}
#content .create-user.index .error-text {
	margin-left:191px;
	width: 200px;
	color: #cc0000;
	font-weight: bold;
}
#content .create-user.index .button {
	float: right;
}
/*************************
	Profile Page
*************************/
#content .profile-page .user form {
	position: relative;
}
#content .profile-page .user form > .profileImage {
	float: left;
	width: 160px;
}
#content .profile-page .user form > .column {
	float: left;
	margin-left: 36px;
	width: 163px;
}
#content .profile-page .user form > .profileImage {
	position: relative;
	float: left;
	width: 160px;

	user-select: none;
	-0-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
#content .profile-page .user form > .profileImage > div.image {
	width: 150px;
	height: 150px;

	border: 5px solid white;

	background-color: white;
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;

	box-shadow: 0 2px 13px rgba(0, 0, 0, 0.4);
	-o-box-shadow: 0 2px 13px rgba(0, 0, 0, 0.4);
	-ms-box-shadow: 0 2px 13px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 2px 13px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 2px 13px rgba(0, 0, 0, 0.4);
}
#content .profile-page .user form > .profileImage > div.change {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#content .profile-page .user form > .profileImage > div.change span {
	position: absolute;
	bottom: 18px; 
	left: 50%;
	margin: 0 -45px;

	width: 90px;
	line-height: 22px;
	height: 22px;
	background: #636363;

	color: white;
	font-weight: normal;
	text-shadow: 0 -1px rgba(0, 0, 0, 0.75);

	border-radius: 5px;

	text-align:center;

	cursor: pointer;
}
#content .profile-page .user form label {
	font-size: 12px;
	display: block;
}
#content .profile-page .user form .error label {
	color: #cc0000;
}
#content .profile-page .user form .error-text {
	color: #cc0000;
}
#content .profile-page .user form .edit-item-off {
	line-height: 22px;
	font-size:18px;
	height: 43px;
}
#content .profile-page .user form .input {
	margin-bottom: 12px;
}
#content .profile-page .user form input {
	width: 155px;
}
#content .profile-page .user form select {
	margin-bottom: 23px;
}
#content .profile-page .user form .edit-button {
	position: absolute;
	top: 72px;
	right: 0;
	width: 143px;
	text-align:center;
}
#content .profile-page .user form .remove-profile {
	position: absolute;
	bottom: 18px;
	right: 0;
	width: 143px;
	text-align:center;
}


/*************************
	Commitment Page
*************************/
#content .commitment-page .container.header > div {
	position: relative;
}
#content .commitment-page .button.share-button {
	position: absolute;
	top: 72px;
	right: 0;
	width: 143px;
	text-align:center;
}
#content .commitment-page .participants .item {
	display: inline-block;
	width: 160px;
	margin-right:18px;
	cursor: pointer;
}
#content .commitment-page .participants .profileImage {
	width: 160px;
}
#content .commitment-page .participants .profileImage > div {
	width: 150px;
	height: 150px;

	border: 5px solid white;

	background-color: white;
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;

	box-shadow: 0 2px 13px rgba(0, 0, 0, 0.4);
	-o-box-shadow: 0 2px 13px rgba(0, 0, 0, 0.4);
	-ms-box-shadow: 0 2px 13px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 2px 13px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 2px 13px rgba(0, 0, 0, 0.4);
}
#content .commitment-page .participants .name {
	margin: 12px 0 0;
	text-align:center;
}
#content .commitment-page .participants .name span {
	text-decoration: line-through;
}
#content .commitment-page .participants .name span.A {
	text-decoration: none;
}
#content .commitment-page .item.description {
	margin-bottom: 24px;
	width: 414px;
	line-height:22px;
}
#content .commitment-page table.activity-paper {
	width: 100%;
	border-radius: 6px;
	background: white;

	line-height: 31px;
	
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
	-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
	-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
}
#content .commitment-page table.activity-paper th {
	text-align: left;
	font-weight: normal;
	background:#dfdfdf;
	padding: 0 18px;
}
#content .commitment-page table.activity-paper th:first-child {
	border-top-left-radius: 6px;
}
#content .commitment-page table.activity-paper th:last-child {
	border-top-right-radius: 6px;
}
#content .commitment-page table.activity-paper tr td {
	border-top: 1px solid #afafaf;
	padding: 0 18px;
}
/*************************
	create commitment
*************************/
#content .create-commitment label {
	margin: 0 6px 0 0;
	display: inline-block;
	width: 135px;
	text-align:right;
	line-height: 31px;

	vertical-align: top;

	white-space: nowrap;
	overflow:hidden;
}
#content .create-commitment .commitmenttype {
	margin: 0 0 6px;
	display: none;
}
#content .create-commitment .templateSelector {
	margin: 0 0 6px;
	display: none;
}
#content .create-commitment .icon.calendar {
	xvertical-align: top;
	top: 3px;
	left: -23px;
}
#content .create-commitment .targetunit {
	margin: 0 0 6px;
	display: none;
}
#content .create-commitment .targetunit .input {
	margin-right: 6px;
}
#content .create-commitment .targetunit input {
	text-align:right;
	width: 18px;
}
#content .create-commitment .commitmentType .button.submit {
	position: absolute;
	top: 72px;
	right: 0;
	width: 143px;
	text-align:center;
}
#content .create-commitment .left .name .input,
#content .create-commitment .left .motivation .input,
#content .create-commitment .left .gain .input {
	margin-bottom: 6px;
}
#content .create-commitment .left .name input,
#content .create-commitment .left .motivation input,
#content .create-commitment .left .gain input {
	width: 220px;
}
#content .create-commitment .left .description .textarea {
	margin-bottom: 10px;
}
#content .create-commitment .left .description textarea {
	width: 220px;
	height: 60px;
}

#content .create-commitment .participants .item {
	position: relative;
}
#content .create-commitment .participants .mobilnumber.header {
	display: inline-block;
	width: 88px;
	font-weight: bold;
}
#content .create-commitment .participants .name.header {
	display: inline-block;
	font-weight: bold;
}
#content .create-commitment .participants .mobilnumber {
	margin: 2px 6px 2px 0;
}
#content .create-commitment .participants .mobilnumber input {
	width: 72px;
}
#content .create-commitment .participants .name {
	margin: 2px 6px 2px 0;
}
#content .create-commitment .participants .name input {
	width: 220px;
}
#content .create-commitment .participants .ajax {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 96px;
	width: 31px;
	height: 31px;
	background: url(../images/ajaxload.gif) 50% 50% no-repeat;
}
#content .create-commitment .participants .error-text {
	color: #cc0000;
	margin: 6px 0 12px;
}
#content .create-commitment .participants .remove {
	margin-top: 2px;
}
/*************************
	commitment activity
*************************/
#content .container.commitmentActivity > div {
	position: relative;
}
#content .container.commitmentActivity .item.reminders {
	margin-bottom: 36px;
}
#content .container.commitmentActivity .day label {
	margin: 0 6px 0 0;
	width: 135px;
	text-align: right;
	line-height: 31px;

	vertical-align: top;
}
#content .container.commitmentActivity .day label,
#content .container.commitmentActivity .day .item,
#content .container.commitmentActivity .day .item .input {
	display: inline-block;
}
#content .container.commitmentActivity .day .input {
	margin: 2px 6px;
}
#content .container.commitmentActivity .day .remove {
	margin: 2px 18px 2px 0;
}
#content .container.commitmentActivity .time input {
	width: 34px;
	text-align:center;
}
#content .container.commitmentActivity .button.edit {
	position: absolute;
	top: 72px;
	right: 0;
	width: 143px;
	text-align:center;
}
#content .stickyFooter {
	width: 100%;
	height: 31px;
	padding: 28px 0 29px;
	background: #333333;

	color: white;
	font-size: 18px;

	line-height: 31px;
}
#content .stickyFooter > div {
	margin: 0 auto;
	width: 936px;
}
#content .stickyFooter > div > span {
	display: inline-block;
	margin-right: 36px;
}
#content .stickyFooter .button {
	float: right;
	width: 143px;
	text-align:center;
}
/*************************
	jQuery datePicker
*************************/
.jquery-datePicker {
	position:absolute;
	margin-top:-31px;
	z-index: 400;
	overflow:auto;

	background: white;
}
.jquery-datePicker table {
	border-right: 1px solid #afafaf;
	border-bottom: 1px solid #afafaf;
}
.jquery-datePicker table td {
	border-top: 1px solid #afafaf;
	border-left: 1px solid #afafaf;
}
.jquery-datePicker .m,
.jquery-datePicker .m .next,
.jquery-datePicker .m .prev {
	height: 31px;
	line-height: 31px;
	text-align:center;
}
.jquery-datePicker .d {
	width: 31px;
	height: 31px;
	line-height: 31px;
	text-align:center;
}
.jquery-datePicker .d,
.jquery-datePicker .m .next,
.jquery-datePicker .m .prev {
	cursor: pointer;
}
.jquery-datePicker .d.hover,
.jquery-datePicker .m.hover .next,
.jquery-datePicker .m.hover .prev {
	background:#efefef;
}
.jquery-datePicker .disabled,
.jquery-datePicker .disabled.hover {
	color: #afafaf;
	background:white;
}
.jquery-datePicker .selected,
.jquery-datePicker .selected.hover {
	background:#dfdfdf;
}

iframe.fusionChart {
	border: 0;
	margin: 0;
	padding: 0;
	width: 756px;
	height: 500px;
}