/* CSS Document */


/************************************************************************/
/* Change div background to keep them visible from the background image */
/************************************************************************/
body {
	padding-top: 60px;
	background-color:rgba(251,253,216,0.25);
}

#MyNavBar, #navbar, #navbar2 {
	background-color: rgba(8,70,195,1);
}

#FC_Logo {
	float: left;
/*	display: inline;*/
	height: 50px; /* ori 250 - disp 50% */
	width: 46px; /* ori 229 - disp 50% */
	padding: 10px;
}

.SmallNote {
	font-size: 12px;
}

/* The default value is 14px, which is too large */
p.jumbotron body.jumbotron {
	font-size: 10px !important;
}

/* The grey background colour is annoying and makes me depressed */
.jumbotron {
	background-color: rgba(8,70,195,0.5) !important;
	color: white;
}

/* Title text - typically h1 to h2 */
.ttltxt {
	background-color: rgba(8,70,195,0.3);
	border-radius: 10px;
	padding: 15px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	font-size: 24px;
/*
	font-weight: 200;
*/
	line-height: 1.5;
	color: black;
	box-shadow: 10px 10px 5px #AAAAAA;
}

/* Subtitle text - typically h3 to h4 */
.subttltxt {
	background-color: rgba(8,70,195,0.2);
	border-radius: 10px;
	padding: 15px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	font-size: 18px;
	font-weight: 220;
	line-height: 1.5;
	color: black;
	box-shadow: 10px 10px 5px #AAAAAA;
}

/* Block text */
.bloctxt {
	background-color: rgba(8,70,195,0.05);
	border-radius: 10px;
	padding: 16px 12px; /* former 10px for all */
	border: 1px solid #ccc; /* former didn't exist - copied from TabView */
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	font-size: 14px;
	font-weight: 240;
	line-height: 1.5;
	color: black;
	box-shadow: 7px 7px 3px #AAAAAA;
}

.table tr:hover {
/*
	font-weight: bold !important;
	font-size: 14px !important;
*/
	color: black;
	background-color: rgba(8,70,195,0.2) !important;
}

.table td:focus {
	color: black;
	background-color: rgba(195,210,245,1.00) !important;
}

.TblNews {
	width: 100%;
}

.TblNews tr {
	border-bottom: 2px solid rgba(8,70,195,0.5);
	color:rgba(0,0,0,0.65);
}

.TblCSS {
	object-position: center;
	border: thin;
	color: white;
	background: rgba(8,70,195,0.5);
	z-index: 5;
}

.TblButton {
	position: relative;
}

/* Table - non Bootstrap CSS */
/* Tables in the "about.php" page */
.tbl {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border: solid rgba(8,70,195,0.7) 2px;
	border-radius: 6px;
	border-collapse: separate;
	box-shadow: 7px 7px 3px #888888;
}

/* Used on each table row to highlight the row that the mouse is hovering */
/* Table - non Bootstrap CSS */
/* Tables in the "about.php" page */
.tbl tr:hover {
	background-color: rgba(8,70,195,0.7) !important;
}

/* Table - non Bootstrap CSS */
/* Tables in the "about.php" page */
.tbl tr:nth-last-child(odd) {
	background: rgba(8,70,195,0.25);
}

/* Table - non Bootstrap CSS */
/* Tables in the "about.php" page */
.tbl tr:nth-last-child(even) {
	background: rgba(8,70,195,0.35);
}

/* Table - non Bootstrap CSS */
/* Tables in the "about.php" page */
.tbl th {
	border-right: solid rgba(8,70,195,0.7) 1px;
	border-left: solid rgba(8,70,195,0.7) 1px;
	padding: 1px 10px;
	color: white;
}

/* Table - non Bootstrap CSS */
/* Tables in the "about.php" page */
.tbl td {
	border-right: solid rgba(8,70,195,0.7) 1px;
	border-left: solid rgba(8,70,195,0.7) 1px;
	padding: 1px 10px;
}

/* Footer text */
.footer {
	background-color: rgba(8,70,195,1);
	text-align: center;
	vertical-align: text-bottom;
	font-size: 12px;
	color: white;
	width: 100%;
}

#divNews, #divAddNews, #divEvent, #divEventAdd {
	object-position: left;
	color: white;
	background: rgba(8,70,195,0.5);
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
	border-radius: 10px;
	-webkit-animation: fadeEffect 1s;
	animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/************************************************************************/
/* Format of tables in the Intranet                                     */
/************************************************************************/

.blocTbl {
	background-color: rgba(8,70,195,0.05);
	border-radius: 10px;
	padding: 16px 12px; /* former 10px for all */
	border: 1px solid #ccc; /* former didn't exist - copied from TabView */
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	font-size: 14px;
/*	font-weight: 240;*/
	line-height: 1.5;
	color: black;
	box-shadow: 7px 7px 3px #AAAAAA;
}

.TblTtl {
	font-size: 14px;
	object-position: left;
	color: white;
}

.TblHdr {
	font-size: 16px;
	object-position: left;
	color: black;
}

#TabRide, #TabTeam, #TabVoluntree, #TabVehicule, #TabEvtNight, #TabEvent {
	object-position: center;
	border: thin;
	color: white;
	background: rgba(8,70,195,0.5);
	z-index: 5;
}

#divRideEvnt, #divTeamEvnt, #divVolunteerEvnt, #divVehicleEvnt, #divNight, #divEvent, #divAccessReq {
	font-size: 11px;
	object-position: left;
	color: white;
	background: rgba(8,70,195,0.5);
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
	border-radius: 10px;
	-webkit-animation: fadeEffect 1s;
	animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* used for the total elements counting on each table */
h2 span.Counting {
	font-size: 40%;
	font-weight: normal;
}


/************************************************************************/
/* Show tables in tabs                                                  */
/************************************************************************/

/* Style for the tabs */
.tablinks {
	background-color: rgba(8,70,195,0.2);
	width: auto;
	border-radius: 10px;
}

.Tabs {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: rgba(8,70,195,0.2);
	border-radius: 10px;
}

/* Style for the button in the tab */
.Tabs button {
	background-color: inherit;
	color: white;
	font-weight: bolder;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 12px 14px;
	transition: 0.5s;
}

/* Change background color of buttons on hover */
.Tabs button:hover {
	background-color: rgba(8,70,195,0.5);
}

/* Create an active/current tablink class */
.Tabs button.active {
	background-color: rgba(8,70,195,0.7);
}

/* Style the tab content */
.TabView {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
	border-radius: 10px;
	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"; /* copied from divNews */
}

/* Adding a fading effect on the tab */
.TabView {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

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


/************************************************************************/
/* end of show tables in tabs                                           */
/************************************************************************/



/************************************************************************/
/* Background image of the page, which is an animated slideshow         */
/* Version 1 with static background                                     */
/************************************************************************/

/* 
body {
	background-image: url(/NRNVD/images/Yverdon_Image.jpg);
	background-size: 100%;
	background: cover, center, fixed;
}

*/
/************************************************************************/
/* end of version 1 with static background                              */
/************************************************************************/



/************************************************************************/
/* Background image of the page, which is an animated slideshow         */
/* Version 2 with carousel background using figures                     */
/************************************************************************/

/* Core CSS styles */
.CrossFade > figure {
	animation: imageAnimation 72s linear infinite 0s; /* "imageAnimation 72s" corresponds to the nb of images * nb of images - 1 */
	backface-visibility: hidden;
	background-size: cover;
	background-position: center center;
	color: transparent;
	height: 100%;
	left: 0px;
	opacity: 0;
	position: absolute;
	top: 0px;
	width: 100%; /* Initial value = 100% */
	margin-left: 0;
	margin-right: 0;
	z-index: 0;
}

/* Background images of the slideshow */
.CrossFade > figure:nth-child(1) { background-image: url('/NRNVD/images/Yverdon_Holi2015_0.jpg'); }

.CrossFade > figure:nth-child(2) {
	animation-delay: 9s;
	background-image: url(/images/Yverdon_Holi2015_0.jpg);
}

.CrossFade > figure:nth-child(3) {
	animation-delay: 18s;
	background-image: url(/images/Yverdon_Holi2015_0.jpg);
}

.CrossFade > figure:nth-child(4) {
	animation-delay: 27s;
	background-image: url(/images/Yverdon_Holi2015_2.jpg);
}

.CrossFade > figure:nth-child(5) {
	animation-delay: 36s;
	background-image: url(/NRNVD/images/Yverdon_Holi2015_5.jpg);
}

.CrossFade > figure:nth-child(6) {
	animation-delay: 45s;
	background-image: url(/images/Yverdon_Holi2015_5.jpg);
}

.CrossFade > figure:nth-child(7) {
	animation-delay: 54s;
	background-image: url(/NRNVD/images/Yverdon_Holi2015_7.jpg);
}

.CrossFade > figure:nth-child(8) {
	animation-delay: 63s;
	background-image: url(/NRNVD/images/Yverdon_Holi2015_8.jpg);
}

/* CrossFade effect using CSS3 animations */
@keyframes imageAnimation {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
		}
	8% {
		animation-timing-function: ease-out;
		opacity: 0.4; /* initial value = 1 */
		}
	17% {
		opacity: 0.4; /* initial value = 1 */
		}
	25% {
		opacity: 0;
		}
	100% {
		opacity: 0;
		}
}

/************************************************************************/
/* end of version 2 with carousel background using figures              */
/************************************************************************/



/************************************************************************/
/* Example used for replacing flash animation                           */
/************************************************************************/

/* code for the html page

<html>
  <head>
   <title>CSS3 Animations amp; Transitions</title>

   <link rel:"stylesheet" type="text/css" href="../NRNVD/style.css">

<!--[if IE]>
   <script src="http://html5shim.google.com/svn/trunk/html5.js"></script>
   <![endif]-->

  </head>
  <body id="animations">
   <h1 css3 Animation &amp; Transitions</h1>
   <div id="MyBox">This is my box!</div>
  </body>
 </html>

*/

/* start of stylesheet */

/* Animation & Transitions */


@-webkit-keyframes MyBox {
	from {background-color: white; color: white; width: 10px; border-radius: 40px;}
	to {background-color: red; color: white; width: 50px; border-radius: 100px;}
}
@-o-keyframes MyBox {
	from {background-color: white; color: white; width: 10px; border-radius: 40px;}
	to {background-color: red; color: white; width: 50px; border-radius: 100px;}
}
@-moz-keyframes identifier {
	from {background-color: white; color: white; width: 10px; border-radius: 40px;}
	to {background-color: red; color: white; width: 50px; border-radius: 100px;}
}
@keyframes identifier {
	from {background-color: white; color: white; width: 10px; border-radius: 40px;}
	to {background-color: red; color: white; width: 50px; border-radius: 100px;}
}

#animations #MyBox {
	animation-name: MyBox;
	animation-duration: 10s;
	animation-delay: 3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;

/* shorthand */
/*	animation: MyBox 10s 2s infinite alternate;  */
}