/*** Stateless Vault by Andrea Guerini is licensed under 
the Creative Commons Attribution 4.0 International License. 
To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/. 
Based on works by Maarten Billemont (https://github.com/Lyndir/MasterPassword/) 
and by Tom Thorogood (https://github.com/tmthrgd/mpw-js). ***/


/**** BASE STYLE ****/

html { 														/* html selector selects the whole document */
	background-color:   white;  		/* Page is white */
}

body {
  clear:              both;  			/* No floating elements allowed on either the left or the right side */
  font-family:        'Open Sans', sans-serif;  /* Priority to 'Open Sans' font, otherwise generic sans-serif font */
  font-weight:        300;  			/* Standard weight is 400, bold is 700, 100 is the lightest, 900 is the boldest.*/
  color:              #215272;		/* Text color is dark blue */
  text-align:         center;			/* Centers the text in body element */
}

div {															/* div is father element of h1, h3 and "logo" */
  font-size:          1em;				/* font size of section elements are 16px * 1.5 = 24 px */
}																	

p { 
	margin:             10px;				/* 10 pixels of space around p element*/
}

#logo {
  margin-top:         15px;				/* Logo lower: 30 pixels of space on the top margin */
	width: 							200px;      /* fixed width for logo */
}

h1, h2, h3 {
  margin:             0;					/* No extra space around headings h1, h2 and h3 */
}

h1 {
  margin-right:       5px;				/* Web App title has 5 pixels of extra space on right side and on left side */
	margin left: 				5px;
	font-size:          4em;				/* The em size unit is recommended by W3C. */
																	/* 1em is equal to the current font size. */
																	/* The default text size in browsers is 16 pixel*/
																	/* Web App title will be 5 times h1 defualt size = 16px * 5 */
  font-family:        'Gugi', monospace;	/* Priority to 'Gugi' font, otherwise generic monospace font */
  color:              #337BA8;		/* Web App title is blue. */
}

h3 {
  margin-bottom:      1em;      	/* default font-size is 16x=1em.
																	/* Subheading h3 has 16 pixels (1*16px) of extra space on bottom margin.*/
  font-size:          1.6em;				/* Font-size is 16px*2 */
  color:              #337BA8;		/* Subheading is blue. */
  font-weight:        300;				/* Subheading is lighter than standard weight (400) */
}

section {
	text-align: 				justify;		/* Stretches the lines so that each line has equal width */
	overflow: 					auto;				/* If overflow is clipped, a scroll-bar should be added to see the rest of the content*/
}

a {
  font: 							inherit;		/* Anchor elements inherits font properties from its parent element (p) */
																	/* p element inherits from body element */
  color: 							inherit;		/* Anchor elements inherits font properties from its parent element (p) */
}

h2 {
  margin-top:         2em;				/* h2 default font-size is 24px=1em. */
																	/* h2 (IDENTIFICATION, GENERATE PASSWORD) has 48 pixels (2*24px) */
																	/* of extra space on top margin. */
  color:              #215272;		/* h2 are dark blue. */
  font-weight:        200;				/* h2 are lighter than standard weight (400) */
  font-family:        'Gugi', monospace;  /* Priority to 'Gugi' font, otherwise generic monospace font */
	margin-left: 				1em;      	/* extra space on the left oh each h2 */
	text-align:  				left;				/* h2 titles will be on the left */
}

.bold {
	font-weight: 				bold;			  /* font-weight is higher for .bold elements, so they are highlighted */
}

li {
	margin: 						1em; 			  /* 10px of extra space around list items */
}
h4 {
	margin-left: 				1.5em;
	font-family:        'Gugi', monospace;	/* Priority to 'Gugi' font, otherwise generic monospace font */
  color:              #337BA8;		/* h4 title are blue. */
}

.cryptoCode {
	font-family:  			'Courier', monospace; /* Priority to 'Courier' font, otherwise generic monospace font */
	margin: 						15px; 			/* extra space around .cryptoCode paragraphs */
	color: 							grey;  			/* Text color is grey */
	font-weight: 				500;				/* The weight of text is higher than normal (400)*/
}

#return {
	text-align: 				center; 		/* Centers the text in "return" element */
}

footer {
  font-size:          0.7em;			/* Footer has the smallest caracter size of the document */
	margin-top:         8em;				/* Its position is separeted from section's area. */
	text-align: 				center; 		/* Centers the text in body element */
}

/*** Responsive Design using media queries***/
/* It changes the style of selected elements to according browser window or device screen */
/* Non-selected elements mantain base style properties */
/* Under 500px is for smartphone screens */
@media screen and (max-width: 500px){	
	section { width: 98%; }						/* body extended for the whole width */
	h1 { font-size: 3em;   }								/* h1 font is reduced 16px*3 */
	h3 { font-size: 1.3em; }  							/* h3 subheading font is reduced 16px*1.3 */
	p, ol  { font-size: 0.9em; }  					/* paragraphs' font is reduced 16px*0.9 */
}
/* For tablet and medium format */
@media screen and (min-width: 501px) and (max-width: 900px){		
	h1 { font-size: 3.5em; }  					/* h1 font is reduced 16px*3.5 */
	h3 { font-size: 1.6em; }  					/* h3 subheading font is reduced 16px*1.6 */
}
@media screen and (min-width: 901px){	
	#logo  {
		width: 270px;
	}
}