style.css

/*aligns right navbar to event text ... and actually we probably want it standard across all...*/
.navbar-nav.navbar-right:last-child{
	margin-right: -160px;
}

.navbar-default{
	/*background-color: #6EA3A4;*/
	background-color: black;
    border-color: #e7e7e7;
    color: white;
    font-weight: 700;
}

.navbar-default .navbar-brand{
	color: white;
}

.navbar-default .navbar-nav>li>a{
	color: white;
}

/*selected tab*/
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
	background-color: white;
	color:black;
	/*color: #6EA3A4;*/ /*blue*/
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	color: lightgray;
}

/*for showing which square is being hovered*/
/*TODO: when hovering, show the next state of the square/the state the square will be if clicked*/
.typeSquare:hover{

/*background does not work because the squares are rectangles with a white fill, created in javascript, there is no background*/
/*	background: blue;
*/	

/*the outline doesn't outline the entire square because the squares are drawn with javascript and have no extra pixels in between, 
so sometimes the white squares overlap the blue outline because there is no room for the outline display*/
	outline: 1px solid lightblue;
	

/*same reason it doesn't work?*/
/*	-webkit-box-shadow:inset 0px 10px 0px 10px black inset;
    -moz-box-shadow:inset 0px 10px 0px 10px black inset;
    box-shadow:inset 0px 10px 0px 10px black inset;*/


	/*problem: painted color doesn't appear until hover is removed, would turn gray even when painted */
/*	fill: gray;
*/}


/*http://bl.ocks.org/eesur/9936606, for color palette customization*/
input{
	border: 1px dotted #ccc; 
	background: white; 
	font-family: monospace; 
	padding: 10px 20px; 
	font-size: 18px; 
	margin: 20px 10px 20px 0; 
	color: black;
}

input:focus{
	background-color:yellow;
	outline: none;
}

/*styling for add/remove country*/
#editForm{
	left: 10px; 
	top: 10px; 
	background: transparent;
}

/*styling for add custom events*/
#customEventsForm{
	left: 10px; 
	top: 10px; 
	background: transparent;
}

#userEventsInput{
	height:500px;
	width: 100%;

}

/*end color palette customization*/

/*styles for showing the selected color in the palette*/
#color1:hover, #color2:hover, #color3:hover, #color4:hover{
	outline: 4px solid lightblue;
	outline-style: double;
}

.selectedColor{
	outline: 4px solid lightblue;
/*	outline-style: double;
*/}

/*for the table showing the types of events*/
#typeReference table, th, td{
	border: 1px solid black;
}

#typeReference td {
	vertical-align: center;
	text-align: center;
}

.axis line, .axis path { /* timeline axis */
	fill: none;
	stroke: black;

}


#sampleList{
	padding-left: 3em;
    text-indent:-3.5em;
}