/* =====================================================
   ARZESHNAMEH CSS
   Original file: 27 Oct 2015
   Edited: 1 Jan 2020 (responsive column margins)

   This stylesheet controls the visual appearance of the
   website: layout, fonts, tables, menus and RSS news.

   The sections are organised to make the file easier
   to read and maintain.
   ===================================================== */


/* =====================================================
   1. PAGE RESET
   Remove browser default margins and padding
   ===================================================== */

html {
	height:100%;
	width:100%;
	margin:0px;
}

body, h1, h2, h3, h4, h5, h6, p, div, a {
	margin:0px;
	padding:0px;
}


/* =====================================================
   2. GLOBAL PAGE SETTINGS
   Default font and background
   ===================================================== */

body{
    margin:0;
    font-family: sans-serif;
    width:100%;
    height:100%;
    background-color: dimgray;
}
html, body{
    margin:0;
    padding:0;
}

/* =====================================================
   3. HEADER / TITLE SECTION
   Top banner with background image and site title
   ===================================================== */

.titleSec {
	background-color:#e6e6e6;
	background-image:url("multimedia/Bloomberg%20Shot.jpg");

	font-size:300%;
	font-family:serif;

	padding-left:60px;
	padding-top:30px;
	padding-bottom:40px;

	/* border:5px solid pink;  debugging aid */
}

.titleSec a {
	color:white;
	text-decoration:underline;
	font-weight:550;
	text-shadow:5px 7px 9px black;
}


/* =====================================================
   4. CLOCK CANVASES
   Small clock graphics displayed on the right
   ===================================================== */

#canvasSG,
#canvasNY,
#canvasLN,
#canvasLO {

	float:right;

	margin-left:40px;
	margin-right:10px;

	box-shadow:7px 6px 2px black;
}


/* =====================================================
   5. DATE DISPLAY
   Date shown below the title
   ===================================================== */

#localDate {

	padding-right:10px;

	color:white;
	font-size:20px;

	text-shadow:5px 7px 9px black;

	text-decoration:underline;

	word-spacing:8px;
}


/* =====================================================
   6. TOP MENU BAR
   Navigation links below the header
   ===================================================== */

.menuSec {

	width:48%;

	padding:5px 0px 5px 0px;

	background-color:lightgrey;

	height:15px;

	margin-top:10px;

	text-shadow:6px 6px 8px grey;
}

.menuSec a {

	clear:right; /* removes previous float effects */

	float:left;

	color:black;

	width:auto;

	padding-left:20px;

	text-decoration:none;

	font-size:102%;

	font-weight:700;

	display:inline;

	padding-bottom:0px;
}


/* fixed top menu wrapper */

.titleMenu {

	position:fixed;

	top:0;

	width:100%;

	background-color:lightgrey;

	color:white;

	padding-bottom:0px;

	/* border:5px solid pink; debugging */
}


/* =====================================================
   7. FOOTER
   Small bar at the bottom of the page
   ===================================================== */

.footerSec {

	clear:both; /* removes float effects */

	font-size:15%;

	text-align:center;

	/* position:absolute; */

	bottom:0;
	left: 0;	
	width:100%;

	height:15px;
	position: fixed;

	background-color:black;
}

.footerSec{
	
	left: 0;
}

.footerSec p {

	display:inline;

	color:white;

	padding-right:10px;
}


/* =====================================================
   8. MAIN PAGE CONTAINER
   Layout for the homepage content
   ===================================================== */

.pageContainer{
	width:100%;
	padding-top:120px;
	background-color:lightgrey;
	min-height:100vh;
	overflow:scroll;
}

/* =====================================================
   9. NEWS SECTION
   RSS feed layout
   ===================================================== */

#newsTitle {

	font-size:20pt;

	padding-left:20px;

	padding-top:40px;

	font-weight:500;

	text-shadow:6px 6px 8px grey;
}


/* two-column news layout */

.leftColumnNews {

	float:left;

	width:48%;

	padding-left:1.95%; /* (20px / 1024px) */

	margin-bottom:1.95%;

	padding-top:2.93%; /* (30px / 1024px) */
}

.rightColumnNews {

	float:right;

	width:48%;

	padding-right:1.95%;

	padding-top:3.9%; /* (40px / 1024px) */
}


/* =====================================================
   RSS LIST STYLING
   ===================================================== */

.rssList {

	background-color:lightgrey;

	box-shadow:6px 6px 2px grey;

	position:inherit;
}

.rssList li {

	color:black;

	font-size:80%;

	font-weight:400;

	margin-top:0.4%;
}

.rssList a {

	color:darkblue;

	background-color:lightgrey;

	text-decoration:none;

	font-size:100%;

	font-weight:700;

	text-shadow:6px 6px 8px grey;
}

.rssListDesc img {

	max-width:400px;
}

.rssThumbNail {

	box-shadow:7px 6px 4px grey;

	padding:0px;

	margin:3px;
}


/* =====================================================
   10. SECTION TITLES
   Titles above data tables
   ===================================================== */

#commTitle {
	font-size:15pt;
	padding-left:0px;
	padding-top:0px;
	font-weight:800;
}

#ratesTitle {
	font-size:15pt;
	padding-left:0px;
	margin-top:22px;
	font-weight:800;
}

#stockTitle {
	font-size:15pt;
	padding-left:0px;
	margin-top:20px;
	font-weight:800;
}

#fxTitle {
	font-size:15pt;
	padding-left:0px;
	padding-top:20px;
	font-weight:800;
}


/* =====================================================
   11. MAIN DATA LAYOUT
   Left and right columns for financial data
   ===================================================== */

.container {

	width:100%;

	padding-top:200px;

	background-color:white;

	max-height:100%;

	overflow:scroll;

	/* border:5px solid pink; debugging */
}

.leftColumn {

	float:left;

	width:49%;

	padding-left:10px;

	padding-top:75px;

	margin-bottom:10px;

	margin-top:20px;

	box-sizing:border-box;
}

.rightColumn {

	float:right;

	width:49%;

	padding-right:10px;

	margin-top:40px;
}


/* =====================================================
   12. DATA TABLE STYLING
   Used for FX, commodities, rates, etc.
   ===================================================== */

.myTable {

	background-color:white;

	/* border-collapse:collapse; */

	border-spacing:0;

	margin-top:5px;

	margin-left:5px;

	margin-bottom:10px;

	box-shadow:7px 9px 8px #8585ad;
}

/* table header */

.myTable thead, th {

	background-color:lightblue;

	color:darkblue;

	font-weight:bold;

	text-align:center;

	font-size:85%;

	height:25px;

	padding:5px;
}

/* table cells */

.myTable td{
	border: none;
	padding-left: 5px;
	padding-right: 5px;
	white-space: nowrap;
	margin-left: 5px;
	text-align: center;
	-webkit-column-width: 50px;
	font-size: 75%;
	height: 15px;
}


/* =====================================================
   13. ABOUT / INFORMATION PAGE
   ===================================================== */

.containerUs {

	width:100%;

	position:relative;

	background-color:white;

	min-height:100%;

	overflow:scroll;

	font-weight:100;

	/* border:5px solid pink; debugging */
}

.text {

	font-size:110%;

	padding-top:20px;

	margin-top:90px;

	background-color:white;

	width:50%;

	padding-left:30px;

	margin-left:30px;

	box-shadow:7px 7px 2px #8585ad;

	padding-bottom:30px;

	float:left;

	color:black;
}

.text img {

	width:50%;

	box-shadow:7px 7px 2px gray;

	float:left;

	/* border:5px solid blue; debugging */
}