Difference between revisions of "Team:DTU-Denmark/stylesheetsub"

(initialization of stylesheet for subpages)
 
Line 29: Line 29:
 
       margin-bottom: 0px;
 
       margin-bottom: 0px;
 
     }
 
     }
 +
 +
 +
 +
 +
 +
 +
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
 +
 +
/* Clear the default wiki settings */
 +
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 +
 +
 +
 +
/**************************************************************** MENU ***************************************************************/
 +
/* Wrapper for the menu */
 +
.igem_2017_menu_wrapper {
 +
width: 15%;
 +
height:100vh;
 +
position:fixed;
 +
right:0%;
 +
padding:0px;
 +
float:right;
 +
border-left: 1px solid #d3d3d3;
 +
background-color:#dddddd;
 +
text-align:left;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
}
 +
 +
/* this hides the scrollbar to keep view consistency */
 +
.igem_2017_menu_wrappe::-webkit-scrollbar {
 +
display: none;
 +
}
 +
 +
 +
/* styling for links in the menu, removes the line under text */
 +
.igem_2017_menu_wrapper a { 
 +
text-decoration: none;
 +
}
 +
 +
 +
/* styling for the images in the menu */
 +
.igem_2017_menu_wrapper img {
 +
width: 100%;
 +
}
 +
 +
/* styling for the menu buttons */
 +
.igem_2017_menu_wrapper .menu_button {
 +
width: 100%;
 +
padding: 10px 0px 10px 15px;
 +
float:left;
 +
border-bottom: 1px solid #d3d3d3;
 +
font-size: 12px;
 +
font-weight: bold;
 +
color: #5e5f5f;
 +
cursor: pointer;
 +
}
 +
 +
 +
.igem_2017_menu_wrapper .menu_bottom_padding {
 +
width: 100%;
 +
height: 30px;
 +
float:left;
 +
}
 +
 +
.menu_button.direct_to_page {
 +
padding-left: 36px;
 +
}
 +
 +
 +
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
 +
width:10%;
 +
float:left;
 +
}
 +
 +
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
 +
content: "+"; 
 +
}
 +
 +
.open::before {
 +
content: "-" !important; 
 +
}
 +
 +
 +
 +
/* styling for the menu buttons on hover */
 +
.igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {
 +
background-color: #3399ff;
 +
text-decoration: none;
 +
color:#ffffff;
 +
}
 +
 +
/* styling for the menu button when it is the current page */
 +
.current_page {
 +
background-color:#7fc1f7  !important;
 +
color:#5e5f5f !important;
 +
}
 +
 +
 +
/* styling for the submenu buttons */
 +
.igem_2017_menu_wrapper .submenu_button {
 +
width: 100%;
 +
padding: 10px 0px 10px 34px;
 +
float:left;
 +
background-color:#f2f2f2;
 +
border-bottom: 1px solid #d3d3d3;
 +
font-size: 12px;
 +
color: #5e5f5f;
 +
cursor: pointer;
 +
}
 +
 +
/* wrapper for the submenu items, they are hidden by default*/
 +
.igem_2017_menu_wrapper .submenu_wrapper {
 +
display:none;
 +
}
 +
 +
/* when the page size is bigger than 800px, this show/hide control is hidden by default */
 +
.igem_2017_menu_wrapper #display_menu_control {
 +
display:none;
 +
text-align:center;
 +
}
 +
 +
 +
/***************************************************** CONTENT OF THE PAGE ****************************************************/
 +
 +
/* Wrapper for the content */
 +
.igem_2017_content_wrapper {
 +
width: 81%;
 +
margin: 2%;
 +
display:block;
 +
float:left;
 +
background-color:white;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
 +
 +
 +
/********************************* HTML STYLING  *********************************/
 +
 +
/* styling for the titles h1 h2 */
 +
.igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
 +
padding:5px 15px;
 +
border-bottom: 0px;
 +
color: #3399ff;
 +
}
 +
 +
 +
/* styling for the titles  h3 h4 h5 h6*/
 +
.igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color: #000000; 
 +
}
 +
 +
 +
/* font and text */
 +
.igem_2017_content_wrapper p {
 +
padding: 0px 15px;
 +
font-size: 13px;
 +
}
 +
 +
/* Links */
 +
.igem_2017_content_wrapper a {
 +
font-weight: bold;
 +
text-decoration: underline;
 +
text-decoration-color: #3399ff;
 +
color:  #3399ff;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
 +
 +
/* hover for the links */
 +
.igem_2017_content_wrapper a:hover {
 +
text-decoration:none;
 +
color:#000000;
 +
}
 +
 +
/* non numbered lists */
 +
.igem_2017_content_wrapper ul {
 +
padding:0px 20px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
 +
 +
/* numbered lists */
 +
.igem_2017_content_wrapper ol {
 +
padding:0px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
 +
 +
/* Table */
 +
.igem_2017_content_wrapper table {
 +
width: 97%;
 +
margin:15px 10px;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
}
 +
 +
/* table cells */
 +
.igem_2017_content_wrapper  td {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
}
 +
 +
/* table headers */
 +
.igem_2017_content_wrapper th {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
background-color:#f2f2f2;
 +
}
 +
 +
 +
/**********************************LAYOUT CLASSES **********************************/
 +
 +
/* general class for column divs */
 +
.igem_2017_content_wrapper .column  {
 +
padding: 10px 0px;
 +
float:left;
 +
}
 +
 +
/* class for a full width column */
 +
.column .full_size {
 +
width:100%;
 +
}
 +
 +
/* styling for images in a full width column*/
 +
.column.full_size img {
 +
width:97%;
 +
padding: 10px 15px;
 +
}
 +
 +
/* class for a half width column */
 +
.column.half_size {
 +
width: 50%;
 +
}
 +
/* styling for images in a half width column*/
 +
.column.half_size img {
 +
width: 94.5%;
 +
padding: 10px 15px;
 +
}
 +
 +
 +
 +
 +
/********************************* SUPPORT CLASSES ********************************/
 +
 +
/* class that clears content below*/
 +
.igem_2017_content_wrapper .clear {
 +
clear:both;
 +
}
 +
 +
 +
/* adds extra spacing when clearing content */
 +
.igem_2017_content_wrapper  .clear.extra_space {
 +
height: 30px;
 +
}
 +
 +
 +
/* highlight class, makes content slightly smaller */
 +
.igem_2017_content_wrapper .highlight {
 +
margin: 0px 15px;
 +
padding: 15px 0px;
 +
}
 +
 +
 +
/* highlight class, adds a gray background */
 +
.igem_2017_content_wrapper .highlight.gray {
 +
background-color: #f2f2f2;
 +
}
 +
 +
/* highlight with decoration blue line on top */
 +
.igem_2017_content_wrapper .highlight.blue_top {
 +
    border-top: 4px solid #3399ff;
 +
}
 +
 +
/* highlight with a full blue border decoration */
 +
.igem_2017_content_wrapper .highlight.blue_border {
 +
    border: 4px solid  #3399ff;
 +
}
 +
 +
 +
/* button class */
 +
.igem_2017_content_wrapper .button{
 +
max-width: 35%;
 +
margin: 30px auto;
 +
padding: 12px 10px;
 +
    background-color: #3399ff;
 +
    text-align: center;
 +
  color: #ffffff;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
 +
}
 +
 +
/* styling for button on hover */
 +
.igem_2017_content_wrapper .button:hover{
 +
background-color: #3399ff;
 +
    color: #000000;
 +
}
 +
 +
 +
 +
 +
/***************************************************** RESPONSIVE STYLING ****************************************************/
 +
 +
/* IF THE SCREEN IS LESS THAN 1200PX */
 +
@media only screen and (max-width: 1200px) {
 +
 +
#content {width:100%; }
 +
.igem_2017_menu_wrapper {width:15%; right:0;}
 +
.highlight {padding:10px 0px;}
 +
.igem_2017_menu_wrapper #display_menu_control { display:none; }
 +
#menu_content { display:block;}
 +
.menu_button.direct_to_page {padding-left: 17px;}
 +
 +
}
 +
 +
/* IF THE SCREEN IS LESS THAN 800PX */
 +
@media only screen and (max-width: 800px) {
 +
 +
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
 +
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
 +
.column.half_size  {width:100%; }
 +
.column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
 +
.highlight {padding:15px 5px;}
 +
.igem_2017_menu_wrapper #display_menu_control { display:block; }
 +
#menu_content { display:none;}
 +
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
 +
.menu_bottom_padding {display:none;}
 +
.menu_button.direct_to_page { padding-left: 36px; }
 +
}
 +
 +
 +
 +
 +
/* special class that the system uses to make sure the team wants a page to be evaluated */
 +
.judges-will-not-evaluate {
 +
    width: 96.6%;
 +
  margin: 5px 15px;
 +
  display: block;
 +
border: 4px solid #3399ff;
 +
    font-weight: bold;
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  

Revision as of 10:40, 17 July 2017

/****************************************************************************************************************/ /************************************** OVERWRITES DEFAULT WIKI SETTINGS ****************************************/ /************************************************* (iGEM CODE) **************************************************/ /****************************************************************************************************************/ 


   /* Clear the default wiki settings */
 
   #home_logo, #sideMenu {
     display:none;
   }
   
   #sideMenu, #top_title, .patrollink  {
     display:none;
   }
   
   #content {
     width: 100%;
     padding: 0px;
     margin-top: -7px;
     margin-left: 0px;
   }

   body {
     background-color: white;
   }

   #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
     margin-bottom: 0px;
   }




/***************************************************** DEFAULT WIKI SETTINGS ****************************************************/

/* Clear the default wiki settings */

#home_logo, #sideMenu { display:none; } #sideMenu, #top_title, .patrollink {display:none;} #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} body {background-color:white; } #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }



/**************************************************************** MENU ***************************************************************/ /* Wrapper for the menu */ .igem_2017_menu_wrapper { width: 15%; height:100vh; position:fixed; right:0%; padding:0px; float:right; border-left: 1px solid #d3d3d3; background-color:#dddddd; text-align:left; font-family:Tahoma, Geneva, sans-serif; overflow-y: auto; overflow-x: hidden; }

/* this hides the scrollbar to keep view consistency */ .igem_2017_menu_wrappe::-webkit-scrollbar { display: none; }


/* styling for links in the menu, removes the line under text */ .igem_2017_menu_wrapper a { text-decoration: none; }


/* styling for the images in the menu */ .igem_2017_menu_wrapper img { width: 100%; }

/* styling for the menu buttons */ .igem_2017_menu_wrapper .menu_button { width: 100%; padding: 10px 0px 10px 15px; float:left; border-bottom: 1px solid #d3d3d3; font-size: 12px; font-weight: bold; color: #5e5f5f; cursor: pointer; }


.igem_2017_menu_wrapper .menu_bottom_padding { width: 100%; height: 30px; float:left; }

.menu_button.direct_to_page { padding-left: 36px; }


.igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width:10%; float:left; }

.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before { content: "+"; }

.open::before { content: "-" !important; }


/* styling for the menu buttons on hover */ .igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover , .submenu_button.current_page:hover { background-color: #3399ff; text-decoration: none; color:#ffffff; }

/* styling for the menu button when it is the current page */ .current_page { background-color:#7fc1f7 !important; color:#5e5f5f !important; }


/* styling for the submenu buttons */ .igem_2017_menu_wrapper .submenu_button { width: 100%; padding: 10px 0px 10px 34px; float:left; background-color:#f2f2f2; border-bottom: 1px solid #d3d3d3; font-size: 12px; color: #5e5f5f; cursor: pointer; }

/* wrapper for the submenu items, they are hidden by default*/ .igem_2017_menu_wrapper .submenu_wrapper { display:none; }

/* when the page size is bigger than 800px, this show/hide control is hidden by default */ .igem_2017_menu_wrapper #display_menu_control { display:none; text-align:center; }


/***************************************************** CONTENT OF THE PAGE ****************************************************/

/* Wrapper for the content */ .igem_2017_content_wrapper { width: 81%; margin: 2%; display:block; float:left; background-color:white; font-family:Tahoma, Geneva, sans-serif; }


/********************************* HTML STYLING *********************************/

/* styling for the titles h1 h2 */ .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 { padding:5px 15px; border-bottom: 0px; color: #3399ff; }


/* styling for the titles h3 h4 h5 h6*/ .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 { padding:5px 15px; border-bottom:0px; color: #000000; }


/* font and text */ .igem_2017_content_wrapper p { padding: 0px 15px; font-size: 13px; }

/* Links */ .igem_2017_content_wrapper a { font-weight: bold; text-decoration: underline; text-decoration-color: #3399ff; color: #3399ff; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }

/* hover for the links */ .igem_2017_content_wrapper a:hover { text-decoration:none; color:#000000; }

/* non numbered lists */ .igem_2017_content_wrapper ul { padding:0px 20px; font-size: 13px; font-family:Tahoma, Geneva, sans-serif; }

/* numbered lists */ .igem_2017_content_wrapper ol { padding:0px; font-size: 13px; font-family:Tahoma, Geneva, sans-serif; }

/* Table */ .igem_2017_content_wrapper table { width: 97%; margin:15px 10px; border: 1px solid #d3d3d3; border-collapse: collapse; }

/* table cells */ .igem_2017_content_wrapper td { padding: 10px; vertical-align: text-top; border: 1px solid #d3d3d3; border-collapse: collapse; }

/* table headers */ .igem_2017_content_wrapper th { padding: 10px; vertical-align: text-top; border: 1px solid #d3d3d3; border-collapse: collapse; background-color:#f2f2f2; }


/**********************************LAYOUT CLASSES **********************************/

/* general class for column divs */ .igem_2017_content_wrapper .column { padding: 10px 0px; float:left; }

/* class for a full width column */ .column .full_size { width:100%; }

/* styling for images in a full width column*/ .column.full_size img { width:97%; padding: 10px 15px; }

/* class for a half width column */ .column.half_size { width: 50%; } /* styling for images in a half width column*/ .column.half_size img { width: 94.5%; padding: 10px 15px; }



/********************************* SUPPORT CLASSES ********************************/

/* class that clears content below*/ .igem_2017_content_wrapper .clear { clear:both; }


/* adds extra spacing when clearing content */ .igem_2017_content_wrapper .clear.extra_space { height: 30px; }


/* highlight class, makes content slightly smaller */ .igem_2017_content_wrapper .highlight { margin: 0px 15px; padding: 15px 0px; }


/* highlight class, adds a gray background */ .igem_2017_content_wrapper .highlight.gray { background-color: #f2f2f2; }

/* highlight with decoration blue line on top */ .igem_2017_content_wrapper .highlight.blue_top { 

   	border-top: 4px solid #3399ff;

}

/* highlight with a full blue border decoration */ .igem_2017_content_wrapper .highlight.blue_border { 

   	border: 4px solid  #3399ff;

}


/* button class */ .igem_2017_content_wrapper .button{ max-width: 35%; 

		margin: 30px auto;

padding: 12px 10px; 

    	background-color: #3399ff;	
   	text-align: center;
  		color: #ffffff;

-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }

/* styling for button on hover */ .igem_2017_content_wrapper .button:hover{ background-color: #3399ff; 

   	color: #000000;

}



/***************************************************** RESPONSIVE STYLING ****************************************************/

/* IF THE SCREEN IS LESS THAN 1200PX */ @media only screen and (max-width: 1200px) {

#content {width:100%; } .igem_2017_menu_wrapper {width:15%; right:0;} .highlight {padding:10px 0px;} .igem_2017_menu_wrapper #display_menu_control { display:none; } #menu_content { display:block;} .menu_button.direct_to_page {padding-left: 17px;}

}

/* IF THE SCREEN IS LESS THAN 800PX */ @media only screen and (max-width: 800px) { 

		.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}

.igem_2017_content_wrapper {width:100%; margin-left:0px;} .column.half_size {width:100%; } .column.full_size img, .column.half_size img { width: 100%; padding: 10px 0px;} .highlight {padding:15px 5px;} .igem_2017_menu_wrapper #display_menu_control { display:block; } #menu_content { display:none;} .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; } .menu_bottom_padding {display:none;} .menu_button.direct_to_page { padding-left: 36px; } }



/* special class that the system uses to make sure the team wants a page to be evaluated */ .judges-will-not-evaluate { 

   	width: 96.6%;
 		margin: 5px 15px;
 		display: block;

border: 4px solid #3399ff; 

   	font-weight: bold;

}














/****************************************************************************************************************/ /*********************************************** SETS MAIN STYLES ***********************************************/ /****************************************************************************************************************/

/***** TO OVERWRITE iGEM STYLING WHITHOUT MESSING WITH iGEM HEADER USE #windowcontent PREFIX IN CSS SYLING *****/ 

   #windowcontent * {
     box-sizing: border-box;
     font-family: sans-serif, "Times New Roman", Times, serif;
     margin: 0px;
     padding: 0px;
   }

   #windowcontent ul, ol {
     list-style: none;
   }

   /*makes the website span from edge to edge of the viewport*/

   #windowcontent body {
     position: relative;
     width: 100%;
     margin: 0px;
     padding: 0px;
   }

   /***** centers all headlines as standard *****/

   h1, h2, h3, h4, h5, h6 {
     text-align: center;
   }

   /***** defines percentage columns used for layout so everything but the main content spans from edge to edge of the viewport *****/

   .col-1 {
     width: 08.33%;
   }
   .col-2 {
     width: 16.66%;
   }
   .col-3 {
     width: 25.00%;
   }
   .col-4 {
     width: 33.33%;
   }
   .col-5 {
     width: 41.66%;
   }
   .col-6 {
     width: 50.00%;
   }
   .col-7 {
     width: 58.33%;
   }
   .col-8 {
     width: 66.66%;
   }
   .col-9 {
     width: 75.00%;
   }
   .col-10 {
     width: 83.33%;
   }
   .col-11 {
     width: 91.66%;
   }
   .col-12 {
     width: 100.0%;
   }

   /***** defines columns in pixels used for main content area, so user zoom will not affect the layout *****/

   .colp-1 {
     width: calc(1000px/12);
   }
   .colp-2 {
     width: calc(1000px/12*2);
   }
   .colp-3 {
     width: calc(1000px/12*3);
   }
   .colp-4 {
     width: calc(1000px/12*4);
   }
   .colp-5 {
     width: calc(1000px/12*5);
   }
   .colp-6 {
     width: calc(1000px/12*6);
   }
   .colp-7 {
     width: calc(1000px/12*7);
   }
   .colp-8 {
     width: calc(1000px/12*8);
   }
   .colp-9 {
     width: calc(1000px/12*9);
   }
   .colp-10 {
     width: calc(1000px/12*10);
   }
   .colp-11 {
     width: calc(1000px/12*11);
   }
   .colp-12 {
     width: 1000px;
   }

   /***** makes all the columns go to the left of the page and "stack" to the right if room *****/

   [class*="col-"] {
     float: left;
     padding: 15px;
   }

   [class*="colp-"] {
     float: left;
     padding: 15px;
   }

   /***** EACH ROW MUST BE 12 COLUMNS (OF THE SAME TYPE) IN TOTAL *****/
   /************ (for example col-4, col-6, col-2 is a row) ***********/



   /***** clears the row of other content *****/

   .row::after {
     content: "";
     clear: both;
     display: table;
   }


/****************************************************************************************************************/ /*************************** HELPING CLASSES - OVERWRITES OTHER PREDEFINED PROPERTIES ***************************/ /****************************************************************************************************************/ 


   /***** removes margin and padding *****/

   #windowcontent .rmvpadmarg {
     margin: 0px;
     padding: 0px;
   }

   /***** removes vertical lines on links *****/

   #windowcontent .rmvlinkstyle a {
     text-decoration: none;
   }

   /***** brings element to front of page, used to bring nav bar in front of everything else *****/

   #windowcontent .tofront {
     position: relative;
     z-index: 9999;
   }

   /***** sets the position of the element to be given a bottom border *****/

   #windowcontent .bottomborder {
     position: relative;
     padding: 25px 0px;
   }

   /***** styles borders for h1 elements *****/

   #windowcontent h1.bottomborder:after {
     content:""; 
     background: black; 
     position: absolute; 
     left: 150px;
     bottom: 16px;
     height: 1px; 
     width: 700px;
   }



   /***** styles borders for h2 elements *****/

   #windowcontent h2.bottomborder:after {
     content:""; 
     background: black; 
     position: absolute; 
     left: 300px; 
     bottom: 18px;
     height: 1px; 
     width: 400px;
   }

   #windowcontent .fixed {
     position: fixed;
   }


/****************************************************************************************************************/ /**************************************************** NAVBAR ****************************************************/ /****************************************************************************************************************/ 


   /***** defines key properties of the nav bar *****/

   #windowcontent nav {
     margin: 0px;
     padding: 0px;
     overflow: hidden;
     top: 0px;
     width: 100%;
     height: 40px;
   }

   /***** helps center navar. The sum of the nav bar choice widths is 1000px (5*200px) *****/

   #windowcontent .navbarcenter {
     width: 1000px;
     margin: auto;
   }

   /***** sets color of nav bar when the page is scrolled to the top *****/

   #windowcontent .navbar {
     -webkit-transition: background 1s;
     transition: background 1s;
     background-image: -webkit-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
     background-image: -o-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
     background-image: -moz-linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
     background-image: linear-gradient(180deg, rgba(40,40,40,0.6), rgba(150,150,150,0.3));
     box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.3);
   }

   /***** sets the color of the nav bar when scrolled down to the main text TRANSITIONS CANNOT BE USED HERE *****/

   #windowcontent .navbar.scrolledpastnav {
     -webkit-transition: background 1.5s;
     transition: background 1.5s;
     background-color: rgba(20,20,20,1);
     box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.7);
   }

   /***** sets background of navbar choice buttons when hovered *****/

   #windowcontent .dropdown:hover .dropbtn {
     background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
     background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
     background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
     background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
   }

   /***** sets layout of dropdown menu when nav bar changes layout *****/

   #windowcontent .dropdown-content.scrolledpastnav {
     -webkit-transition: background 1.5s;
     transition: background 1.5s;
   }

   /***** makes nav bar choices float next to each other *****/

   #windowcontent .dropdown {
     float: right;
     height: 40px;
   }

   /***** layout of nav bar choice buttons *****/

   #windowcontent .dropdown .dropbtn {
     height: 40px;
     display: inline-block;
     color: white;
     text-align: center;
     padding: 10px 16px;
     width: 200px;
     text-decoration: none;
     font-size: 1em;
     font-family: sans-serif, "Times New Roman", Times, serif;
   }

   /***** hides dropdown choices, sets background and shadows. makes sure that the width is not less than the width of the nav bar choice buttons *****/

   #windowcontent .dropdown-content {
     -webkit-transition: background 1.5s; /* Safari */
     transition: background 1.5s;
     display: none;
     position: absolute;
     background-color: transparent;
     min-width: 200px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
   }

   /***** displays dropdown content when nav bar choice is hovered *****/

   #windowcontent .dropdown:hover .dropdown-content, #windowcontent .dropdown:focus .dropdown-content {
     display: block;
   }

   /***** defines nav bar dropdown link layout *****/

   #windowcontent .dropdown-content a {
     color: black;
     background-color: white;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
   }

   /***** changes navbar dropdown menu color when choice is hovered *****/

   #windowcontent .dropdown-content a:hover, #windowcontent .dropdown-content a:focus {
     background-color: rgb(235,235,235);
   }


/****************************************************************************************************************/ /************************************************* MAIN CONTENT *************************************************/ /****************************************************************************************************************/ 


   /***** styles main text area on main page *****/

   #windowcontent .maincontainer {
     margin: 100px auto;
     width: 1000px;
     text-align: justify;
     clear: both;
     display: table;
   }

/****************************************************************************************************************/ /**************************************************** FOOTER ****************************************************/ /****************************************************************************************************************/ 


   /***** styles main footer area *****/
   
   #windowcontent footer {
     background: #848282;
     color: white;
     width: 100%;
     min-width: 1000px;
     position: absolute;
     text-align: center;
     color: white; 
     font-size: x-small;
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
   }

   /***** defines a container of same width as main content that contains footer content *****/

   #windowcontent .footercontainer {
     width: 1000px;
     margin: 20px auto 25px auto;
   }

   /***** centers footer content in the individual columns *****/
   
   #windowcontent .footercolstyle * {
     align-content: center;
     text-align: center;
   }

   #windowcontent .footercolstyle a {
     padding: 0px;
   }

   /***** styles left footer column *****/
   
   #windowcontent .leftfootercol {
     float: left;
   }

   /***** styles right footer column *****/

   #windowcontent .rightfootercol {
     float: right;
   }

   /***** gives space between the "find us at" icons *****/
   
   #windowcontent footer img {
     margin: 10px;
   }