/* For use in database systems course web site  */

/* common styles used throughout the site */
.offsite {
   font-size:95%; 
   font-style:italic; 
   font-family:"comic sans ms";
}

.container { 
   width: 99%;     
}

.center {
   margin-left: auto;
   margin-right: auto;
   width: 90%;  
   min-width: 412px;
}

.smallspace {
   margin-top: 10px;
   margin-bottom: 12px;
}
.bigspace {
   margin-top: 10px;
   margin-bottom: 16px;
}
.xbigspace {
   margin-top: 10px;
   margin-bottom: 28px;
}
.spaceafter {
   margin-bottom: 14px;
}
.bigspaceafter {
   margin-bottom: 20px;
}	

.spacebefore { 
   margin-top: 20px;	
}

.spaceleft { 
   margin-left: 12px;
}
.spaceright { 
   margin-right: 12px;
}


/* styles for project option */
ol.option {
   list-style-type: none;
   counter-reset: item;
   /* margin: 0; */
   /* padding: 0; */
   padding-left: 1.6em;
}
ol.option > li {
   display: table;
   counter-increment: item;
   margin-bottom: 0.6em;
   margin-top: 0.6em;
}
ol.option > li:before {
   content: "Option " counters(item, "") ": ";
   display: table-cell;
   padding-right: 0.4em;    
   width: 80px;
}

a { color: Blue; }  
a:hover { background-color: Moccasin; }
hr { border-color: #c9c9c9; } 

h1, h2, h3, h4 { font-weight: bold; }

.main {
   padding: 0px 20px 0px 30px ;  
}

.mainpanel {
   padding-top: 50px;
}

.message-box {
   padding: 10px 15px 10px 15px;
   border-radius: 10px;
   border: 2px solid silver;
   font-family: Georgia;	
   font-style:italic;
}   

.important {
   color: red;
   font-weight: bold;
   font-size: 1.7em;
   font-style: italic;
   font-family: Times New Roman;
}

.note {
   font-family: Times New Roman; /* fantasy; */
   font-style: italic;
   color: darkgreen;
}

.quote-note {
   font-family: Georgia;	
   font-style:italic;
}
.quote-inline {
   font-family: Times New Roman;
   font-style: italic;
   color: darkgreen;
}

.isDisabled {
   color: currentColor;
   cursor: not-allowed;
   text-decoration: none; 
   /* background-image: linear-gradient(to bottom, #fafafa, #ccc); */
   /* opacity: 0.7;  */
   pointer-events: none; 
}

.topNav {
   text-decoration:none;
}

.specificname {
   font-family: Times New Roman;
   font-style: italic;
}

.quote {
   padding: 10px 40px 30px 40px;
   font-family: Times New Roman;
}


span.quote {
   line-height: normal;  
   color:#003366; 
   font-size:110%;  
   font-style:italic; 
   display: inline-block;
   padding: 5px 0px 2px 0px;
}

.paper ul > li {  
   padding-top: 0.8em;  
   padding-left: 0.3em;  
} 

.nobullet ul > li {
   list-style-type: none;
   padding-left: 0.3em;
}

.steps ol > li, .steps ul > li {  
   padding-top: 0.6em;  
   padding-bottom: 0.5em;
   padding-left: 0.5em;   
} 

.innersteps ul > li {
   padding-top: 0.6em;
   line-height: 1.4em;     
   padding-bottom: 0em; 	
}

.smallsteps ul > li {
   padding-top: 0.4em;
   line-height: 1.2em;
   padding-bottom: 0em;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


#content, #sidebar {
   padding: 10px 10px 10px 0px;
}

input[type="submit"]
{
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 6;
  -moz-border-radius: 6;
  border-radius: 6px;
  -webkit-box-shadow: 0px 1px 2px #666666;
  -moz-box-shadow: 0px 1px 2px #666666;
  box-shadow: 0px 1px 2px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  border: solid #f2f7fa 1px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

body {	
   color: black; /* #393939; */            
   font-family: Helvetica; 
   font-size: 16px;
   margin: 0;                    
   background-color: lavender;  /* #edf7ff; */  
   /* background-image: url("http://www.cs.virginia.edu/~up3f/cs4750/images/fresh-snow.png"); */
   /* prototype pattern from https://www.transparenttextures.com/ */    
}

a {
   color: #0056AA;
}

.btn-primary {
   color: #cccccc;  
   background-color: #cccccc;
   border-color: #cccccc;
   color: #333333;
   margin-bottom: 5px;
}
   
.btn-primary:hover {   
   color: #ffffff; 
   background-color: #999999;
   border-color: white;	
}
 
 
.clickable { 
   padding: 8px 16px 8px 16px;
   margin: 0px;
   line-height: 1em;
   text-align: center;
   font-size: 100%;
   background-color: #000066; 
   color: #f6f5f7;
   box-shadow: 2px 2px 2px gray;     
   /* opacity: 0.9;  */
}
a.clickable:hover {
   color: white;
   background: RoyalBlue;
}
 
.big-img {
   min-width: 380px;
}
.assess-img {
   min-width: 300px;   
}
img { border-radius: 4px; }

.sidebar {    
   background: #eaeffe; /* #f3f0f7; */   
   border: 0.125ex solid #e3e3e3; 
   min-height: 1px;
   min-width: 180px; 
   border-radius: 0.5ex; 
   box-shadow: inset 0 0.0625ex 0.125ex rgba(0,0,0,0.25);    
   font-size: 0.9em;
}

.sidebar ul { 
   padding: 8px; 
   margin: 8px; 
   list-style: none; 
}

.sidebar ul > li > a { 
   display:block; 
   text-indent: -2em; 
   padding-left: 2em; 
   padding-top: 0.3em; 
   padding-bottom: 0.3em; 
   line-height: 125%;  
   border-bottom:1px solid lightsteelblue;
} 

.sidebar ul > li:last-child > a { 
   display:block; 
   text-indent: -2em; 
   padding-left: 2em; 
   padding-top: 0.3em; 
   padding-bottom: 0.3em; 
   line-height: 125%;  
   border-bottom:0px solid lightsteelblue;
} 

.sidebar ul > li > a:hover, .sidebar ul > li > a:focus { 
   background-color: #dddddd; 
   text-decoration: none;    
}

/* for top menu (nav.html) */ 
.navbar { 
   margin-bottom: 0; 
}

.navbar-header .navbar-brand {
   color: #ffffff;
   text-shadow: 0px 1px 0px black; 
   font-size: 22px;
   font-weight: bold; 
}  
 
.navbar-inverse {
   border-bottom: 1px solid #cccccc;
   background-color: #181818; /* #202020; */ /* #4B0082; */ /* #330066; */ /* #663399; */ /* #000066; */  
   color: #f6f5f7;
   box-shadow: 0 0.0625ex 0.5ex rgba(0,0,0,.1);     
   /* opacity: 0.9;  */
}

.navbar-inverse .navbar-nav li a {
   color: #f2eef5; 
   font-size: 14px;   
} 

.navbar-right a:hover {
   text-decoration: none; 	
}

.navbar-inverse .navbar-nav li a:hover {
   background: #666666;
   color: #ffffff;       
}

.navbar .navbar-header a:hover {
   color: #666666;	
}

.navbar .navbar-header a:visited {
   color: #999999;	
}

.navbar-inverse .navbar-nav .dropdown-menu li a:hover {
   background: #666666;	
} 

/* for schedule page */
.noclass { 
   background-color: Gainsboro; /* lightGray; */  /* #ebe9ed; #e4e1e7; */
   color: DarkSlateGray; /* gray;  #7b7685; */ 
}

table {
   border-collapse: collapse;
   table-layout: auto;
   border-spacing: 5px;
   line-height: 1.4em;
   border-color: #999999;
}

.section_info { 
   border-collapse: collapse;
   padding: 0px;
   border-color: #cccccc;
   table-layout: auto;
   border: 0.125ex solid #cccccc;
}

th, td {
   text-align: left;
   padding: 10px;
   border-collapse: separate;
   border-spacing: 5px;
   border: 0.125ex solid #cccccc;
}

.common td {
   padding: 4px 5px 4px 20px;
   border-style: none;
}
 
.section {
   background-color: #dfdce3; /* #ebe9ed; */ /* #eaeeee; /*  #f4f6f6 */	 
} 

.not_tested_section {   
   background-color: white;      
   border-radius: 4px;
   border: 1.5px solid gray;    
}
      
.day { 
   border-top: 4px solid #c9c9c9; /* #afafaf; */	
} 

.quizday {
   background-color: #fffde2; /* #f8f7fd; */ /* #faffff /* #f6fdf8; */
}

.inclassday {
   background-color: #effaff;
}
 
.oddrow {
   background-color: #faffff;	
} 

.evenrow {
   background-color: #fefeff;	
} 

.oddweek, .monday {
   background-color: snow; /* LavenderBlush; WhiteSmoke; SeaShell;  BlanchedAlmond; snow; floralwhite;  mintcream; GhostWhite; white; #e5f9f8; */
}

.evenweek, .wednesday {
   /* background-color: ivory;  Azure; LightCyan; GhostWhite; */ 
}

.friday {
   background-color: #f4f6f6;
}

.final {
   background-color: lightyellow;	
}

.emphasize {
   font-size: 1.3em;
   font-weight: bold;
} 

.pagebreak { page-break-before: always; }

.line-strikethrough {
   display: inline;
   background-image: linear-gradient(transparent 0.8ex, red 0.5ex, red 1ex, transparent 1.5ex);
}   

.decorated-text { 
   font-style:italic;  
   font-family:"Georgia";
}

@media only screen and (max-width: 992px) {
   .bookcover { width: 30%;}           
}   
@media only screen and (max-width: 576px) {
   .bookcover { width: 60%;}
   .assess-img { width: 60%; }
   .topic-img { width: 100%; }           
}   
@media only screen and (max-width: 720px) {
.assess-img { width: 100%; }
   .topic-img { width: 100%; }
}
 
 
/* styles for collapsible things */
.solution { 
   border-radius: 10px;
   border: 2px solid silver;
   padding: 10px 20px 10px 20px;      
   margin: 10px 10px 10px 10px;
   background-color: white;
}
.content { 
   display: block;
   width: 99%;
   min-width: 440px;
   text-align: left;
   background: #cccccc;       
}
/* for collapsible things */ 
/* Icon when the collapsible content is shown */
/* .btn-o:after {
   font-family: 'FontAwesome';  
   content: "\f068";
   float: right;     
}   */ 
/* Icon when the collapsible content is hidden */
/* .btn-o.collapsed:after {
   font-family: 'FontAwesome';
   content: "\f067"; 
   float: right;
}       */
.collapse { 
   width: 99%;	
}   


/* for schedule page */
.highlight-2 {
   background-color: yellow;    
   padding: 2px 4px 2px 4px;
   border-radius: 4px;
}
.highlight-3 {
   background-color: lightpink;    
   padding: 2px 4px 2px 4px;
   border-radius: 4px;
}
.highlight-4 {
   background-color: Aquamarine;    
   padding: 2px 4px 2px 4px;
   border-radius: 4px;
}