/*This is the body, vatten is the background for the whole website */
body{
	/**
	background: #CDC9BD;
	font-family: Tahoma;
	**/
	margin: 0;
	background-image: url(https://pbs.twimg.com/profile_background_images/861066913/025f684e3efb87000928d0e10bc3cccf.jpeg);
	background-position: left 40px;
	background-attachment: fixed;
	background-repeat: repeat;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
}

#hero video {
	width: 100%;
}


/* The links over the whole website */
a{
	color:#486851;
	text-decoration: none;
	font-size: 0.9em;
	font-weight:bold;
}

/* hover the links over the whole website */
a:hover{
	color: #333202;
	text-decoration: underline;
}

/* The paragrafs over the whole website */
p {
	font-size: 0.8em;
	line-height: 20px;
	padding-left: 5px;
}

/*Headings: Iam giving the color to the headings h1 and h2, also giving them a family font*/
h1{
font-family: "Comic Sans MS", cursive;
	color: #3E5D47;
	font-size: 1.1em;
	margin: -4px;
	padding-left: 10px;
}

/*Headings: Iam giving the color to the headings h1 and h2, also giving them a family font*/
h2{
	font-size: 0.9em;
	line-height: 20px;
	margin-top: 0;
}

/* Fieldset with nice setting 
Center it
give it dotted border
margin betweent the fieldset
*/
fieldset{
	text-align: center; 
	border: 1px dotted #ccc6b7;
	margin: 0 0 15px;
}

/* Center the text, font with 0.8em
give it dotted border and color
 */
legend {
	text-align: center; 
	font-size: 0.8em;
	border: 1px dotted #ccc6b7;
	color: #CC1717;
}

/* Content Div in the Start page:
This section for the whole content in the website, Iam giving it the width 800px and giving a yellow background 
no border
*/
#content
{
	border: 2px solid #ACA58F;
	max-width: 800px;
	background: #F1F0EB;
	margin-top:0px;
	
/*To give the website the center look Iam giving the margin in the left and rightside 
the auto value and giving width 50em 
I give just the top and the bottom padding here and leting the other continers margins
*/	
	margin-left: auto;
	margin-right: auto;
	padding:0px;
}

/* The header of the website in all pages:
In the header Iam giving 10px padding to get the space I need and then make a border with 5px around the header place. 
alos margin it with 10px*/
#header {
	background: #FEBC06 url(images/logo_bg.png);
	display: none;
}

/* Every image in the websites:
to prevent getting a border in Internet Explorer Iam telling that every image will have a 0px border.*/
img { 
	border: 0;
	margin-bottom: -3px;
}


/*The menu:
In the menu section Iam giving a backround for the links, border around the links section and some padding 
Also the link will be on the left side.
*/
#menu {
	background: #FEBC06 url(images/bgmenu.png);
	text-align: right;
	font-size: 12px;
	line-height: 21px;
}

/* The menu links:
Giving a color to the link
removing the underline by text-decoration.
 */
#menu a{
	color:#000000;
	text-decoration: none;
	padding-right: 5px;
}

/*Giving a background color to the link on hover.
 */
#menu a:hover{
	background: url(images/button_bg2.png); 
	/*background-color: #815E9C;*/
	padding: 4px 5px 4px;
	color: #CDC9BD;
	font-weight:bold;
}

/* The left menu and here Iam giving it 150px as size and float it the the left 
also giving border for the right and the bottom
*/
#left {
	width: 150px;
	float: left;
	border-right: 1px solid #ACA58F;
	border-bottom: 1px solid #ACA58F;
}


/* for the current page here telling the background button */
#left .selected a { 
	background: url(images/button_bg3.png); 
	overflow:hidden;

}

/* The links in the main in the start page:
Giving color to the link in the main section*/
.button a{
	background: url(images/button_bg.png);
	color:#BDC7BF;
	text-decoration: none;
	height: 20px;
	width: 140px;
	padding: 3px 5px 0;
	display: block;
	font-weight: bold;
}

/*  When you move the muse on the link it will change the background */
.button a:hover{
	background: url(images/button_bg2.png);
}

/* Giving color to the visited link in the main section*/
.button a:visited {
	color: #BDC7BF;
}

/* Giving the images in the button container some setting such us 
floatting the image and telling the padding and the border*/
.button img  {
	float: left;
	padding: 0 3px;
	border: 0;
}

/* The bar where I write some info about the page
this bar has float to the right and other setting
*/
#textBar{
	background: url(images/textBar_bg.png);
	float: right;
	width: 300px;
	padding: 2px 0px 4px;
	text-align: right;
	font-size: 11px;
	font-weight: bold;
	color: #3E5D47;
}

/* The bar some subject text
this bar has float to the right and other setting
*/
.textBar2{
	background: url(images/textBar2_bg.png) repeat-y top left;
	float: left;
	width: 80%;
	padding: 0px 0px 4px;
	text-align: left;
}


/* Need to have some images to the right so I created this 
Gave it some setting like backgound white, border 1px, padding to get some space
*/
.rightImage  img{
background: #FFFFFF;
border: 1px solid #ACA58F;
padding: 2px;
margin-right: 5px;
float: right;
}

/* The main text has a padding left 4px to be away from the left menu*/
#mainText {
	padding-left: 4px;	
}

/* margin the news icons*/
.newsLinks img {
margin: -2px 3px;
}


/* Give a desided width and float it to the left*/
.newsLinks {
float: left;
width: 324px;
}

/* Color and font size to the news links */
.newsLinks a{
	color:#000000;
	text-decoration: none;
	font-size: 0.9em;
}

/* The date has a red color and size of 10px and on the right side*/
.date {
	float: right;
	font-size: 10px;
	color: red;
}

/* To clear I created this class to clear on the all sides*/
.clear {
clear: both;
}

/* Contain the pictures with these setting
for same space margin and get the pictures to the left by float.
*/
.picture {
margin: 3px;
padding: 0px;
float: left;
}

/* Background style behind the text under the pictures */
.textPic {
	background: url(images/textBar_m_bg.png);
	color:#785d0c;
	border-right: 1px solid #ccc6b7;
	text-decoration: none;
	height: 20px;
	width: 141px;
	padding: 0 2px 0;
	text-align: right;
	font-size: 0.8em;
	
}

/* Contain the text for the video in the videos page */
.textVideo{
	background-color: #eae9e3;
	color:#785d0c;
	border: 1px dashed #ccc6b7;
	border-top: none;
	text-decoration: none;
	width: 186px;
	padding: 0 2px 0;
	font-size: 0.8em;
}

/* Contain the text for the websites in the websites page */
.textWebsites{
	background-color: #eae9e3;
	color:#785d0c;
	border: 1px dotted #ccc6b7;
	border-top: none;
	text-decoration: none;
	width: 200px;
	padding: 0 2px 0;
	font-size: 0.8em;
}

/* Contain the text for the favorite in the favorites page */
.textFavorite{
	background-color: #eae9e3;
	color:#785d0c;
	border: 1px dotted #ccc6b7;
	text-decoration: none;
	width: 600px;
	padding: 0 2px 0;
	margin: 0 0 5px;
	font-size: 0.8em;
	text-align: left;
}

/* White Background for the images and border 1 with 2px padding  */
.picture img {
background: #FFFFFF;
border: 1px solid #ACA58F;
padding: 2px;
}

/* To get images on the right*/
.right img {
float: right;
}

/* The paragraf in the main text */
#mainText p {
	line-height: 1.6em;
	padding-left: 150px;
}

/* Place to write info about some colons
Background 
float it to the left side
padding 
width
color
font weight
 */
.textBarm{
	background: url(images/textBar_m_bg.png) repeat-y top center;
	float: left;
	width: 324px;
	padding: 2px 0px 3px;
	text-align: center;
	font-size: 0.8em;
	font-weight:bold;
	color: #3E5D47;
}

/* The website footer: 
Giving color to the background in the footer div
Color to the footer text
Change the text to be center
and ajust the place with padding and margin
*/
#footer {
	background: url(images/footer_bg.png);
	color: #788A78;
	font-size: 10px;
	text-align: center;
	padding: 2px;
	clear: both;
}