/*this applies to full-size screens*/
@media only screen {
	.mainHeader {
		text-align: center;
	}
	/* Style the list */
	ul.tab {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		border: 1px solid #ccc;
		background-color: rgb(66,191,244);
	}
	/* Float the list items side by side */
	ul.tab li {float: left;}
	/* Style the links inside the list items */
	ul.tab li a {
		display: inline-block;
		color: rgb(255,255,255);
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		transition: 0.3s;
		font-size: 17px;
		font-weight: bold;
	}
	/* Change background color of links on hover */
	ul.tab li a:hover {background-color: rgb(16,19,201);}
	/* Create an active/current tablink class */
	ul.tab li a:focus, .active {background-color: rgb(16,19,201);}
	/* Create a hidden tablink class */
	ul.tab li a.hiddenItems {display: none;}
	/* Style the tab content */
	.tabContent {
		display: none;
		text-align: center;
		padding: 6px 12px;
		border: 1px solid #ccc;
		border-top: none;
		background: rgba(66,191,244,0.5);
	}
	html { 
		background: url(stylecontent/background.jpg); 
		background-size: cover;
		font-family: "Verdana", Georgia, Sans-Serif;
		font-size: 17px;
	}
	.tabContentParagraph {
		text-align: center;
	}
	.g_id_signin {
		display: inline-block;
	}
	form {
		background: rgba(255,255,255,0.75);
		width: 70%;
		display: inline-block;
	}
	label {
		font-size: 17px;
		width: 400px;
		text-align: center;
	}
	input[type=text] {
		font-size: 17px;
		width: 400px;
		text-align: center;
	}
	input[type=number] {
		font-size: 17px;
		width: 400px;
		text-align: right;
	}
	input[type=password] {
		font-size: 17px;
		width: 400px;
		text-align: center;
	}
	input[type=checkbox] {
		width: 17px;
		height: 17px;
	}
	button {
		font-size: 17px;
		width: 400px;
		text-align: center;
	}
	textarea {
		font-size: 17px;
		width: 400px;
		text-align: center;
	}
	select {
		font-size: 17px;
		width: 400px;
		text-align: center;
	}
	.metaParameters {
		display: none;
		text-align: center;
	}
	.filteredHeader {
		background-color: rgb(66,191,244);
		border: 1px solid rgb(0,0,0);
	}
	#tabMonthItemsTable {
		background: rgba(255,255,255,0.75);
		border-collapse: collapse;
		display: inline-block;
	}
	.initialHeader {
		border: 1px solid rgb(0,0,0);
		text-align: center;
	}
	.tabMonthItemsTableRow:hover {background-color: rgb(66,191,244);}
	#tabMonthTableContainer {
		display: block;
		margin: auto;
		overflow-x: auto;
	}
	.tableRight {
		text-align: right;
		border: 1px solid rgb(0,0,0);
		white-space: nowrap;
	}
	.tableLeft {
		text-align: left;
		border: 1px solid rgb(0,0,0);
		white-space: normal;
	}
	.tabDisplayItemsTableLastRow:hover {background-color: rgb(66,191,244);}
	.tabDisplayItemsTableLastRow {
		font-weight: bold;
	}
	#tabReportsChart{
		background: rgba(255,255,255,0.75);
	}
	.missingInput{
		background: rgba(245, 175, 161);
	}
	#headerLogInCur {
		width: 60px;
	}
	.updateButton{
		width: 100px;
	}
	.tabStockTradesTableContent {
		background: rgba(255,255,255,0.75);
		border-collapse: collapse;
		display: inline-block;
	}
	.tabStockTradesTableRow:hover {background-color: rgb(66,191,244);}
	.tabStockTradesTable {
		display: block;
		margin: auto;
		overflow-x: auto;
	}
	/*hiddenitems has to come last*/
	.hiddenItems{
		display: none;
	}
}
/*this applies to small screens*/
@media only screen and (max-device-width: 800px) {
	.mainHeader {
		text-align: center;
	}
	/* Style the list */
	ul.tab {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		border: 1px solid #ccc;
		background-color: rgb(66,191,244);
	}
	/* Keep the list items on top of each other */
	ul.tab li {
		float: none;
		text-align: center;
	}
	/* Style the links inside the list items */
	ul.tab li a {
		display: inline-block;
		color: rgb(255,255,255);
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		transition: 0.3s;
		font-size: 60px;
		font-weight: bold;
	}
	/* Change background color of links on hover */
	ul.tab li a:hover {background-color: rgb(16,19,201);}
	/* Create an active/current tablink class */
	ul.tab li a:focus, .active {background-color: rgb(16,19,201);}
	/* Create a hidden tablink class */
	ul.tab li a.hiddenItems {display: none;}
	/* Style the tab content */
	.tabContent {
		display: none;
		text-align: center;
		padding: 6px 12px;
		border: 1px solid #ccc;
		border-top: none;
		background: rgba(66,191,244,0.5);
	}
	.g_id_signin {
		display: inline-block;
	}
	html { 
		background: url(stylecontent/background.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		font-family: "Verdana", Georgia, Sans-Serif;
		font-size: 50px;
	}
	form {
		background: rgba(255,255,255,0.75);
		width: 90%;
		display: inline-block;
	}
	label {
		font-size: 50px;
		width: 90%;
		text-align: center;
	}
	input[type=text] {
		font-size: 50px;
		width: 90%;
		text-align: center;
	}
	input[type=number] {
		font-size: 50px;
		width: 90%;
		text-align: right;
	}
	input[type=password] {
		font-size: 50px;
		width: 90%;
		text-align: center;
	}
	input[type=checkbox] {
		height: 20px;
		width: 20px;
	}
	input[type=radio] {
    	height: 17px;
		width: 17px;
	}
	button {
		font-size: 50px;
		width: 90%;
		text-align: center;
	}
	textarea {
		font-size: 50px;
		width: 90%;
		text-align: center;
	}
	select {
		font-size: 50px;
		width: 90%;
		text-align: center;
	}
	.metaParameters {
		display: none;
		text-align: center;
	}
	.filteredHeader {
		background-color: rgb(66,191,244);
		border: 1px solid rgb(0,0,0);
	}
	#tabMonthItemsTable {
		background: rgba(255,255,255,0.75);
		border-collapse: collapse;
		display: inline-block;
	}
	.initialHeader {
		border: 1px solid rgb(0,0,0);
		text-align: center;
	}
	.tabMonthItemsTableRow:hover {background-color: rgb(66,191,244);}
	#tabMonthTableContainer {
		display: block;
		margin: auto;
		overflow-x: auto;
	}
	.tableRight {
		text-align: right;
		border: 1px solid rgb(0,0,0);
		white-space: nowrap;
	}
	.tableLeft {
		text-align: left;
		border: 1px solid rgb(0,0,0);
		white-space: normal;
	}
	.tabDisplayItemsTableLastRow:hover {background-color: rgb(66,191,244);}
	.tabDisplayItemsTableLastRow {
		font-weight: bold;
	}
	#tabReportsChart{
		background: rgba(255,255,255,0.75);
	}
	.missingInput{
		background: rgba(245, 175, 161);
	}
	#headerLogInCur {
		width: 175px;
	}
	.tabStockTradesTableContent {
		background: rgba(255,255,255,0.75);
		border-collapse: collapse;
		display: inline-block;
	}
	.tabStockTradesTableRow:hover {background-color: rgb(66,191,244);}
	.tabStockTradesTable {
		display: block;
		margin: auto;
		overflow-x: auto;
	}
	/*hiddenitems has to come last*/
	.hiddenItems{
		display: none;
	}
}