/*************************************************/
/*                                               */
/* Student : Paul Bradder                        */
/*                                               */
/*************************************************/

/*************************************************/
/*                                               */
/*Home Technology                                */
/*main _styles.css                               */
/*                                               */
/*************************************************/

/* Global default settings start */ 

body{
	font-family: Arial,sans-serif; /* set default Fonts */
	color: #000000; /* Default text color */
	line-height: 1.166; /* Line Height */
	background:#FFFFFF; /* Main background color */
	background-color: #FFFFFF; /* #B9D5FF background color */
	voice-family: Paul;
}

a:link, a:visited { /* Default links/visited */
	color: #000000; /* link/visited color */
	text-decoration: underline; /* Main text link/visited decoration */
	font-weight: normal; /* Main text link/visited text weight */
}

a:hover { /* defualt hover */
	color: #000000; /* link/visited color */
	text-decoration: blink; /* hover decoration */
	/*font-weight: bold; *//* Main text hover text weight */
	
}

h1, h2, h3, h4, h5, h6 { /* Styles for heading text */
	font-family: Arial,sans-serif; /* Fonts */
	margin: 0px; /* Space at the left of  the H text */
	padding: 0px; /* Space around the H text */
}

/* Defualt sizes and color for text within listed html tags */
h1{
 	font-size: 150%; /* font size */
 	color: #000000; /* font color */
}

h2{
 	font-size: 114%;
 	color: #000000;
}

h3{
 	font-size: 100%;
 	color: #FF6600;
}

h4{
 	font-size: 100%;
 	font-weight: normal;
 	color: #333333;
}

h5{	font-size: 100%;
	color: #334d55;
}

li{	font-size: 100%;
	color: #3399CC;
 } 
/* Global default settings end */

/***********************************************/
/* Container properties                        */
/***********************************************/
#MainContainer{
	margin-right:1px;
	margin-left:1px;
	margin-top:1px;
	margin-bottom:1px;
	background:#FFFFFF; /*Container background color */
	border:0px solid #000;
	padding: 1px;
	min-width:800px; /* For newer browsers - Stops contents from being crushed*/
}

#PageHeader{
	padding: 0%; /* padding within page header top, bottom and sides */
	/*padding: 5px; *//* Alternative */	
}

#HeaderImage{
   text-align: center; /* A way of centering an image, mostly used for text. It works*/
   padding: 0px 0px 0px 0px; /* Space around Image - not used looks better*/

}

#NavigationMenu{ /* note: this container holds the mainlinks a collection of containers */
	float:left; /* If one or more containers are used on same row - this makes the container sit to the left or right */
	width: 21%; /* width of container */
	min-width:21%; /* For newer browsers - Stops contents from being crushed*/
}

.Article{
	font-size: 80%;
	float:right; 
	width: 78%;
	min-width:78%; /* For newer browsers - Stops contents from being crushed*/
	/*padding: 1%;*/ /* Spacing inside article container - this does alter the size of the container */
}

.Article2{
	font-size: 80%;
	float:right; 
	width: 78%;
	min-width:78%; /* For newer browsers - Stops contents from being crushed*/
	/*padding: 1%;*/ /* Spacing inside article container - this does alter the size of the container */
}

#PageFooter{
	clear: both; /* goes to the bottom of the float boxes */
	border: 0px solid #cccccc; /* border around footer box */
	font-size: 75%; /* Size of the fonts */
	color: #777777; /* Color of the text #555555 to #888888 #AAAAAA #cccccc*/
	padding: 10px 10px 10px 10px; /* Spacing inside footer box */
}

/***********************************************/
/*Component Divs                               */
/***********************************************/
#SiteTitle{ /*site title - if used*/
	padding: 10px;
	color: #000000;
	font-size: 200%;
}

/*************** Headlines styles **************/
#Headlines{
	padding: 5px;
}

/************* GlobalNavigation styles **************/
#GlobalNavigation{
	color: #FFFFFF; /* text color */
	/* white-space: nowrap; optional*/
	background-color: #0033CC;
	font-size: 90%;
	padding: 5px 5px 5px 5px; /* padding around text */ 
	text-align: center;	
}

/* overide defaults for these links */
#GlobalNavigation a:link{ 
	color: #CCCCCC;
	text-decoration: none;
}
#GlobalNavigation a:visited{
	color: #CCCCCC;
	text-decoration: none;
}
#GlobalNavigation a:hover{
	color: #CCCCCC;
	font-weight: normal;
	text-decoration: blink;
}

/************** story styles *****************/
.Article p{
	padding: 0px; /* Text spacing within the paragraph */
    /*font-size: 6px; /* font size */
}

.Article h2{
	padding: 5px 0px 5px 0px; /* Text spacing within the paragraph */
}

.Article h3{
	padding: 5px; /* Text spacing within the paragraph */
}

   .Article img{
/*	float: left; /* Move image left or right */
/*  	clear: right;*/
	width: ;
	height: 150px;
    padding: 5px 5px 5px 5px;   /* Top-Right-Bottom-Left Padding around content.  Works simler to Margin*/
/*border-style: solid;
border-color: #696969;
border-width: 8px;*/
 
}

.Article p{
	padding: 0px; /* TexDyson have long been a company of innovation, ever since their first invention the Dyson vortex vacuum cleaner. They now are inventing washing machines with a twist. Many people do not realise the amount of computing power used within most washing machine. the microprocessor power used in modern washing machines is said to be more powerful that used in the Apollo rockets to get to the moon. The processes of washing cloths needs to be organised using sensors and timers to complete a wash. Pre wash to rinse spin all are controlled by dedication processor chips.  Dyson have introduced a washing machine that uses a lot less power and water. Good to know that some companies are taking the time to think about the environment.
t spacing within the paragraph */
}

.Article2 h2{
	padding: 5px; /* Text spacing within the paragraph */
}

.Article2 h3{
	padding: 5px; /* Text spacing within the paragraph */
}

.Article2 img{
	float: right; /* Move image left or right */
	clear: right;
	width: 150px;
	height: 100%;
    padding: 0px 0px 4px 12px;   /* Top-Right-Bottom-Left Padding around content.  Works simler to Margin*/

	/* padding: 12px; /* Spacing within image container */
}
/*********** NavigationMenu link styles fixes for different browsers***********/

#NavigationMenu ul { margin: 0; padding: 0;}


/*********** MainNavigation styles ***********/


#MainNavigation
 {
 background-color: #0033CC;
 float: left;
  text-align: left;
  width: 100%;}

#MainNavigation h3{
 	color: #FFFFFF;
	padding: 10px 10px 10px 10px; /* padding around text */ 
}

#MainNavigation li
 {display: inline;}

#MainNavigation a

{display: block;
  font-size: 12px;
  text-align: right;
  padding: 2px 5px 3px 2px;
  color: #FFFFFF;
  background: #0033CC;
  border-top: 1px solid #0099CC;
  border-right: 1px solid #0099CC;
  border-bottom: 1px solid  #000099;
  border-left: 1px solid  #000099;
  text-decoration: none;}
  
#MainNavigation a:hover
 {color:  #FFFFFF;
 font-weight: bold;
 text-decoration: none;
  background:  #0066CC;}

/*********** RelatedExternalLinks Styles ***********/


.RelatedExternalLinks
 {
 background-color: #0033CC;
 float: left;
  text-align: left;
  width: 100%;}

.RelatedExternalLinks h3{
 	color: #FFFFFF;
	padding: 60px 10px 10px 10px; /* padding around text */ 
}

.RelatedExternalLinks li
 {display: inline;}

.RelatedExternalLinks a
 {display: block;
  font-size: 12px;
  text-align: right;
  padding: 2px 5px 3px 2px;
  color: #FFFFFF;
  background: #0033CC;
  border-top: 1px solid #0099CC;
  border-right: 1px solid #0099CC;
  border-bottom: 1px solid  #000099;
  border-left: 1px solid  #000099;
  text-decoration: none;}

.RelatedExternalLinks a:hover
 {color:  #FFFFFF;
 font-weight: bold;
 text-decoration: none;
  background:  #0066CC;}

/*********** Table Styles Start ***********/
table.advicer {
    clear: both; /* Forces table below any other content*/
    margin-right:5%;
	margin-left:5%;
	border-width: 1px;
	border-style: ridge;
	border-color: #0000FF;
	background-color: #0099FF;
}
table.advicer th {
    padding: 5px 5px 5px 5px;
    text-align: center;
	color: white;
	border-width: 1px;
	border-style: ridge;
	border-color: white;
	background-color:  #003399;
}
table.advicer td {
    text-align: center;
	border-width: 1px;
	padding: 1px;
	border-style: ridge;
	border-color: white;
	background-color: #F4FAFF;	
}
/*********** Table Styles End ***********/

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
	width: 400px;
	height: 100%;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

.gallerybimg{
border:solid 1px silver;
  padding:10px;
}