/*****************************
RESET
*****************************/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*
 * CLEARFIX (Out of date to some of the internet aricles,, But what do i know ? =)
 * display: inline-block is a alternative that exists they say, but for insurance i use this)
 * Or maybe not =) depends on how it comes out =) So here it is to come in handy,,
 * After float elements this maybe inorder to fix some issues. (Inherit issues ?)
 * ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''*/
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

/*****************************
BASE
*****************************/

body {
   
}



p {

}

.wrapper {
	
	background: #ccc;
	border-bottom: none;
	height: auto;
    margin: 0 auto;
    width: 100%;
}

.text_project {
    padding: 10%;
}

/****************************
HEADER  
****************************/

header {
	background-image:url('../img/header/header2.PNG');
	background-size: 100% 100%;
	border: 1px solid #79797f;
	box-shadow: 0px 3px 5px #888888;
    display: inline-block;
	height: auto;
	width: 100%; 
}

h1 {
	
	
}

h2 {
	font-family: 'ralewaybold','arial black';
	font-size: 1.5em;
	padding-top: 2%;
	padding-bottom: 2%;
}

h3 {
	font-family: 'ralewayregular', arial;
    font-weight: lighter;
	font-size: 1.2em;
	padding-top: 2%;
	padding-bottom: 2%;
}

h4 {
	font-family: 'ralewaybold','arial black';
	font-size: 100%;
	padding-top: 2%;
	padding-bottom: 2%;
}

/* Logo text in the header */
.logo_text1 {
    color: #E2E2E2;
    font-family: 'amatic_scregular', 'ralewayregular', arial;
    font-weight: lighter;
	font-size: 1.5em;
	letter-spacing: 2px;
	padding: 5px;
	width: 100%;
}

/*Smaller text in the header 'great_vibesregular',*/
.logo_text2 {
    color: #E2E2E2;
    font-family: 'amatic_scregular', 'ralewayregular', arial;
    font-weight: lighter;
	font-size: 1.5em;
	letter-spacing: 8px;
	padding: 5px;
	width: 100%;
}

.logo_text3 {
    color: #79797f;
    font-family: 'amaticbold', 'ralewayregular', arial;
    font-weight: lighter;
	font-size: 2.8em;
	letter-spacing: 8px;
	padding: 5px;
	padding-bottom: 45px;
	margin-top: 45px;
	text-align: center;
	width: 100%;
}

.logo_text4 {
    color: #79797f;
    font-family: 'amaticbold', 'ralewayregular', arial;
    font-weight: lighter;
	font-size: 2.2em;
	letter-spacing: 8px;
	padding: 5px;
	padding-bottom: 10px;
	text-align: center;
	width: 100%;
}

.logo_text5 {
    color: #79797f;
    font-family:'ralewayregular', arial;
    font-weight: lighter;
	font-size: 1.2em;
	letter-spacing: 0px;
	padding: 5px;
	padding-bottom: 10px;
	padding-left: 0%;
	/*text-align: center;*/
	width: 100%;
}

/*Transparency to cover header background picture */
.logo {
	float: left;
	font-family: 'ralewayregular', arial;
    font-weight: lighter;
	top: 10px;
	padding: 2%;
	width: 96%;
	text-align: center;
    /* Background transparency from http://robertnyman.com*/
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    /*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);*/
    /* For IE 8*/
    /* Commented this for IE8 away to validate css3 at w3.org */
    /*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/

}

/* head_link sets the css to links in the header*/
.head_link {
   color: #E2E2E2;
}


/********************************
NAVIGATION
*********************************/

/* nav controls the position of the navigationbar */

nav {
	display: inline-block;
    padding-top: 2%;
    margin: 0 auto;
	width: 100%;

}

/* ul controls the positioning of the navigationbar */

ul {
	
	width: 100%;
}

/* li controls the design of the navigation buttons and the text
on the buttons*/

li {
	border-right: 1px solid #79797f;
    display: inline-block;
	float: left;
    height: 20px;
    list-style: none;
    width: 24.73%;
}

a {	
    color: #79797f;
	font-size: 1em;
    font-family: 'ralewayregular', arial;
    font-weight: lighter;
    padding-top: 4px;
    text-decoration: none;
    /* text-shadow:2px 1px 1px #001;*/
    width: 100%;
}

/* li hover, controls what happens when the mouse hovers over the
navigation text */

li a:hover {
	color: #001;
	border-bottom: 1px solid #001;
}

li a:active{
	/*border-top-color: #5bd1eb;*/
    background: #5bd1eb;
}
/* link controls the link text in the navigation*/

#link1, #link2, #link3, #link4, #link5 {
   
   text-align: center;
}

#link4 {
	border-right: none;
}

ul.home {
	list-style-image: url('../img/bullet/bullet.png');
}

li#link5 {
	/*background-image: url('../img/bullet/bullet.png');*/
	/*background-image: 100% 100%;*/
	/*list-style-image: url('../img/bullet/bullet.png');*/
	border-right: none;
	float: left;
	margin-bottom: 30px;
	width: 98%;
}

/* .last = This is the last of the hr element used under nav 
* to control the content below, that is, in this case -value 
* that rises up into this last hr tag and interfears with the nav
*/

.last1 {
   border: 1px solid #79797f;
   margin: 0 auto;
   margin-top: 15px;
   margin-bottom: 30px;
   width: 87%;
}

.last2 {
  border: 1px solid #79797f;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 30px;
  width: 87%;
  margin-top: 5px;
  display: none;
}

/* aside, is here the small text box in the header E2E2E2 #000e38*/
/*Transparency covers the background picture in the header*/
aside {
	color: #E2E2E2;
    display: inline-block;
    font-family:'alex_brushregular', 'ralewayregular', arial;
	font-size: 1.7em;	
	float: left;
	letter-spacing: 5px;
	text-align: center;
	width: 96%;
    padding: 2%;
    padding-bottom: 35px;
    /* Background transparency from http://robertnyman.com*/
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    /*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);*/
    /* For IE 8*/
    /* Commented this for IE8 away to validate css3 at w3.org */
    /*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/

}

/*********************************
Classes to use are displayed on the 
index page. Some of the classes are 
used on other pages besides index page.
**********************************/



/*********************************
INDEX PAGE CONTENT
**********************************/

.header_text {
	color: #79797f;
	font-size: 2.9em;
    font-family: 'amaticbold', arial;
    font-weight: lighter;
    letter-spacing: 8px;
    margin-bottom: 60px;
    padding: 10px;
    text-align: center;
}

.column_project {
	border: 1px solid #79797f;
	border-radius: 0.3em;
	box-shadow: 0px 3px 3px #888888;
	background-color: #fff;
	color: #79797f;
	float: left;
	font-family: 'museo_sans_500regular','arial';
    font-size: 1em; 
	height: auto;
	margin: 2%;
	margin-top: 6%;
	margin-bottom: 100px;
	padding: 5%;
    width: 86%;     
}

/*projekt1 is the id that holds the first picture on the index page */
#project1 {
    display: inline-block;
    float: left;
    margin-bottom: 40px;
    padding: 3%; 
    width: 100%;
}

/* This one needs to handle the first picture on index page */
#img_project1 {
	border: 1px solid #79797f;
	box-shadow: 0px 2px 3px #888888;
	background-color: #fff;
	border-radius: 1em;
	margin-left: 21%;
    margin-top: -50%;
	padding: 0.2em;
    position: relative;
	width: 50%;	
}

/* This id controls the text that lays over #img_project1*/
#img_project1_text {
	color: #;
	font-family: 'amaticbold', 'ralewayregular', arial;
	letter-spacing: 2px;
	margin-left: 21%;
	margin-top: -10%;
    position: relative;
    text-align: center;
    width: 50%;
}

.w3 {
  margin-top: 40px;
  display: block;
}    

.content {

}

/**********************************
     web cam page             
**********************************/

.column_project_cam {
	border: 1px solid #79797f;
	border-radius: 0.3em;
	box-shadow: 0px 3px 3px #888888;
	background-color: #fff;
	color: #79797f;
	float: left;
	font-family: 'museo_sans_500regular','arial';
    font-size: 1em; 
	height: auto;
	margin: 2%;
	margin-top: 7%;
	margin-bottom: 100px;
	padding: 5%;
    width: 86%;     
}

.booth {
	display: inline-block;
    float: left; 
    padding: 3%; 
    width: 100%;
}

#video {
	border: 1px solid #79797f;
	box-shadow: 0px 2px 3px #888888;
	background-color: #fff;
	border-radius: 1em;
	margin-left: 28.5%;
	margin-top: -20%;
	padding: 0.2em;
    position: relative;
	width: 35%;	
} 

.booth-capture-button {
	background-color: #ccc;
	border: 1px solid #001;
	box-shadow: 0px 2px 3px #888888;
	border-radius: 0.4em;
	display: inline-block;
	font-family: 'amaticbold', 'ralewayregular', arial;
	font-size: 2em;
	letter-spacing: 12px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 5%;
    margin-bottom: 10px;
    width: 94%;
}

.booth-capture-button:hover {
	background-color: #79797f;
    color: #fff;

}

#canvas {
	border: 1px solid #79797f;
	box-shadow: 0px 2px 3px #888888;
	background-color: #fff;
	border-radius: 1em;
    display: none;
	margin-left: 28.5%;
	margin-top: 5%;
	padding: 0.2em;
    position: relative;
	width: 35%;	
}

#photo {
	border: 1px solid #79797f;
	box-shadow: 0px 2px 3px #888888;
	background-color: #fff;
	border-radius: 1em;
	margin-left: 28.5%;
	margin-top: 5%;
	padding: 0.2em;
    position: relative;
	width: 35%;	
}

.Stream_text {
	text-align: center;
	padding-right: 8%;
	padding-top: 15px;
}


/*********************************
  Geolocation PAGE
**********************************/

.column_project_geo {
	border: 1px solid #79797f;
	border-radius: 0.3em;
	box-shadow: 0px 3px 3px #888888;
	background-color: #fff;
	color: #79797f;
	float: left;
	font-family: 'museo_sans_500regular','arial';
    font-size: 1em; 
	height: auto;
	margin: 2%;
	margin-top: 7%;
	margin-bottom: 100px;
	padding: 5%;
    width: 86%;     
}

#project_geo {
    display: inline-block;
    float: left;
    margin-bottom: 40px;
    padding: 3%; 
    width: 100%;
}

img#karta {
	border: 1px solid #79797f;
	box-shadow: 0px 2px 3px #888888;
	background-color: #fff;
	border-radius: 1em;
	margin-left: 28.5%;
	margin-top: -20%;
	padding: 0.2em;
    position: relative;
	width: 35%;	
} 

.Btn_geo {
    color: #79797f;
    font-family:'ralewayregular', arial;
    font-weight: lighter;
	font-size: 1em;
	letter-spacing: 0px;
	margin-left: 3px;
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 5px;
	padding-bottom: 10px;
	padding-left: 0%;
	/*text-align: center;*/
	width: 100%;
}

#information {
	/*border: 1px solid #79797f;*/
	border-radius: 1em;
	/*box-shadow: 0px 2px 3px #888888;*/
	margin: 15px;
	margin-bottom: 400px;
	padding: 10%;
}

/**********************************
  Test page
**********************************/


/*test1 is the id that holds the first picture on the Test page */
#test1 {
    display: inline-block;
    float: left;
    margin-bottom: 40px;
    padding: 3%; 
    width: 100%;
}

/* This one needs to handle the first picture on Test page */
#img_test1 {
	border: 1px solid #79797f;
	box-shadow: 0px 2px 3px #888888;
	background-color: #fff;
	border-radius: 1em;
	margin-left: 21%;
    margin-top: -50%;
	padding: 0.2em;
    position: relative;
	width: 50%;	
}

/* This id controls the text that lays over #img_test1*/
#img_test1_text {
	color: #;
	font-family: 'amaticbold', 'ralewayregular', arial;
	font-size: 2.2em;
	letter-spacing: 2px;
	margin-left: 21%;
	margin-top: -12%;
    position: relative;
    text-align: center;
    width: 50%;
}

/*
 * Test Class Vi vill inte att dessa skall synas från början.
 * Högst upp på html sidan kommer det att stå det som förklaras under.
 * <html class="no-js" cssanimations> kommer det att stå om detta stöds och då kommer det
 * att bli en klass som heter .cssanimations och jag har döpt klassen som ligger inom html taggen till 
 * .animtest och blir det så att dessa två finns så skall det synas 
 * <html class="no-js" no-cssanimations> kommer det att stå om detta inte stöds och då kommer det 
 * att bli en klass .no-cssanimations
 *''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''*/
.noanimtest, .animtest {
  display: none;
}

.cssanimations .animtest {
  display: block;
}

.no-cssanimations .noanimtest {
  display: block;
}


/***************************
Local Storage Page 
****************************/

#form2 {

}

.label_text {
    color: #79797f;
    font-family:'ralewayregular', arial;
    font-weight: lighter;
	font-size: 1.2em;
	letter-spacing: 0px;
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 5px;
	padding-bottom: 10px;
	padding-left: 0%;
	/*text-align: center;*/
	width: 100%;
}

.Btn {
    color: #79797f;
    font-family:'ralewayregular', arial;
    font-weight: lighter;
	font-size: 1.8em;
	letter-spacing: 15px;
	margin-left: 3px;
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 5px;
	padding-bottom: 10px;
	padding-left: 0%;
	/*text-align: center;*/
	width: 100%;
}
/***************************
FOOTER 
****************************/

footer {
	background-image:url('../img/header/header1.PNG');
	background-size: 100% 100%;
	box-shadow: 0px 0px 2px 3px #888888;
    display: inline-block; 
	height: auto;
	margin-bottom: 0%;
	margin-top: 20px;
    width: 100%;
}

/*.before_in_footer was removed to display a beckground picture in the footer*/
.before_in_footer {
    /* Background transparency from http://robertnyman.com*/
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    /*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);*/
    /* For IE 8*/
    /* Commented this for IE8 away to validate css3 at w3.org */
    /*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/

}

/* id=fot 1,2 and 3 controls the text position in the footer */

#fot1 {
	float: left;
	width: 33.33333333333333%;
}

#fot2 {
	float: left;
	width: 33.33333333333333%;	
}

#fot3 {
	float: right;
	width: 33.33333333333333%;	
}

/* Class=fot controls the adress phone and e-mail text headlines 
to the footer content */

.fot {
	color: #E2E2E2;
	font-family: 'ralewayregular','arial';
	font-weight: lighter;
	font-size: 0.9em;
	text-align: center;
	margin-top: 2%;
	margin-bottom: 2%;
}

/* Class=downfoot, needs to set different fonts and smaller 
text that holds the adress, phone and e-mail information */

.downfoot {
	font-size: 0.7em;
	padding-top: 8%;
	text-align: center;
}