/*
 * MEMOS GRID-VIEW
 
Copyright 2009 Palm, Inc.  All rights reserved.

*/

.notes-background {
    background: url(../images/notes-background.png) top left no-repeat !important;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: -10;
}

.notes-fade-top {
    height: 40px;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
    background: url(../images/notes-top-fade.png) repeat-x;
    -webkit-palm-mouse-target: ignore;
}

.notes-fade-bottom {
    height: 40px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 999;
    background: url(../images/notes-bottom-fade.png) repeat-x;
    -webkit-palm-mouse-target: ignore;
}

.memos-grid .memo {
    -webkit-box-sizing: border-box;
    padding: 20px;
    height: 107px;
    width: 100px;
    -webkit-user-drag: element;
	z-index: -10;
}

.memos-grid .memo .text {
    font-size: 14px;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #252525;
}

.memos-grid .pad {
    -webkit-box-sizing: border-box;
    background: url(../images/memos-grid-note-pad.png) no-repeat;
    font-size: 16px;
    text-align: center;
    color: #bab269;
    text-transform: uppercase;
    -webkit-user-drag: none;
	padding: 24px 14px 0 14px;
}

#noteGrid {
	padding-left: 4px;
	padding-top: 3px;
}
#noteGrid table {
	table-layout: fixed;
}
#noteGrid table tr {
	height: 119px;
}
#noteGrid table tr td {
	width: 100px;
}

/*
 * This element is used for a note which we cannot see, but is still layed out correctly.
 * It is used for working out the optimal font size for notes.
 */
.memos-grid .formatter {
    position: absolute;
    visibility: hidden;
}

.memos-grid .memo.blue {
	background: url(../images/memos-grid-note-blue-press.png);
	background: url(../images/memos-grid-note-blue-reorder.png);
    background: url(../images/memos-grid-note-blue.png) bottom no-repeat;
}
.memos-grid .memo.pink {
	background: url(../images/memos-grid-note-pink-press.png);
	background: url(../images/memos-grid-note-pink-reorder.png);
    background: url(../images/memos-grid-note-pink.png) bottom no-repeat;
}
.memos-grid .memo.green {
	background: url(../images/memos-grid-note-green-press.png);
	background: url(../images/memos-grid-note-green-reorder.png);
    background: url(../images/memos-grid-note-green.png) bottom no-repeat;
}
.memos-grid .memo.yellow {
	background: url(../images/memos-grid-note-yellow-press.png);
	background: url(../images/memos-grid-note-yellow-reorder.png);
    background: url(../images/memos-grid-note-yellow.png) bottom no-repeat;
}

.memos-grid .selected .memo.blue  {
    background: url(../images/memos-grid-note-blue-press.png) bottom no-repeat;
}
.memos-grid .selected .memo.pink {
    background: url(../images/memos-grid-note-pink-press.png) bottom no-repeat;
}
.memos-grid .selected .memo.green {
    background: url(../images/memos-grid-note-green-press.png) bottom no-repeat;
}
.memos-grid .selected .memo.yellow {
    background: url(../images/memos-grid-note-yellow-press.png) bottom no-repeat;
}


.memos-grid .grid-dragging .memo {
	margin-left: -15px;
	margin-top: -10px;
    height: 128px;
    width: 128px;
}
.memos-grid .grid-dragging .memo.blue {
    background: url(../images/memos-grid-note-blue-reorder.png) bottom no-repeat;
}
.memos-grid .grid-dragging .memo.pink {
    background: url(../images/memos-grid-note-pink-reorder.png) bottom no-repeat;
}
.memos-grid .grid-dragging .memo.green {
    background: url(../images/memos-grid-note-green-reorder.png) bottom no-repeat;
}
.memos-grid .grid-dragging .memo.yellow {
    background: url(../images/memos-grid-note-yellow-reorder.png) bottom no-repeat;
}

/*
 * MEMOS NOTE-VIEW
 */
.memos-note {
    width: 100%;
    height: 100%;
}

.memos-note .memos-note-backdrop {
    position: fixed;
    background: none top left no-repeat;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -5;
}

.memos-note.yellow .memos-note-backdrop {
    background-image: url(../images/memos-sheet-backdrop.png);
}

.memos-note.pink .memos-note-backdrop {
    background-image: url(../images/memos-sheet-backdrop-pink.png);
}

.memos-note.green .memos-note-backdrop {
    background-image: url(../images/memos-sheet-backdrop-green.png);
}

.memos-note.blue .memos-note-backdrop {
    background-image: url(../images/memos-sheet-backdrop-blue.png);
}

.memos-note .top-gradient {
    position: fixed;
    background: none bottom left no-repeat;
    top: 0px;
    left: 0px;
    height: 25px;
    width: 100%;
    z-index: 1;
}

.memos-note.yellow .top-gradient {
    background-image: url(../images/command-menu-gradient-top-yellow.png);
}
.memos-note.green .top-gradient {
    background-image: url(../images/command-menu-gradient-top-green.png);
}
.memos-note.blue .top-gradient {
    background-image: url(../images/command-menu-gradient-top-blue.png);
}
.memos-note.pink .top-gradient {
    background-image: url(../images/command-menu-gradient-top-pink.png);
}

.memos-note .bottom-gradient {
    position: fixed;
    background: none top left no-repeat;
    bottom: 0px;
    left: 0px;
    height: 25px;
    width: 100%;
    z-index: 1;
}
.memos-note.yellow .bottom-gradient {
    background-image: url(../images/command-menu-gradient-yellow.png);
}
.memos-note.green .bottom-gradient {
    background-image: url(../images/command-menu-gradient-green.png);
}
.memos-note.blue .bottom-gradient {
    background-image: url(../images/command-menu-gradient-blue.png);
}
.memos-note.pink .bottom-gradient {
    background-image: url(../images/command-menu-gradient-pink.png);
}

.memos-note .details {
    position: fixed;
    background: none top left no-repeat;
    right: 0px;
    bottom: 0px;
    width: 60px;
    height: 69px;
    z-index: 10;
}

.memos-note.yellow .details {
    background-image: url(../images/memos-sheet-corner-no-rollup.png);
}
.memos-note.pink .details {
    background-image: url(../images/memos-sheet-corner-no-rollup-pink.png);
}
.memos-note.green .details {
    background-image: url(../images/memos-sheet-corner-no-rollup-green.png);
}
.memos-note.blue .details {
    background-image: url(../images/memos-sheet-corner-no-rollup-blue.png);
}

.memos-note .details .checkboxes {
    display: none;
}

.memos-note.show-details .details {
    left: 0px;
    width: 100%;
    height: 138px;
}

.memos-note.yellow.show-details .details {
    background-image: url(../images/memos-sheet-corner-rollup.png);
}
.memos-note.pink.show-details .details {
    background-image: url(../images/memos-sheet-corner-rollup-pink.png);
}
.memos-note.green.show-details .details {
    background-image: url(../images/memos-sheet-corner-rollup-green.png);
}
.memos-note.blue.show-details .details {
    background-image: url(../images/memos-sheet-corner-rollup-blue.png);
}

.memos-note.show-details .details .checkboxes {
    display: block;
    height: 30px;
    width: 200px;
    margin: 80px auto 28px auto;
}
.memos-note .details .checkboxes .blue,
.memos-note .details .checkboxes .yellow,
.memos-note .details .checkboxes .pink,
.memos-note .details .checkboxes .green {
	padding:15px 5px 30px 10px;
	margin-top:-10px;
	margin-right:-5px;
}

.memos-note .details .checkbox {
    background-position: center 2px;	
    height: 31px;
    width: 36px;
}

.memos-note .details .checkbox.true {
    background-position: bottom;	
    height: 31px;
}

.memos-note .details .blue .checkbox {
    background-image: url(../images/checkbox-solid-blue.png);
}

.memos-note .details .yellow .checkbox {
    background-image: url(../images/checkbox-solid-yellow.png);
}

.memos-note .details .pink .checkbox {
    background-image: url(../images/checkbox-solid-pink.png);
}

.memos-note .details .green .checkbox {
    background-image: url(../images/checkbox-solid-green.png);
}

#noteText {                                                                                                                                                                                                                    
    position: relative;                                                                                                                                                                                                        
}                                                                                                                                                                                                                              
                                                                                                                                                                                                                               
#noteText .editable {                                                                                                                                                                                                          
	padding-left: 15px;                                                                                                                                                                                                    
	padding-right: 15px;                                                                                                                                                                                                   
	max-width: 92%;                                                                                                                                                                                                        
}                                                                                                                                                                                                                              
                                                                                                                                                                                                                               
#noteText .palm-textfield-disabled {                                                                                                                                                                                           
	padding-top: 13px;                                                                                                                                                                                                     
	padding-left: 15px;                                                                                                                                                                                                    
	padding-right: 15px;                                                                                                                                                                                                   
	max-width: 92%;                                                                                                                                                                                                        
} 

#noteText .hint-text {
	margin-top: 12px; 
	margin-left: 14px; 
}

.memos-grid .image-preloader {
	display: none;
	background-image: url(../images/memos-sheet-backdrop.png);
	background-image: url(../images/memos-sheet-backdrop-green.png);
	background-image: url(../images/memos-sheet-backdrop-blue.png);
	background-image: url(../images/memos-sheet-backdrop-pink.png);
}

/*this div is used to pre-load images, to eliminate flicker when swaping images*/
.memos-note .image-preloader {
	display:none;
    background-image: url(../images/memos-sheet-corner-rollup.png);
    background-image: url(../images/memos-sheet-corner-rollup-pink.png);
    background-image: url(../images/memos-sheet-corner-rollup-green.png);
    background-image: url(../images/memos-sheet-corner-rollup-blue.png);
    background-image: url(../images/memos-sheet-backdrop.png);
    background-image: url(../images/memos-sheet-backdrop-pink.png);
    background-image: url(../images/memos-sheet-backdrop-green.png);
    background-image: url(../images/memos-sheet-backdrop-blue.png);
    background-image: url(../images/memos-sheet-corner-no-rollup.png);
    background-image: url(../images/memos-sheet-corner-no-rollup-pink.png);
    background-image: url(../images/memos-sheet-corner-no-rollup-green.png);
    background-image: url(../images/memos-sheet-corner-no-rollup-blue.png);
}