/* CSS Document */

/*********************
General linear-gradient(#666, #FFF)
**********************/

body {
	font-family: 'Cabin Sketch', cursive;
}

#wrapper {
		max-width:  940px;
		margin: 0 auto;
		padding:0  35%;
		 
	}
	
a {
	text-decoration: none;
	}

img {
	max-width:  100%;  /* This keeps images from breaking outside of containers*/
	
	}



	
/*********************
Heading
**********************/

/* these next few lines of code are to get the weird white space at the top of the page to go away*/
#welcome_user {
	float: left;
	margin: 10px 5px 10px 5px; /* top, right, bottom, left*/
	padding: 5px 5px 5px 5px; /*top, right, bottom, left*/
	width:  100%; /*If I do not do this IT LOOKS ODD!!!*/
	text-align: left;
	
	
}



header {
	float: left;
	margin: 0 0 0px 0; /* top, right, bottom, left*/
	padding: 0 0 0 0; /*top, right, bottom, left*/
	width:  100%; /*If I do not do this IT LOOKS ODD!!!*/
	
	
}

#logo {
	text-align: center;
	padding-top: 0;
	font-size: 10px;
	
}



#header img {
	position: relative;
	top: 5px;
	left: 5px;
}






h1  {
	font-family: 'Cabin Sketch', cursive;
	margin:  15px, 0;
	font-size: 1.75 em;
	font-weight:  Bold 700;
	line-height:  0.8em;
	text-shadow: 5px 8px 0 #000;/* From "Beginner CSS" horizontal, vertical, blur radius, colour */
}

h1, title {
	padding-left: 43%;
}

h2  {
	font-size: 0.75 em;
	margin: -5px 0 0;
	font-weight: normal; 
	
	}
h3 {
	font-size: 10px; /*This was .90em*/
	margin: -5px 0 0;
	font-weight: normal; 
	text-align: center;
	
}

h3, a:hover {
	color: red;
}

/********
Image on homepage for the banner
**************/
.img_home
{
	max-width:  100%;  /* This keeps images from breaking outside of containers*/
	
	margin-bottom: 0px;
	margin-top:20px;
}



	/*********************

Column Layout: This is where I will put the dictees.
**********************/
.title_strip
{
	font-size: 48px;
	text-align: center;
	
	
}

/*tr:hover { 
	background: #FCEE21;
	
} */

tr {
	background-color: #1D65ED;
	color: black;
}

td {
	border: 3px solid black;
	font-size: 24px;
	margin: 5px 5px 5px 5px;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	padding-right: 4px;
	color:#090707;
}

th {
	font-size: 26px;
	text-align: left;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 4px;
	padding-right: 4px;
	
}

.table {
	align-content: center;
	border-collapse: collapse;
	margin: 50px 50px 50px 50px;
	width: 90%
}

.item_1   /* This id selector is REDUNDANT because I used the tbody nth-child thingy to do the zebra stripes for the table in one fell swoop, but I'll leave this here in case I need it to style something else*/

{
	background-color: 
		#A4BCD9;
	}

/**** This is where I am putting the code from www.w3schools.com that explains how to make a pop-up. I want to make a pop-up so that parents who forget what I mean by "pre-dictee" can hover their mouse over the word, and then the will see a pop-up window that explains it****/

/* Popup container for LA PRE-Dictee! I need to figure out how to make this more efficiant. I know there is an easiesr way to get the colum headers to each refer to a different popup text. Ugh.*/
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
	
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
	height: 250px;
    width: 600px;
	overflow: scroll;
    background-color: #555;
    color: #fff;
	font-size: 12px;
    text-align: left;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

tbody tr:nth-child(odd){
	background-color: #A4BCD9;
}

 
/*******Pop up box style for the words "CLIQUE ICI"*****/


h3:hover {
	color: red;
}



/*** Style for TABLE DATA ******/
td {
	font-size: 10px;
	color: black;
}



/* Popup container for LA DICTEE FINALE! I need to figure out how to make this more efficiant. I know there is an easiesr way to get the colum headers to each refer to a different popup text. Ugh.*/
.popup1 {
    position: relative;
    display: inline-block;
    cursor: pointer;
	
}

/* The actual popup (appears on top) */
.popup1 .popuptext1 {
    visibility: hidden;
    height: 250px;
    width: 600px;
	overflow: left;
    background-color: #555;
    color: #fff;
	font-size: 12px;
    text-align: left;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup1 .popuptext1::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup1 .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

tbody tr:nth-child(odd){
	background-color: #A4BCD9;
}

/* Popup container for PDF! I need to figure out how to make this more efficiant. I know there is an easiesr way to get the colum headers to each refer to a different popup text. Ugh.*/
.popup2 {
    position: relative;
    display: inline-block;
    cursor: pointer;
	
}

/* The actual popup (appears on top) */
.popup2 .popuptext2 {
    visibility: hidden;
    height: 150px;
    width: 200px;
	overflow: left;
    background-color: #555;
    color: #fff;
	font-size: 12px;
    text-align: left;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup2 .popuptext2::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup2 .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

tbody tr:nth-child(odd){
	background-color: #A4BCD9;
}


/* Popup container for YOUTUBE VIDEO! I need to figure out how to make this more efficiant. I know there is an easiesr way to get the colum headers to each refer to a different popup text. Ugh.*/
.popup3 {
    position: relative;
    display: inline-block;
    cursor: pointer;
	
}

/* The actual popup (appears on top) */
.popup3 .popuptext3 {
    visibility: hidden;
    height: 150px;
    width: 300px;
	overflow: left;
    background-color: #555;
    color: #fff;
	font-size: 12px;
    text-align: left;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup3 .popuptext3::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup3 .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

tbody tr:nth-child(odd){
	background-color: #A4BCD9;
}


/* Popup container for GAME! I need to figure out how to make this more efficiant. I know there is an easiesr way to get the colum headers to each refer to a different popup text. Ugh.*/
.popup4 {
    position: relative;
    display: inline-block;
    cursor: pointer;
	
}

/* The actual popup (appears on top) */
.popup4 .popuptext4 {
    visibility: hidden;
    height: 150px;
    width: 300px;
	overflow: left;
    background-color: #555;
    color: #fff;
	font-size: 12px;
    text-align: left;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup4 .popuptext4::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup4 .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

tbody tr:nth-child(odd){
	background-color: #A4BCD9;
}


/* Popup container for LE SON DE LA SEMAINE! I need to figure out how to make this more efficiant. I know there is an easiesr way to get the colum headers to each refer to a different popup text. Ugh.*/
.popup5 {
    position: relative;
    display: inline-block;
    cursor: pointer;
	
}

/* The actual popup (appears on top) */
.popup5 .popuptext5 {
    visibility: hidden;
    height: 100px;
    width: 250px;
	overflow: left;
    background-color: #555;
    color: #fff;
	font-size: 12px;
    text-align: left;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup5 .popuptext5::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup5 .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

tbody tr:nth-child(odd){
	background-color: #A4BCD9;
}




 

 



/********************* Style the duo-tang image****/
#duotang {
	float: left;  
	align: center;
	
}


/*********************
IMAGES// Dude from video did not have us create this images bit.  I made it, along with the code below. 
**********************/
	
img {
	max-width: 100%;
	margin-bottom: 20px;
	
	
	text-shadow: 5px 8px 0 #000;/* From "Beginner CSS" horizontal, vertical, blur radius, colour */
}
	
	
	
	
/*********************
Navigation
**********************/
#main-menu {  /*if you like the MAIN-MENU (aka top nav-strip) vertical then take out lines 86 to 97*/
	/*list-style: none;
	margin: 0;
	padding:0;
	font-size: 75%;
	
}
#main-menu > li {
	float: left;
	width: 130px;
	margin-right: 200px;
	postion: relative; 	*/
}

#main_list {
	font-size: 2.90em;
	
	
}







nav {
	text-align: center;
	padding: 10px, 0;
	margin: 10 px 0 0;
	
}

nav ul {
	list-style: none; 
	margin: 0 10px; /* top/bottom, left/right*/
	padding: 0; 
}

nav li {
	display: inline; /*  "inline-block" allows us to have items line by line, but will also allow us to have width and height features.  Dude suggested we do "inline-block, but I did not like it.*/ 
	
}

nav a {
	font-weight: Bold 700;
	padding:  15px 10px; 
	}

/*********************
Footer
**********************/


#footer {
	font-size:   0.75 em;
	text-align: center;
	
	
	
	
}


/*********************
Page: Portfolio
**********************/

#gallery {
	margin: 0;
	padding:  0;
	list-style: none ; /*Removes bullet points if we set it to 'none"*/
	
	
}

#gallery li { /*Styles the list items*/
	float: left; /* makes items appear side by side. Allows us to position items in a special way.  Floating elements makes them appear side by side. */
	width:  45%; /* Regardless of browser layout each image will only ever take up 45% of the parent element! The parent element has not been specified, so it defaults to 100% This means 10% extra room on either side because 45+45 = 90. HE CHOSE 25% but I did not like. */ 
	margin:  2.5%;  /* So this fills up the 10% of extra space from the width, because there are supposed to be 2 images in a row, each having 2.5 other either sides. There are four sides*/
/*padding-top:  2.5%;  /*I added this.  It makes the images go down a bit. */
	background-color:  #063;
	color:  #090;
	
	/*font-family: 'Cabin Sketch', cursive;  /*  The next 4 lines, I added myself. It seems to have added style to the captions under the images, and has centered the images
	 font-size: .75 em;
	 font-weight:  normal;
	 text-align: center;
	 color: #FFF;
*/
box-shadow: 0px 15px 20px -12px   rgba(0,0,0, .8); /* horizontal, vertical, blur,  colour (then alpha). */
border-radius:  50%;
height:  250px; 

}





#gallery li, a, p {   /* Dude did not put commas between the li, a, and p, but I did and THEN this works HOWEVER NOW MY FOOTER IS WHITE!!!!!!   */
	margin: 0;
	padding: 2%;
	font-size: 1.75em;
	text-align: center;
	color: #fff;
	
}


#footer p {  /*  I have to make my footer CLEAR so it does not float. I put the line "clear: both" here, but it may need to go up to the other footer spot.  So far, so good.  */
	color: #bdc3c7;
	clear: both;
}

#footer img {
	postion: relative;
	float: left;
}

/*********************
Colours 
**********************/



/* site body*/
body {
	background-image: linear-gradient(#666, #FFF);  /*I had this set to white, and now I flipped it to a gradient. The dude did not demonstrate this.*/
	background: white;
	color: #999;
	position:  relative;
	
	
}
		
/* header*/

#header {
	background: #1D65ED; 
	border-color: #1D65ED;
}

nav {
	background: #1D65ED;
	
}


/*logo text*/	
h1, h3 {
	color: #fff;		
}

/*link*/
a{
	color: #000000;
	
	}
	
/* nav background on mobile devices*/
		

/*nav links*/	
nav a, nav a:visited {
	color: #fff;
}

/*selected nav link colour*/	
nav a.selected, nav a:hover {
	color: black;
	
}

/*Welcome user message above the navigation*/
#welcome_user div, h3 {
	float: none;
	color: #000000;
	
}


.float-left
{
	padding: 2px;	
	margin: 10px;
	
	
}