/* Responsive style sheet*/
#navigation {
/*  background-image: url("images/dreamstime_s_6874767.jpg") no-repeat 0 100%; 
  <!-- background-image: url("images/dreamstime_s_6874767.jpg"); -->
  background-repeat: no-repeat; */
  display: table; /*Display div that it encloses ie helper in the next "column" */
  padding: 5px 0px 5px 0px;
  height: 100%;
  position: relative;
  overflow: hidden;
  width: 100%;
}

#topBanner {
   background-image: url("../images/ecdesign6.jpg"); 
   background-repeat: no-repeat;
   height: 170px;
}

#topBannerLeft {
float: left;
width: inherit;
height: 50px;
/*background: grey;*/
}

#topBannerRight {
float: right;
width: auto;
height: 50px;
/*background: grey;*/
}

#topBanner h1{
padding-left: 25px;
}

.align-left {
float: left;
}

.align-right {
   float: right;
  /*padding-top: 50px;*/
}

body {
background-image: url("../images/whiteOnBlack.png");
background-repeat: repeat-both;
  font-size: 1em;
/*  background: black;*/
  /*opacity: 0.50;*/
  color: white;
}

wrapper {
/*background: Grey;*/
}

h1 {
font-size: 1em;
}

h2 {
font-size: 0.85em;
}

h3 {
font-size: 0.85em;
}

p {
font-size: 0.85em;
}

a {
font-size: 0.85em;
}

a, a:visited {
color: white;
}

#footer li {
color:black;
}

img {
/*   display: table-cell;*/
display: block;
   float: none;
   /*margin: 10px 10px 10px 10px;*/
/*padding: 20px 20px 20px 20px;*/
}

table img{
display:inline;

}

td img {
padding-left: 5px;
}

a:visited, a:link {
text-decoration:none;
}

footer a:hover {
color: black;
}

img:hover {
   opacity: 1.0;
   filter: alpha(opacity=100); /* For IE8 and earlier */
}

.border { /* For images*/
/*float:left;*/
display:inline; /*block*/
text-align: center;
/* margin-left: auto; */
/* margin-right: auto; */
/*margin-top: 0px;*/
margin-bottom: 20px;
border-width: 1px;
border-style: solid;
/*border-color: #eac67a;*/
border-color: orange;
background-size: 200px 200px;
}

#social-network {
padding: 10px 10px 10px 10px;
}

.socialMedia img {
margin: 10px 10px 10px 10px;
   opacity: 0.5;
   filter: alpha(opacity=50); /* For IE8 and earlier */
   display: inline;
   float: left;
}

.socialMedia img:hover {
   opacity: 1.0;
   filter: alpha(opacity=100); /* For IE8 and earlier */
}

#navigation ul {
   background-image: url("../images/ul.png"); 
   background-repeat: no-repeat;
   margin: 2px 7px 2px 5px;
   list-style-type: none;
}

#navigation li {
/*margin: 7px 7px 7px 7px;*/
margin: 5px 5px 5px 5px;
padding: 3px 3px 3px 3px;
background: grey;
border-color: blue;
width: auto;
color: green;
display: inline;
border-radius: 6px;
border: 1px solid #73AD21;
text-decoration: none;
}

/*
#contentAreaFull {
color: orange;
}
*/

#contentAreaFull {
  #position: absolute; /*a variation of an "lte ie7" hack*/
  #top: 50%;
  background-image: url("images/bing.jpeg") no-repeat 0 100%;
  display: table-cell;
  margin: 5px 5px 5px 5px;
  padding: 5px 15px 35px 5px;
  vertical-align: middle;
  float: left;
  width: auto; /* Was 505*/
/*  background: #f0f0f0;*/
background: black;
color: #cfcdcd;
  border-radius: 8px;
  border: 1px solid orange;
}

#contentArea {
 margin: 5px 5px 5px 5px;
  padding: 5px 15px 35px 5px;
display:table-cell;
float:left;
width: 75%;
background: black;
color: #cfcdcd;
border-radius: 8px;
border: 1px solid orange;
}


#contentArea h1 {
/*color: #ec8400;*/
color: lightgreen;
}

#headerArea {
/*  display: table-cell;*/ 
display: block;
  margin: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
  vertical-align: middle;
  float: left;
  width: 65%;
  background: #f0f0f0;
}

#footer {
  display: table;
  margin: 5px 5px 15px 5px;
  padding: 5px 5px 5px 5px;
  vertical-align: middle;
  float: left;
  width: 100%;
  background: black;
  color: lightgrey;
  border-radius: 8px;
  border: 1px solid #73AD21;
}

#footer li {
margin: 7px 7px 7px 7px;
padding: 1px 2px 1px 2px;
background: lightorange;
border-color: blue;
width: auto;
color: white;
display: inline;
border-radius: 6px;
border: 1px solid #73AD21;
text-decoration: none;
}

#headerArea h1 p {
background-color: white;
color: green;
font-size:1em;
}

#headerArea a {
text-decoration: none;
}

#contentArea img {
   /*align: left;*/
   opacity: 1;
   filter: alpha(opacity=100); /* For IE8 and earlier */
}

#rightPanel {
/*top: -150px;*/
top: 50%;
float: left;
width: auto;
margin-top: 6px;
/*padding: 0px 20px 20px 20px;*/
border-radius: 6px;
border: 4px solid grey;

}

#rightPanel img {
/*margin-left: auto;/* Centre the image*/
/*margin-right: auto;/* Centre the image */
/*margin-top: 30px;*/
/*float: left;*/
padding: 2% 2%  2% 2%;
width: auto;
height: inherit;
}

#imageGroup {
/*float: left;*/
/*padding: 10px 10px 10px 10px;*/
color: red;
background: black;
width: auto;
height: auto;
}

#imageGroup p {
font-style: italic;
font-size:0.85em;
text-decoration: none;
position:relative;
/*padding: 20px 20px 80px 20px;*/
top: -125px;
/*left: 80px;*/
margin: 0 auto;
/*right: 75px;*/
color:black;
/*width: 170px;*/
width:35%;
/*height: 80px;*/
background-image: url(../images/grid.png);
background-repeat: repeat-both;
border-width: 1px;
/*border-style: dashed;*/
border-color: blue;
/*background: red;*/
color: white;
}

.imageHolder img {
background: red;
/*position: absolute;*/
/*float: left;*/
border-width: 8px;
border-style: solid;
border-color: grey;
color:black;
width: 150px;
height: 150px;
}

/*
.imageHolder p {
color: green;
top: -35px; 
}
*/

#imageGroup p:before {
    content: '"';
}
#imageGroup p:after {
    content: '"';
}

.content {
  position: relative;
  top: -50%;
padding: 5px 5px 5px 5px;
/*  margin:0 auto; */
  width:65%; /*was 200px*/
  float:right;
  background: white;
  border-style: hairline;
}

/*
#contentAreaFull {
  position: relative;
  top: -50%;
padding: 5px 5px 5px 5px;
  margin:0 auto; 
  width: auto;
  float:left;
  background: black;
  border-style: hairline;
}
*/

contentAreaFull table{

}

h1 {
color:lightgreen;
}

.content p {
 margin: 5px 15px 5px 5px;
}

/*
@media (max-width: 1300px) { 
	#navigation, #contentArea, #headerArea, #rightPanel{
           float: none;
	   width: 50%;
	}
}
*/

th {
width:auto;
font-size: 0.75em;
color: orange;
}
td {
font-size:0.65em;
}

tr:nth-child(even) {
color: white;
/* background: #231c23; */
background:#191515;
}

@media (max-width: 1600px) {

        body {
           font-size: 1em;
        }

	.contents {
	   position: relative;
	}
	#navigation, #headerArea, #contentArea{
           float: left;
	   width: auto;
	}

        #contentArea {
           width: 75%;
       }

        #rightPanel {
           float: left;
	   width: auto;
        }

	li {
	    font-size:0.8em;
	}

        #navigation li {
           background: grey;
           color: grey;
           display: inline;
           border-radius: 46px;
           /* border: 1px solid orange;*/
	   border: 1px solid #73AD21;
           /*padding: 5px 20px 5px 20px; */
           width: inherit;
           height: 25px; 
           color: red; 
           text-decoration: none;
        }
        #footer li {
           background: black;
           color: grey;
           display: inline;
           border-radius: 6px;
	   border: 1px solid #73AD21;
           padding-left: 5px; 
           width: auto;
           height: 15px; 
           text-decoration: none;
        }
}


@media (max-width: 1279px) { 

        body {
           font-size: 1em;
        }

	.contents {
	   position: relative;
	}
	#navigation, #headerArea, #contentArea {
           float: left;
	   width: auto;
	}

        #contentArea {
           width: 75%;
       }

        #rightPanel {
           float: right;
	   width:auto;
        }

        #navigation li {
           /*background: black;*/
	    color: grey;
           display: block;
/* border: 5px 5px 5px 5px; */
           border-radius: 6px;
	   border: 1px solid #73AD21;
           /*padding: 5px 5px 5px 5px; */
           width:inherit;
           height: auto;  
           /*color: black;*/

        }
        #footer li {
           background: black;
           display: block;
           border-radius: 3px;
	   border: 1px solid #73AD21;
           padding-left: 5px; 
           width:auto;
           height: auto;  
           color: white;
        }
}

@media (max-width: 600 px) { 

    #footer li {
        display: block;
    }
    
}

@media (max-width: 360px) { /* Below 360 do the following */

        body {
           font-size: 1em;
        }

	.contents {
	   position: relative;
	}
	#navigation, #contentArea, #headerArea, #rightPanel{
           float: left;
	   width: 100%;
	}

        #navigation li {
           /*background: black;*/
           display: block;
           border-radius: 3px;
	   border: 1px solid #73AD21;
           padding-left: 5px; 
           width:auto;
           height: auto;  
           color: blue;
        }

        #footer li {
           background: black;
           display: block;
           border-radius: 3px;
	   border: 1px solid #73AD21;
           padding-left: 5px; 
           width:auto;
           height: auto;  
           color: black;
        }
}