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


* {
	outline: none;
	padding: 0;
	margin: 0;
	}
	
HTML {
	height: 100%;
	width: 100%;
	}	
	
BODY {
	background: url('../images/bg.jpg');
	overflow: hidden;
	width: 100%;
	height: 100%;
	}	
	
#notes {
	background: url('../images/bg.jpg');
	width: 100%;
	height: 100%;
	}
	
#masonry {
	padding-top: 75px;
	padding-left: 10px;
  min-height: 100%;
	}	
	
#top {
	height: 55px;
	width: 100%;
	background: url('../images/bgTop.png') repeat-x;
	font: 12px/50px Arial, Helvetica, sans-serif;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 100;
	}	
	
#aha {
  position: absolute;
  top: 0px;
  left: 10px;
  }	
	
#logo {
	position: absolute;
	left: 60px;
	top: 0px;
	background: url('../images/logo.png') no-repeat -5px 0;
	padding-left: 76px;
	font-weight: bold;
	color: #886e52;
	text-decoration: none;
	}	
	
#topFunctions {
	left: 25%;
	margin-left: -40px;
	position: absolute;
	}	
	
#buttonArrange {
	width: 50px;
	height: 50px;
	background: url('../images/iconArrange.png') no-repeat;
	float: left;
	cursor: pointer;
	position: relative;
	z-index: 10;
	}	
	
#buttonArrange.arranged {
	background: url('../images/iconUnarrange.png') no-repeat;
	}		
	
#buttonInfo {
	width: 50px;
	height: 50px;
	background: url('../images/iconInfo.png') no-repeat;
	float: left;
	cursor: pointer;
	}
	
#topCenter {
	position: absolute;
	left: 50%;
	}
	
#buttonAdd {
	background: url('../images/iconPushpin.png') no-repeat 10px center;	
	color: #886e52;
	padding-left: 60px;
	font-weight: bold;
	}
	
#buttonCreate {
	margin-left: -85px;
	width: 230px;		
	height: 48px;
	cursor: pointer;
	}	
	
#buttonCreate:hover {
	/* background: url('../images/bgButtonAddHover.png'); */
	}	
	
#buttonAdd STRONG {
	color: #5c4a37;
	}	
	
#loginHint {
	width: 500px;
	margin-left: -250px;
	text-align: center;
	color: #886e52;	
	font-size: 11px;
	}	
	
#loginHint A {
	color: #5c4a37;	
	text-decoration: none;
	font-weight: bold;
	}
	
#loginHint A:hover {
	color: #000;	
	text-decoration: none;
	font-weight: bold;
	}				
	
#topRight {
	position: absolute;
	top: 0px;
	right: 15px;
	}	
	
#topRight #userHello {
	float: left;
	color: #886e52;
	font-weight: bold;
	padding-right: 10px;
	}	
	
#topRight #userHello SPAN {

  }
	
#topRight #userHello STRONG {
	color: #5c4a37;
	}	
	
#buttonUser {	
	height: 50px;
	width: 52px;
	background: url('../images/iconUser.png') no-repeat;
	float: right;
	cursor: pointer;
	}
	
#buttonUser.admin {
  background: url('../images/iconUserAdmin.png') no-repeat;
  }	
	
#buttonUser.active {
	background: url('../images/iconUserActive.png') no-repeat;
	}	
	
#buttonUser.admin.active {	
	background: url('../images/iconUserAdminActive.png') no-repeat;
	}
	
#userFunctions {
	position: absolute;
	top: 49px;
	right: 0px;
	background: #fff url('../images/userFunctionsLineTop.gif') no-repeat top right;
	display: none;
	padding-top: 1px;
	}	
	
#buttonUser.active #userFunctions {
	display: block;
	}		

#userFunctions UL {
	padding: 0;
	margin: 0;
	border: 1px solid #957654;
	border-top: none;
	width: 150px;
	overflow: hidden;
	}
	
#userFunctions UL LI {
	list-style-type: none;
	height: 40px;
	border-top: 1px solid #d6d6d6;
	margin-top: -1px;
	}
	
#userFunctions UL LI A {
	color: #555;
	text-decoration: none;
	height: 40px;
	line-height: 38px;
	padding: 0 20px;
	display: block;
	}		
	
#userFunctions UL LI A:hover {		
	background-color: #eeeeee;
	color: #000;
	}
	
#noAccount {
	color: #886e52;	
	font-size: 11px;
	float: left;
	}	
	
#buttonSignup {	
	float: right;
	width: 184px;
	height: 33px;
	background: url('../images/buttonSignup.png') no-repeat;
	margin-left: 20px;
	margin-top: 8px;
	text-indent: -5000px;
	cursor: pointer;
	}
	
/* DIALOG
--------------------------------------------------------------------------------------- */

#formSettings, #formLogin, #formSignup, #formForgot {
  display: none;
  }

.ui-dialog {
	width: 376px;
	}	
	
.ui-dialog-titlebar {
	background: url('../images/dialogTitle.png') no-repeat;
	height: 48px;
	font: bold 14px Arial, Helvetica, sans-serif;
	line-height: 50px;
	text-align: center;
	padding-top: 5px;
	color: #444444;
	}	
	
.big .ui-dialog-titlebar {	
	background: url('../images/dialogBigTitle.png') no-repeat;
	}

.ui-draggable .ui-dialog-titlebar {
	cursor: move;
	}	
	
#ui-dialog-title-formSignup {
	display: block;
	width: 100%;
	height: 53px;
	text-indent: -5000px;
	background: url('../images/titleRegistrierung.png') no-repeat center center;
	height: 53px;
	}	
	
#ui-dialog-title-formLogin {
	display: block;
	width: 100%;
	height: 53px;
	text-indent: -5000px;
	background: url('../images/titleLogin.png') no-repeat center center;
	height: 53px;
	}	
	
.ui-dialog-titlebar-close {
	background: url('../images/iconCloseRounded.png') no-repeat center center;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 18px;
	right: 18px;
	display: block;
	text-indent: -5000px;
	cursor: pointer !important;
	}
	
.ui-dialog-content {
	background: url('../images/dialogBottom.png') no-repeat bottom left;
	padding: 35px 30px 30px 30px;
	font: 12px/16px Arial, Helvetica, sans-serif;
	}
	
.big .ui-dialog-content {
	background: url('../images/dialogBigBottom.png') no-repeat bottom left;	
	}
	
FORM .formRow {
	margin-bottom: 15px;
	position: relative;
	}	
	
FORM LABEL {
	float: left;
	display: block;
	height: 33px;
	font: 12px Arial, Helvetica, sans-serif;
	line-height: 33px;
	color: #555555;
	width: 100px;
	padding-left: 5px;
	}	
	
FORM#formLogin LABEL {
	width: 97px;
	}
			
	
FORM LABEL.zweizeilig {
	line-height: 16px;
	margin-top: 0px;
	}	
	
FORM INPUT.text {
	width: 197px;
	height: 33px;
	background: url('../images/bgInput.gif') no-repeat;
	font: 12px Arial, Helvetica, sans-serif;	
	border: none;	
	padding: 0px 7px;
	color: #333;
	font-weight: bold;
	line-height: 33px;
	}	
	
#formSignup .formCheckbox {
	padding-top: 20px;
	padding-bottom: 15px;
	padding-left: 14px;
	}	
	
#formSettings .formCheckbox {	
	padding-top: 15px;
	padding-bottom: 5px;
	padding-left: 20px;
  }
  
#formSettings .formCheckbox LABEL {
  width: auto;
  float: left;  
  }

#loginFailed {
  text-align: center;
  margin-bottom: 20px;
  margin-top: -10px;
  line-height: 18px;
  display: none;
  }  
  
#loginFailed STRONG {
  display: block;  
  }
	
#formLogin .formCheckbox {
	padding-top: 15px;
	padding-bottom: 0px;
	padding-left: 40px;
	}	
	
#formLogin .noAccount,
#formForgot .forgot {
  text-align: center;	
  font-size: 11px;
  color: #8E8E8E;
  margin: -12px 0 23px 0;
  line-height: 14px;
  }
  
.forgot STRONG {
  color: #666;  
  }
  
#formLogin .noAccount A {
  color: #444;  
  cursor: pointer;
  }
  
#formLogin .noAccount A:hover {
  color: #000;  
	text-decoration: underline;
  }
	
.formCheckbox LABEL {
	float: left;
	font-size: 11px;
	line-height: 15px;
	color: #8e8e8e;
	width: 270px;
	padding-top: 2px;
	}		
	
#formLogin .formCheckbox LABEL {
	width: 230px;
	}		
	
#formLogin #forgotPassword {
  font-size: 11px;	
  float: right;
  margin-right: 17px;
  color: #8E8E8E;
  margin-top: 3px;
  cursor: pointer;
  }
  
#formLogin #forgotPassword:hover {
  color: #000;  
  }
	
.formCheckbox LABEL A {
	color: #444;
	text-decoration: none;
	}	
	
.formCheckbox LABEL A:hover {
	color: #222;
	text-decoration: underline;
	}	
	
.buttonSubmit {
	border: none;
	left: 50%;
	position: relative;
	cursor: pointer;
	outline: none !important;
	}	
	
.buttonSubmit:active {
	margin-top: 1px;
	margin-bottom: -1px;
	}	

#formSignup .buttonSubmit {
	width: 216px;
	height: 37px;
	background: url('../images/buttonSignup.gif') no-repeat;
	margin-left: -105px;
	}

#formSettings .buttonSubmit {
	width: 207px;
	height: 37px;
	background: url('../images/buttonSettings.gif') no-repeat;
	margin-left: -102px;
	}	
	
#formLogin .buttonSubmit {
	width: 115px;
	height: 38px;
	background: url('../images/buttonLogin.png') no-repeat;
	margin-left: -57px;
	}	
	
#formForgot .buttonSubmit {
	width: 120px;
	height: 38px;
	background: url('../images/buttonRequestPassword.gif') no-repeat;
	margin-left: -53px;
	}	
	
	
.checkboxStyled {
	display: block;
	float: left;
	width: 18px;
	height: 18px;
	background: url('../images/checkboxEmpty.png') no-repeat top left;
	margin-right: 1px;
	}

.checkboxStyled-checked {
	background: url('../images/checkboxChecked.png') no-repeat top left;
	}
	
LABEL.error {
	color: #ce8800;
	width: auto !important;
	height: auto;
	font-size: 11px;
	line-height: 15px !important;
	padding-top: 0 !important;
	margin-left: 105px;
	margin-top: 5px;
	background: url('../images/iconAlert.png') no-repeat 0 1px;
	padding-left: 14px;
	}
	
#formLogin LABEL.error {
	margin-left: 103px;
	background-position: 0 2px;
	}
	
LABEL STRONG {
	font-weight: normal;
	color: #444;
	}		
	
.formCheckbox LABEL.error {
	position: absolute;
	top: 40px;
	right: 8px;
	}	
	
.ui-widget-overlay {
	position: fixed;
	top: 0px;
	left: 0px;	
	background-color: #000;
	opacity: 0.5;
	filter: alpha(opacity=50);	
	height: 100% !important;
	width: 100% !important;
	overflow: hidden;
	}
	
#alert {
	text-align: center;
	}	
	
#alert .message {
	padding-bottom: 30px;
	color: #444;
	font-size: 12px;
	line-height: 18px;
	}	

.buttonOK {
	width: 120px;
	height: 40px;
	background: url('../images/buttonOK.png') no-repeat;
	margin-left: -60px;
	}
	
button::-moz-focus-inner,
input::-moz-focus-inner { 
  border: 0;	
	}
	
#termsAndConditions,
#termsAndConditionsLong {
  padding-top: 30px;
  padding-bottom: 40px;	
  padding-left: 40px;
  padding-right: 40px;
  display: none;
  color: #444;
  }

#termsAndConditionsLong {
  padding: 0;
  overflow: hidden !important;
  }  
  
#termsAndConditionsLong .scroll {
  height: 600px;
  padding: 40px 40px 30px 40px;
  overflow-y: auto;
  margin-right: 8px;
  margin-bottom: 9px;
  }
	
.big h2 {
  margin-top: -10px;
  padding: 0;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 30px;
  font-weight: normal;
  }	
  
.big STRONG {
  display: block;  
  margin: 20px 0 5px 0;
  color: #222;
  }
  
.big UL, .big OL {
  margin-left: 20px;  
  margin-bottom: 20px;
  }
  
.big P {
  margin-bottom: 15px;
  }  
  
.big .subtitle {
  display: block;
  margin-bottom: 3px; 
  color: #999; 
  }
	
/* ZETTEL		
--------------------------------------------------------------------------------------- */	
	
.postit {
	width: 120px !important;
	height: 120px !important;
	padding: 0 !important;
	position: absolute;
	margin-top: -5px;
	}	
	
#airplane {
	left: 160px;
	top: 100px;
	}	

.note,
#noteNew {
	box-shadow: #775735 1px 1px 2px;
	position: absolute;
	font: 11px/14px Arial, Helvetica, sans-serif;
	padding: 25px 20px 40px 20px;
	cursor: default;
	max-width: 210px;
	width: 210px;
	float: left;
	margin: 15px 10px 10px 10px;
	}
	
.noteContent {
	width: 100%;
	height: 100%;
	overflow: hidden;
	}	
	
.noteHide {
	background: none !important;
	background-color: #64513c !important;
	border: 1px solid #64513c;
	opacity: 0.2 !important;
	filter: alpha(opacity=20);		
	border-radius: 5px;
	box-shadow: none;
	}
	
.noteHide .notePin,
.noteHide IMG,
.noteHide .noteModify,
.noteHide .noteContact {
	display: none;
	}	

.noteHide	.noteContent {
	visibility: hidden;
	}	
	
.bright {
	color: #999;
	padding-bottom: 3px;
	}	
	
.noteTitle {
	font-weight: bold;
	color: #222;
	margin: 2px 0 5px 0;
	font-size: 12px;
	line-height: 14px;
	}	

.noteText {
	color: #444;
	line-height: 13px;
	}	
	
.noteFoto {
	display: block;
	width: 24px;
	height: 24px;
	position: absolute;
	bottom: 5px;
	right: 10px;
	background: url('../images/iconFoto.png') no-repeat;
	}	
	
.noteContact {
  position: absolute;
  bottom: 10px;	
  left: 14px;
  width: 24px;
  height: 24px;
  background: url('../images/icons24.png') no-repeat 0 -168px;
  }
  
.noteEdit .noteContact {
  display: none;  
  }
	
.noteContact A {
  display: block;
  width: 24px;
  height: 24px;
  font-size: 11px;
  color: #999;
  padding-left: 23px;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
  display: none;
  }
  
.noteContact A:hover {  
  color: #444;
  }
  
.noteContact:hover {
  background-position: -24px -168px;
  }
  
.noteContact:hover A {
  display: block;  
  }
  
.noteModify {
  display: block;
  position: absolute;
  top: 9px;
  right: 9px;
  width: 24px;
  height: 24px;
  background: url('../images/icons24.png') no-repeat 0 -216px;
  cursor: pointer;
  }  
  
.noteModify:hover {
  background-position: -24px -216px;  
  }
  
.noteEdit .noteModify {
  display: none;
  }
	
.draggable .notePin {
	cursor: move;
	}
	
.ui-resizable-handle {
	position: absolute;
	width: 10px;
	height: 10px;
	bottom: 0px;
	right: 0px;
	cursor: nw-resize;
	}	
	
.noteFunctions {
	position: absolute;
	top: 8px;
	right: 8px;
	display: none;
	}	
	
.noteEdit .noteFunctions {
	display: block;
	}	
	
.noteFunctions A {
	display: block;
	width: 24px;
	height: 24px;
	float: left;
	background: url('../images/icons24.png') no-repeat;
	cursor: pointer;
	}	
	
.uploadContainer,
.noteImage {
  position: absolute;
  right: 10px;
  bottom: 10px;
	cursor: pointer;
  }	
  
.noteUpload,
.noteImage {
  background: url('../images/icons24.png') no-repeat;
  display: block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: none;
	z-index: 1000;
  }
  
.noteEdit .noteUpload,
.noteImage {
  display: block;  
  }
  
.noteEdit .noteImage {
  display: none !important;  
  }

.uploading {
  position: absolute;
  bottom: 0px;  
  right: 4px;
  background: url('../images/ajax-loader.gif') no-repeat;
  width: 16px;
  height: 16px;
  opacity: 0.3;
	filter: alpha(opacity=30);	
  display: none;
  }
	
A.noteChange { background-position: 0px -24px; }
A.noteChange:hover { background-position: -24px -24px; }

A.noteDelete { background-position: 0 0; }
A.noteDelete:hover { background-position: -24px 0; }

A.noteUpload { background-position: 0 -48px; }
A.noteUpload:hover { background-position: -24px -48px; }

A.noteImage { background-position: 0 -72px; }
A.noteImage:hover { background-position: -24px -72px; }

A.uploadSuccess {
  background-position: 0px -96px;
  display: none !important;
  }
  
.noteEdit A.uploadSuccess {
  display: block !important; 
  }

.noteSave {
	position: absolute;
	bottom: 1px;
	left: 1px;
	background-color: #000;
	color: #fff;
	font-size: 11px;
	padding: 2px 6px 3px 6px;
	cursor: pointer;
	font-weight: normal;
	display: none;
	opacity: 0.5;
	filter: alpha(opacity=50);	
	width: 56px;
	text-align: center;
	}
	
.noteCancel {
	position: absolute;
	bottom: 1px;
	left: 70px;
	background-color: #000;
	color: #fff;
	font-size: 11px;
	padding: 2px 6px 3px 6px;
	cursor: pointer;
	font-weight: normal;
	display: none;
	opacity: 0.25;
	filter: alpha(opacity=25);		
	}	
	
.noteSave:hover {
	opacity: 0.65;
	filter: alpha(opacity=65);		
	}	
	
.noteCancel:hover {
	opacity: 0.3;
	filter: alpha(opacity=30);		
	}	
	
.noteEdit .noteSave,
.noteEdit .noteCancel {
	display: block;
	}
	
.charsLeft {
	display: none;		
	}
	
.noteTitleEdit {
	margin: 3px 0 4px 0px;
	}	
	
.noteTextEdit {
	margin-left: 0px;
	}	
	
.noteTitleEdit TEXTAREA {
	border: none;
	font: bold 12px Arial, Helvetica, sans-serif;	
	width: 100%;
	background: transparent;
	padding: 0;
	height: 15px;
	margin-left: -1px;
	margin-top: -1px;
	margin-bottom: 1px;
	}
	
.noteTextEdit TEXTAREA {
	width: 100%;
	border: 0px dotted #828b8c;
	background: transparent;
	resize: none;
	color: #444;
	font: normal 11px/13px Arial, Helvetica, sans-serif;
	padding: 0;	
	margin-left: -1px;	
	}	
	
#noteNew,
.noteTitleEdit,
.noteTextEdit {
	display: none;
	}	
	
.noteEdit .noteDays,
.noteEdit .noteText,
.noteEdit .noteTitle {
	display: none;
	}	
	
.noteEdit .charsLeft,
.noteEdit .noteTextEdit,
.noteEdit .noteTitleEdit {
	display: block;
	}


/* NOTE STYLES
-------------------------------------------------------------------------------------------------- */	
	
.style1 {
	background-color: #fff;
	opacity: 0.85;
	}	

.style1 .notePin {
	width: 100%;
	height: 25px;
	background: url('../images/pinTape.png') no-repeat center top;
	margin-top: -37px;
	margin-bottom: 7px;
	}	
	
/* GELB LINIERT */		

.style2 {
	background-color: #fffe97;
	opacity: 0.85;
	color: #594d34;
	}
	
.style2 .bright {
	color: #9f965a;
	}
	
.style2 .notePin {
	width: 100%;
	height: 40px;
	background: url('../images/pinYellow.png') no-repeat center top;
	margin-top: -45px;
	margin-bottom: 0px;
	}	
	
/* BLAU MIT PIN */		

.style3 {
	background-color: #cddfe2;
	opacity: 0.90;
	color: #2b3334;
	}
	
.style3 .bright {
	color: #879092;
	}
	
.style3 .notePin {
	width: 100%;
	margin-left: 7px;
	height: 35px;
	background: url('../images/pinBlue.png') no-repeat center top;
	margin-top: -45px;
	margin-bottom: 5px;
	}		
	
	
/* MISC		
--------------------------------------------------------------------------------------- */	

.left { float: left; }
.right { float: right; }
.clear { clear: both; }


.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}