style.css

/******************************** Main Page ******************************************/

#map{
	z-index:1;
}

#menubar_frame {
	background-color:white;
	opacity:0.75;
	/*background: url("../images/background.png") repeat;*/
	z-index:10;
}

#menubar_frame .ui-widget-content, #assigned .ui-widget-content {
	background: white;
	opacity: 0.98;
	border-style: dotted;
	border-width: 1px;
}

#droppableContainer .notification-icon,
#censusTakers .notification-icon{
	position: absolute;
	background-image: url('../images/notification-small.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 15px;
	height: 15px;
	right: 3px;
	top: 3px;
	opacity:0.6;
}

.input {
	display:table-cell;
	background: url("../images/input_icon.png") no-repeat -6px -6px transparent;
	height: 38px;
	width: 36px;
	float:left;
	margin-left: 18px;
}

.region {
	display:table-cell;
	background: url("../images/data.png") no-repeat -6px -6px transparent;
	height: 38px;
	width: 36px;
	float:left;
	margin-left: 30px;
}

#contentarea{
	overflow-x:hidden;
	overflow-y:auto;
}

.incomingShips li { 
	float: left; 
	width: 120px;
	height:18px;
	padding: 0.2em; 
	margin: 0 0.2em 0.2em 0; 
	text-align: center;
	position:relative;
}

.incomingShips li span,
#assigned li span {
	float: left;
	margin-left:4px;
}

.incomingShips li .censusPicture,
#assigned li .censusPicture {
	position:absolute;
	max-height:33px;
	max-width:33px;
	height:33px;
	width:33px;
	left:0px;
	top:0px;
	opacity:0.95;
}

#assigned { float: left; width: 100%; min-height: 18em; padding: 1%; }
#assigned label { line-height: 16px; margin: 0 0 0.4em; }
#assigned label .ui-icon { float: left; }
	
/************************* Font formatting **************************************************/
.title_font-25 {
	font-family: Impact, Charcoal, sans-serif; font-weight: normal; color: #111;
	font-size: 25px;
}

.title_font-20 {
	font-family: Impact, Charcoal, sans-serif; font-weight: normal; color: #111;
	font-size: 20px;	
}

.title_font-18 {
	font-family: Impact, Charcoal, sans-serif; font-weight: normal; color: #111;
	font-size: 18px;
}

.content_font-18 {
	font-family: Helvetica, sans-serif; font-weight: normal; color: #111;
	font-size: 18px;
}

.content_font-16 {
	font-family: Helvetica, sans-serif; font-weight: normal; color: #111;
	font-size: 16px;
}

.content_font-12 {
	font-family: Helvetica, sans-serif; font-weight: normal; color: #111;
	font-size: 12px;
}

#background-overlay {
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     background-color:#000000;
     opacity:0.5;
}

.timebutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
	-webkit-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
	box-shadow:inset 0px 1px 0px 0px #c1ed9c;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b) );
	background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
	background-color:#9dce2c;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0;
	border:1px solid #83c41a;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:9px;
	font-weight:bold;
	font-style:normal;
	height:30px;
	line-height:30px;
	width:27px;
	text-decoration:none;
	text-align:center;
}
.timebutton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c) );
	background:-moz-linear-gradient( center top, #8cb82b 5%, #9dce2c 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c');
	background-color:#8cb82b;
}
.timebutton:active {
	position:relative;
	top:1px;
}
.timebuttonselect{
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9) );
	background:-moz-linear-gradient( center top, #f9f9f9 5%, #e9e9e9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');
	background-color:#f9f9f9;
	border:1px solid #dcdcdc;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0;
	color:#666666;
	display:inline-block;
	font-family:Arial;
	font-size:9px;
	font-weight:bold;
	font-style:normal;
	height:30px;
	line-height:30px;
	width:27px;
	text-decoration:none;
	text-align:center;
}

#notification-box {
	top:30%;
     width:400px;
     height:300px;
     margin: auto;
     opacity:0.95;
     padding: 0;
     background-color: #ffffff;
     z-index: 1101;
     text-align:center;
     position:relative;
}

#notification-box textarea{
	margin-top: 18%;
	float:left;
	width:380px;
	opacity:0.9;
	border:0;
	padding:10px;
	background-color:lightgrey;
	resize: none;
}

.notificationbutton, .uploaderbutton {
	opacity: 0.6;
}

.notificationbutton:hover, .uploaderbutton:hover {
	opacity: 1;
}

#assigned .ui-widget-header {
	border: 0;
	background-color: #fff;
	margin-bottom: 5px;
}

#optionsBarContainer {
	display:none;
	position: absolute;
	
	text-align: center;
	opacity: 0.75;
}

#optionsBarContainer.admin {
	background: url("../images/bottomPanel.png") no-repeat -4px -8px transparent;
	width: 1000px;
	height: 84px;
	
	bottom: 10px;
	left: 23em;
}

#optionsBarContainer.censustaker {
	background: url("../images/bottomPanel2.png") no-repeat 40px -8px transparent;
	width: 605px;
	height: 84px;
	
	bottom: 10px;
	left: 30%;
}

#optionsInternalContainer {
	position:relative;
	top:30px;
	width:100%;
	
	display: inline-flex;
}

#optionsInternalContainer #singleView{
	float: left;
	margin-left: 9em;
	margin-right: 30px;
	
	background: url("../images/assignmenticon.png") no-repeat -5px -170px transparent;
	width: 110px;
	height: 20px;
}

#optionsInternalContainer #singleView.activation {
	background: url("../images/assignmenticon.png") no-repeat -5px -148px transparent;
	width: 162px;
	height: 20px;
	
	position: relative;
	bottom:8px;
}

#optionsInternalContainer #multiView {
	float: left;
	margin-right: 10px;
	
	background: url("../images/assignmenticon.png") no-repeat -5px -216px transparent;
	width: 110px;
	height: 20px;
}

#optionsInternalContainer #multiView.activation {
	background: url("../images/assignmenticon.png") no-repeat -5px -195px transparent;
	width: 162px;
	height: 20px;
	
	position: relative;
	bottom: 8px;
}

#optionsInternalContainer #pastAssignments{
	float: right;
	margin-right: 30px;
	margin-left: 11em;
	
	background: url("../images/assignmenticon.png") no-repeat -5px -80px transparent;
	width: 44px;
	height: 20px;
}

#optionsInternalContainer #pastAssignments.activation {
	/* for active toggle */
	background: url("../images/assignmenticon.png") no-repeat -5px -56px transparent;
	width: 64px;
	height: 20px;
	
	position: relative;
	bottom:8px;
}

#optionsInternalContainer #currentAssignments{
	float: right;
	margin-right: 30px;
	
	background: url("../images/assignmenticon.png") no-repeat -5px -31px transparent;
	width: 76px;
	height: 20px;
}

#optionsInternalContainer #currentAssignments.activation {
	/* for active toggle */
	background: url("../images/assignmenticon.png") no-repeat -5px -5px transparent;
	width: 110px;
	height: 20px;
	
	position: relative;
	bottom:8px;
}

#optionsInternalContainer #futureAssignments{
	float: right;
	margin-right: 30px;
	
	background: url("../images/assignmenticon.png") no-repeat -5px -125px transparent;
	width: 65px;
	height: 20px;
}

#optionsInternalContainer #futureAssignments.activation {
	background: url("../images/assignmenticon.png") no-repeat -5px -102px transparent;
	width: 90px;
	height: 20px;
	
	position: relative;
	bottom:8px;
}

#optionsInternalContainer #singleView:hover,
#optionsInternalContainer #multiView:hover,
#optionsInternalContainer #pastAssignments:hover,
#optionsInternalContainer #currentAssignments:hover,
#optionsInternalContainer #futureAssignments:hover{
	box-shadow:inset 0 0 0.8em white, 0 0 0.8em white, 0 0 0.8em white;
}

/* PSU Results */
#PSU-overlay {
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     background-color:#000000;
     opacity:0.5;
}

#PSU-box {
	top:40%;
   	width:600px;
  	height:450px;
  	margin: auto;
  	padding: 0;
  	background-color: #ffffff;
  	z-index: 1001;
 	text-align:center;
  	position:relative;
}

#PSUTitle {
	height: 50px;
	width: 100%;
	padding-top: 20px;
}

#tabs {
	height: 100%;
	background: lightgrey;	
	text-align:left;
	
	width: 100%;
	position: relative;
	right: 5px;
}

#tabs ul {
	height:44px;
}

#tabs li {
	display:inline;
	padding: 10px;
	float: left;
	width: 29.5%;
	
	text-align: center;
}

.ui-widget-content2 {
	background: white;
	margin: 0 5px 0 5px;
	padding-bottom: 5px;
}

.decreaseIcon {
	width: 15px;
	height: 20px;
	
	background: url("../images/arrows.png") no-repeat -16px top transparent;
	display: inline-block;
}

.increaseIcon {
	width: 15px;
	height: 20px;
	
	background: url("../images/arrows.png") no-repeat left top transparent;
	display: inline-block;
}

/* Spinner CSS */
#overlay {
	background-color: #2c3e50;
	 position:absolute;
     text-align:center;
     z-index: 1100;
     opacity:0.85;
     -webkit-transition: background-color 0.6s ease-in-out 0s;
	transition: background-color 0.6s ease-in-out 0s;
}

#time{
     text-align:center;
	 position:absolute;
	 bottom:0;
}

.spinner {
  width: 60px;
  height: 60px;
  right: 3%;
  bottom: 3%;
  position: absolute;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.75;
  position: absolute;
  
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
  z-index:1101
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.loading-spinner {
  margin: 100px auto 0;
  width: 1300px;
  text-align: center;
  position:absolute;
  z-index:1101;
  bottom:5%;
  right:50px;
}

.loading-spinner > div  {
  width: 28px;
  height: 28px;
  color:#fff;
  display: inline-block;
  font-size:150%;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.loading-spinner > div > .bounce8,
.loading-spinner > div > .bounce9,
.loading-spinner > div > .bounce10 {
	border-radius: 100%;
}

.loading-spinner .bounce1 {
  -webkit-animation-delay: -0.78s;
  animation-delay: -0.78s;
}

.loading-spinner .bounce2 {
  -webkit-animation-delay: -0.76s;
  animation-delay: -0.76s;
}

.loading-spinner .bounce3 {
  -webkit-animation-delay: -0.74s;
  animation-delay: -0.74s;
}

.loading-spinner .bounce4 {
  -webkit-animation-delay: -0.72s;
  animation-delay: -0.72s;
}

.loading-spinner .bounce5 {
  -webkit-animation-delay: -0.70s;
  animation-delay: -0.70s;
}

.loading-spinner .bounce6 {
  -webkit-animation-delay: -0.68s;
  animation-delay: -0.68s;
}

.loading-spinner .bounce7 {
  -webkit-animation-delay: -0.66s;
  animation-delay: -0.66s;
}

.loading-spinner .bounce8 {
  -webkit-animation-delay: -0.64s;
  animation-delay: -0.64s;
}

.loading-spinner .bounce9 {
  -webkit-animation-delay: -0.62s;
  animation-delay: -0.62s;
}

.loading-spinner .bounce10 {
  -webkit-animation-delay: -0.60s;
  animation-delay: -0.60s;
}

.loading-spinner .bounce11 {
  -webkit-animation-delay: -0.58s;
  animation-delay: -0.58s;
}

.loading-spinner .bounce12 {
  -webkit-animation-delay: -0.56s;
  animation-delay: -0.56s;
}

.loading-spinner .bounce13 {
  -webkit-animation-delay: -0.54s;
  animation-delay: -0.54s;
}

.loading-spinner .bounce14{
  -webkit-animation-delay: -0.52s;
  animation-delay: -0.52s;
}

.loading-spinner .bounce15 {
  -webkit-animation-delay: -0.50s;
  animation-delay: -0.50s;
}

.loading-spinner .bounce16 {
  -webkit-animation-delay: -0.48s;
  animation-delay: -0.48s;
}

.loading-spinner .bounce17 {
  -webkit-animation-delay: -0.46s;
  animation-delay: -0.46s;
}

.loading-spinner .bounce18 {
  -webkit-animation-delay: -0.44s;
  animation-delay: -0.44s;
}

.loading-spinner .bounce19 {
  -webkit-animation-delay: -0.42s;
  animation-delay: -0.42s;
}

.loading-spinner .bounce20 {
  -webkit-animation-delay: -0.40s;
  animation-delay: -0.40s;
}

.loading-spinner .bounce21 {
  -webkit-animation-delay: -0.38s;
  animation-delay: -0.38s;
}

.loading-spinner .bounce22 {
  -webkit-animation-delay: -0.36s;
  animation-delay: -0.36s;
}

.loading-spinner .bounce23 {
  -webkit-animation-delay: -0.34s;
  animation-delay: -0.34s;
}

.loading-spinner .bounce24 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loading-spinner .bounce25 {
  -webkit-animation-delay: -0.30s;
  animation-delay: -0.30s;
}

.loading-spinner .bounce26 {
  -webkit-animation-delay: -0.28s;
  animation-delay: -0.28s;
}

.loading-spinner .bounce27 {
  -webkit-animation-delay: -0.26s;
  animation-delay: -0.26s;
}

.loading-spinner .bounce28 {
  -webkit-animation-delay: -0.24s;
  animation-delay: -0.24s;
}

.loading-spinner .bounce29 {
  -webkit-animation-delay: -0.22s;
  animation-delay: -0.22s;
}

.loading-spinner .bounce30 {
  -webkit-animation-delay: -0.20s;
  animation-delay: -0.20s;
}

.loading-spinner .bounce31 {
  -webkit-animation-delay: -0.18s;
  animation-delay: -0.18s;
}

.loading-spinner .bounce32 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loading-spinner .bounce33 {
  -webkit-animation-delay: -0.14s;
  animation-delay: -0.14s;
}

.loading-spinner .bounce34 {
  -webkit-animation-delay: -0.12s;
  animation-delay: -0.12s;
}

.loading-spinner .bounce35 {
  -webkit-animation-delay: -0.10s;
  animation-delay: -0.10s;
}

.loading-spinner .bounce36 {
  -webkit-animation-delay: -0.08s;
  animation-delay: -0.08s;
}

.loading-spinner .bounce37 {
  -webkit-animation-delay: -0.06s;
  animation-delay: -0.06s;
}

.loading-spinner .bounce38 {
  -webkit-animation-delay: -0.04s;
  animation-delay: -0.04s;
}

.loading-spinner .bounce39 {
  -webkit-animation-delay: -0.02s;
  animation-delay: -0.02s;
}

.loading-spinner .bounce40 {
  -webkit-animation-delay: -0.00s;
  animation-delay: -0.00s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/* Notification View */
#notification-view {
	position:relative;
	margin:auto;
	height:550px;
	width:900px;
	text-align:center;
	z-index:1001;
	background-color:#fff;
    opacity:0.9;
}

#notification-view > .profilePicture {
	width:75px;
	height:75px;
	position:absolute;
	top:0px;
	right:0px;
	max-width:75px;
	max-height:75px;
	background-size: cover;
	background-repeat: no-repeat;
}

#notification-view > .header {
	width:100%;
	position:absolute;
	top:25px;
}

#notification-view > .doneButton {
	width:100%;
	position:absolute;
	bottom:25px;
	opacity:0.6;
	left:0;
}

#notification-view .doneButton:hover {
	opacity:1;
}

#notification-view > .listContainer {
	top:75px;
	margin: 0 auto 0 auto;
	padding: 10px;
	width:880px;
	height:375px;
	float:left;
	padding:10px;
	background-color:lightgrey;
	opacity:0.9;
	position:absolute;
	overflow-x:hidden;
	overflow-y:auto;
}
/******** Scroll bar **********/
::-webkit-scrollbar {
    width: 10px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: silver; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,0,0,0.4); 
}