/* 
 *    Author: 
 *       Nadeem Elahi
 *    email: 
 *       nad@3deem.com 
 *    socials:
 *       nadeem.elahi@gmail.com
 *       youtube.com/@nadeemelahi593
 *       linkedin.com/in/nadeemelahi
 *
 */

/* reset - should already be set for most browser, but for old ones we set it ourselves */
header , section , aside , footer { display: block; }



/* 
 * font-family
 *
 */
h1 , h2 , h3 , h4 { font-family: Arial , Helvetica , sans-serif }
p , a  { font-family: "Time New Roman" , Times , serif }
button { font-family:  "Lucida Console", "Courier New", monospace; vertical-align: middle; } 

h1 { font-size: 24px }
h2 { font-size: 21px }
h3 { font-size: 18px }
h4 , button { font-size: 16px }
p , a { font-size: 14px }

/*
 * dom
 *
 * header#head > h1-first
 * section#main > h2,p,button
 * aside#asideLeft
 * aside#asideRight
 * footer#foot > h4,p-last
 *
 */



/* colours */
html , body { background: #bbb ; }
body { color: #444; }
button { 
	color: #444;
	background-color: #bbb;
	border: 1px solid #444;
}
/* 3deem text logo svg */
#textLogoDiv { 
}
#textLogoSvg { 
	display: block; margin: auto;
	width: 210px; height: 65px;
}


#aleft , #aright {
	background-color: #bbb;
	border: none;
	border-bottom: 1px solid #444;
}
#aleft { border-right: 1px solid #444; }
#aright { border-left: 1px solid #444; } 

#aleft > header > button ,
#aright > header > button {
	border: none;
	border-bottom: 1px solid #444;
}

#aleft > header > button {
	border-left: 1px solid #444;
}

#aright > header > button {
	border-right: 1px solid #444;
}


footer { color: #bbb; background: #444; }
/* END colours */



h1 { text-align: center; padding-top: 40px; }
input[type="color"]{ width: 30px; height: 40px; }

#main {
	box-sizing: border-box;
	width: 100%; max-width: 600px;
	margin: auto;
	padding: 5px;
}

#main > p > button {
	padding: 10px 15px 7px 15px;
}

#aleft ,
#aright {
	position: fixed;
	top: 0;
}

#aleft {
	left: -210px;
	width: 200px; height: 440px;
	transition: left 1s;
	z-index: 50;
}
#aright {
	text-align: right;
	right: -210px;
	width: 200px; height: 440px;
	transition: right 1s;
	z-index: 60;
}

#aleft > header > button {
	display: block;
	float: right;
}

#aright > header > button {
	display: block;
	float: left;
}

#hamburger , 
#aoda { 
	padding: 5px;

	width: 30px; 
	height: 30px; 

	position: fixed;
	top: 0;
	z-index : 50;
}
#hamburger { left: 0; }
#aoda { right: 0; }


/* 
 * aright - aoda
 *
 */

/* colours */
#aright > section > h4 { border-top: 1px solid #444; }

/* active btn */
/*
 * via js - script06aodaClick function init () { aodaColours.setShadowSm( colours[9] ) ) 
 *
 * #aright > section > button#fsSm { box-shadow: 0px 4px 3px #444; }
 *
 */

/*html , body { background: #bbb ; }
body { color: #444; }*/
#aright > section > button#wob { 
	color: #bbb ; 
	background-color: #444; 
	border-color: #bbb;
}
#aright > section > input[type="color"]{
	background-color: transparent;
	border: 1px solid #444;
}
#aright > section > p > button#resetColours {
	border: none;
}

/* ENDS colours */

#aleft { overflow-y: scroll; }
#aleft > section { padding: 10px; }
#aleft > section > a { display: block; text-decoration: none; }

#aright > header {
	height: 30px;
}
#aright > header > h3 {
	float: right;
	margin: 0;
	padding: 10px;
}
#aright > section {
	padding: 10px;
	
}

#aright > section > h4 {
	padding-top: 10px;
	margin-top: 5px;
}
#aright > section > button {
	font-size: 25px;
}
#aright > section > button#fsSm { font-size: 25px;}
#aright > section > button#fsMed { font-size: 35px;}
#aright > section > button#fsLrg { font-size: 45px;}

footer { 
	text-align: center; 
	padding: 20px 5px; 
}