html{ height: 100%; }
body{  overflow: hidden; background: #fff url(http://userlogos.org/files/backgrounds/DMaster/BG.jpg) fixed top center; font-family: "Trebuchet MS"; font-size: 13px; height: 100%; }
#container{position: relative; text-align: center; color: #fff; height: 100%; overflow: auto; }
#container img{ }
.container-padding{ padding-bottom: 40px; padding-top: 0px; }
#header{ position: relative; }
#lights{ position: absolute; top: 0; left: 0; width: 100%; }
#fb-stuff{ position: absolute; top: 0; left: 10px; }
.green{ color: green; }
.red{ color: red; }
.padded-body{ padding: 10px; }
.padded-small{ padding: 5px; }
h1{ clear: both; margin: 0em auto .2em; font-size: 40px; text-shadow: 1px 1px 1px #fff, 4px 4px 2px #000; text-align: center;}

.add22{ background-image: url(../image/list-add.png) !important; }
.cards22{background-image: url(../image/document-open.png) !important; }
.logout22{background-image: url(../image/system-log-out.png) !important; }
.edit-card{background-image: url(../image/document-properties.png) !important; }
.edit-card22{background-image: url(../image/document-properties22.png) !important; }
.view-card{background-image: url(../image/go-next.png) !important; }
.bigBtn{ font-size: 13px !important; font-family: "Trebuchet MS" !important; padding-left: 6px !important; padding-right: 28px !important; background-position: center right !important;}
.hide{ display: none; }
.loading-cards{ padding-top: 10px; padding-right: 10px; }

#footer{ width: 100%; position: fixed; bottom: 0px; left: 0px; text-align: center; z-index: 10;  }
#footer .margin{ position: relative; margin: 0 20px; border: 1px solid #4a4a4a; border-bottom-width: 0;}
#footer .bg{ background-color: #e8e8e8; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: .75; filter: alpha(opacity=75); }
#footer .padding{ text-align:left; padding: 1px 2px; position: relative; z-index: 1; border: 1px solid #fff; border-bottom-width: 0px; }
#footer .btn .x-btn{  }
#footer .google-ads{ text-align:center; }

#logo{ float: left; line-height: 1em; padding: 2px; }
.logo .facebook{ color: #1B7BDD; }
.logo .card{ color: #333; }
.logo{ text-shadow: 1px 1px 1px #fff, 2px 2px 3px #444; }

.created-by{ font-size: .8em; color: #333; }
.created-by a{color: #333 !important; }

.logo{ text-decoration: none !important; }
a.logo{ padding-bottom: 3px;  }
a.logo:hover{border-bottom: 3px solid #FFF; padding-bottom: 0px;}

#footer .boombox-container{ float: left; padding-top: 7px; padding-left: 12px; }
#footer .logo{ font-size: 20px; float: left; display: block; }
#footer .profile{ float: right; }
#create-card, #share-card, #user, #edit, #signout{ float: left;}
#signout .x-btn, #user .x-btn, #edit .x-btn{ margin-right: 2px; }
#user .fbconnect_login_button{ margin-top: 2px; margin-right: 6px; display: block; }

.x-form-field-prefix{ float: left; padding: 4px 0px;}
.msg-box .x-window-mc{ -moz-border-radius: 4px; -webkit-border-radius: 4px; background-color: #83a9e9 !important; color: #fff; font-family: "trebuchet ms"; font-size: 13px !important;  line-height: 1.3em; }

.more-records{ display: block; padding: 4px; text-align:center; font-weight: bold; margin-top: 8px; border: 1px solid #e3e3e3; }
.more-records:hover{ background-color: #dfebff; border: 1px solid #BED6FF;  }

.welcome-message{ font-family: "Trebuchet MS"; }
.welcome-message p{ margin-bottom: 1em; font-size: 13px; line-height: 1.3em; }
.welcome-message h2{ color: #1B7BDD; font-size: 30px; margin-bottom: .5em; text-shadow: 1px 1px 1px #fff, 2px 2px 1px #999; }
.welcome-message .fb-login-area{ float: right; width: 200px; padding: 8px; }
.welcome-message .content-area{ margin-right: 220px; }

.welcome-message .fb-login-button-ct{ text-align:center; padding: 10px; }
.welcome-message .logged-in-status{ margin: 6px 0px; text-align: center; }
.welcome-message .logout-ct{ text-align: center; }


.albums-loading{ font-size: 14px; font-family: "trebuchet ms"; text-align: center; padding: 20px 0; }

.albums-panel .album{ text-align:center; cursor: pointer; margin: 8px 1px; padding: 6px 2px; border: 1px solid #fff; }
.albums-panel h4{ background-color: #333; color: #fff; font-size: 1.2em; padding: 3px; }
.albums-panel .album img{ display: block; margin: 0 auto; }
.albums-panel .album span{ display: block; font-weight: bold; margin-top: 4px; }
.albums-panel .active-album{ background-color: #BED6FF; color: #000; border: 1px solid #79abff;}
.albums-panel .logout{ float: right; }
.albums-panel .facebook-login{ padding: 4px 0px; }
.albums-panel .fbconnect_login_button{ text-align: center; display: block; }

.images-ct{ overflow: visible; }
.images-ct .image-wrap{ min-height: 144px; _height: 144px; float: left; margin: 2px; }
.images-ct .image{ padding: 6px; position: relative; border: 1px solid #fff;}
.images-ct .image .checkbox{ opacity: .9; position: absolute; top: 10px; left:10px; height: 13px; width: 13px; background-image:url(http://extjs.cachefly.net/ext-3.0.3/resources/images/default/form/checkbox.gif); background-position: top left; }
.images-ct .image-hover{ background-color: #dfebff; border: 1px solid #BED6FF;  }
.images-ct .x-view-selected{ background-color: #BED6FF; color: #000; border: 1px solid #79abff; }
.images-ct .x-view-selected .checkbox{ background-position: 0 -13px; }

.bg-image-thumb{ margin: 1px 5px; padding: 5px; position: relative; }
.bg-image-info{ position: absolute; top: 0px; left: 0px; width: 100%; display: none; }
.bg-image-thumb-hover{ padding: 4px; background-color: #dfebff; border: 1px solid #BED6FF; }
.bg-image-thumb-hover .bg-image-info{ display: block; }
.bg-image-table .x-view-selected{ padding: 4px; background-color: #BED6FF; color: #000; border: 1px solid #79abff; }
.bg-image-info a{ background-color: #000; opacity: .8; filter: alpha(opacity=80); color: #fff; display: block; padding: 2px; text-align:center;}
.bg-image-info a:hover{ opacity: 1; filter: alpha(opacity=100); } 

.music-panel .song{ text-align:left; margin: 6px 0px; padding: 6px; border: 1px solid #e0e0e0; background-color: #efefef; overflow: hidden; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
.music-panel .song .title{ font-weight: bold; font-size: 1em; }
.music-panel .song .url{ font-weight: normal; font-size: .9em; }

.song .button{ width: 16px; height: 16px; margin: 1px; float: right; cursor: pointer; }
.song .statusBtn{ background-image: url(../image/control_play.png); }
.song .addBtn{ background-image: url(../image/add.png); }
.added .song .addBtn{ background-image: url(../image/delete.png); }
.song .orderUpBtn{ margin-left: -2px; margin-top: -2px; height: 12px; background-image: url(../image/resultset_up.png); float:left; clear:left;}
.song .orderDownBtn{ margin-left: -2px; margin-top: -2px;  background-image: url(../image/resultset_down.png); float:left; clear:left;}
.first .song .orderUpBtn{ opacity: .1; }
.last .song .orderDownBtn{ opacity: .1; }
.playing .song .statusBtn{ background-image: url(../image/control_pause.png); }
.playing .song{ background-color: #d7ffd7; border-color: #b3ffb3; }
.error .song{ background-color: #ffff8c; border-color: #ffff3e; }
.error .song .statusBtn{ background-image: url(../image/cancel.png); }

.x-btn-icon .playPause{background-image: url(../image/control_play.png);}
.x-btn-icon .playing{background-image: url(../image/control_pause.png);}
.x-btn-icon .paused{background-image: url(../image/control_play.png);}

.x-btn-icon .add{background-image: url(../image/add.png);}
.x-btn-icon .remove{background-image: url(../image/delete.png);}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}