/* 
Author: Tom Smedsaas
Version: 2018-01-05
Use in: prog1
*/


/* Following classes are redefined in style3dev.css */

.new {   /* Signals new or substantially rewritten material */
}

.obsolete { /* Signals removed material */
	display:none;  
}

.check { /* Signals material that should be reconsidered */
	/*display:none;*/
}

.comment { /* Signals a comment to the developer */
	display:none;  
}

/*************************************************************************/



body {
	font-family: Arial, sans-serif,  Georgia, serif ;/* */
	font-size: 14px;
	max-width:90em;
	line-height:1.4;
	margin:0 3px 0 3px;
	background-color:#e0eaea; /* */
	
	/* Gray */
	--table-bg  : #f7f7f7;
	--table-hd  : #fafafa;
	--table-hd-bg:#606060;
	--code-color: #0000ff;
	--code-bg   : #f7f7f7;
	--code-em-color: #f00;
	--code-em-bg: inherit;
	--button-bg : #f7f7f7;
	--answer-bg : #f7f7f7;
	--output-color: #006600;
	--output-bg : #f7f7f7;
	/*  */
	
/* Olive color scheme    
	--table-bg     : #e5e9c9;
	--table-hd     : #fafafa;
	--table-hd-bg  : #868f4c;
	--code-color   : #005500;
	--code-bg      : #e5e9c9;
	--code-em-color:red;
	--code-em-bg   :inherit;
	--output-color: #008800;
	--output-bg    : #e5e9c9;
	--button-bg    : #9cb090;
	--answer-bg    : #dc804c;
/*       */
		
/* Blue color scheme     *
	--table-bg     : #f6f6ff;
	--table-hd     : #fafafa;	
	--table-hd-bg  : #0000cc;
	--code-color   : #0000dd;
	--code-bg      : #f6f6ff;
	--code-em-color:red;
	--code-em-bg   :inherit;
	--button-bg    : #dcdcff;
	--answer-bg    : #f7f7ff;
	--output-bg    : #c0c4a4;
	--output-color: #008800;
/*    */
		
/* Color scheme vt17  (red - green) */
	--table-bg     : #e8f8e8;
	--table-hd     : #fafafa;
	--table-hd-bg  : rgba(255, 0, 0, 0.8);
	--code-color   : #0000ff;
	--code-bg      : #e8f8e8;
	--code-em-color:red;
	--code-em-bg   :inherit;
	--button-bg    : #9cb090;
	--answer-bg    : #e0fad9;
	--output-color : #008800;
	--output-bg    : #f6f6f6;
/*   */   
}

/* ==========================  for layout without php  */


#myheader {
	/*background:#e0e0e0;*/
	background:linear-gradient(to right, white, #c0c0c0);
	margin:0 0 0px 175px;
	padding: 15px 0 15px 10px;
	text-decoration:underline;
	border-bottom:25px solid #c0c0c0;
}

#myfooter {
	font-size:90%;
	clear:both;
	margin:10px;
	padding:10px;
	background:#eeeeee;
	/*height:50px;*/	
	text-align:center;
}


.uulogga {
	display:inline-block; 
	padding:18px 30px 10px 20px; 
	text-align:center;
	float:left; 
	width:120px;
	font-size:110%;
}

.itlogga {
	display:inline-block;
	width:500px; 
	border:0px solid red;
	padding:10px;
	text-decoration:underline;
}

.main{
	margin:1px;
	background-color:#fdfdfd; 
	padding:20px;
	margin-left:5px;
	border:1px solid black;/* */
}


/* ============================ Left side menue =====================*/

.version {
	 display:none; /* Prevent the html-menues to be dispayed.  Overruled by htmlMenues if present */
}

iframe {
	height:570px;
	width:175px;
	border:0;
	overflow:hidden; /* Has no effect? */
}


#leftMenu  { 
	font-size:80%;
	background-color:#fafafa;
	margin:5px 0 5px 0;
	width:160px;
	height:570px;
	padding:5px;
	position:fixed;
	border:1px solid black;
	border-radius:8px;
	top:2px;
	left:2px;
	-webkit-overflow-scrolling:touch; /* A must for IOS units */ 
	overflow:auto; /* */
}


/* ===================================================================== */

a {
	text-decoration:underline;
	margin-left:1px;
	margin-right:1px;
	padding-left:1px;
	padding-right:1px;
}

a:link {
	text-decoration:underline;
}

a:visited{
	text-decoration:underline;	
}

p {	
	margin-top: 0.3rem;	
	margin-bottom:0.15rem;
	margin-left:0rem;
	margin-right:0.0em;
	padding-left:0em;
	padding-right:0.0em;	
	padding-top:0.2em;
	padding-bottom:0.2em;
	line-height:1.4;
	/*border:thin solid red; /* */
}


h1, h2, h3, h4, h5 {
	font-weight:normal;
	margin-left:0rem;
	padding-left:0rem;		
}

h1 {
	font-size:200%;	
	margin-top:2.0rem;
	margin-bottom:1.5rem;	

}
h2 {
	font-size:160%;	
	margin-top:1.5rem;
	margin-bottom:1.0rem;	
}
	
h3 {
	font-size:140%;	
	margin-top:1.4rem;
	margin-bottom:0.5rem;	
}

h4 {
font-size:130%;	
	text-transform: none; /* since some defaults are capitalize...*/
	margin-top:1.5rem;
	margin-bottom:0.5rem;	
}


span {	
	margin:0rem;
	padding:0rem;	
}
	
div {
	margin:0rem;
	padding:0rem;	
}


small {
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;	
}


em {
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;	
}

i {
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;	
}

strong {
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;	
	font-style:italic;
}


b {
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;	
}



sub,
sup {
	padding:0;
	margin:0;
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

img {
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;	
}

/* ========================================= Lists ====== */

ol {
	margin-top:0.2rem;
	margin-bottom:0.2rem;
	padding-top:0px;
/*	 border:thin solid red; /* */
}

ul {
	margin-top:0.2rem;
	margin-bottom:0.2rem;
	padding-top:0px;
/*	 border:thin solid red; /* */
}

li {
	margin-top:0.2rem; 
	margin-bottom:0.1rem;
	margin-left:1rem;
	padding-top:0.2rem;
	padding-bottom:0.0em;
	max-width:60em;
	
	line-height:1.4;
/*	border:thin solid blue;  /* */	
}

.sparse li {
	margin-top:0.5rem; 
	margin-bottom:0.5rem;
	margin-left:1rem;
	padding-top:0.5em;
	padding-bottom:0.3em;
}

.dense li {
	margin-top:0.0rem; 
	margin-bottom:0.0rem;
	margin-left:0.5rem;
	padding-top:0.2em;
	padding-bottom:0.2em;
}

.qua li {  /* Questions and answers. See section about tdbuttons and answers */

}




/* ===========================================================  General Tables  ========== */


.tablebg {
	background:var(--table-bg);	
}

.framedtable {
	border-spacing: 0px;
	border-collapse:collapse; /* */
	border: 2px solid black;/*	*/
}

.framedtable td {
	border-spacing: 1px; /* */
	border: 1px solid black;/*	*/
	padding:0.5em 0.7em 0.5em 0.7em;
}

.framedtable  th{ 
	background:var(--table-hd-bg);
	color:var(--table-hd);
	border:1px solid black;
	font-size:150%;
	padding:0.3em 0.5em 0.3em 0.5em;
	border-collapse:collapse;
}

.top {
	vertical-align:top;
}


table {
	margin-top: 1.0rem; 
	margin-bottom: 0.5rem;
	margin-left: 0rem;
	margin-right: 0rem; 
	padding:0.0rem;
}

td, th {
		padding: 0.5em, 0.5em, 0.5em, 0.5em;
		margin-left:0em; 
		line-height:1.4;		
}

.sparse td {
	padding:1.5em;
}

.vsparse td {
	margin:1.0em;
	padding:1.0em;
} 


/* ==================================================== Initial table======= */

#initial {
	margin-top: 3.0em;
	margin-left:2em;
	margin-bottom: 3.0em;
	border-spacing: 0px;
	border: 2px solid black;/*	*/
}

#initial td:nth-child(1) {
	padding:1em;
	color:var(--table-hd);
	font-weight:bold;
	font-size:110%;
	background:var(--table-hd-bg);
	width:7em;
	border: 1px solid white; /* */
}

#initial td:nth-child(2) {
	width:40em;
	padding:1em;
	border: 1px solid black; /* */
	background:var(--table-bg);
}

#initial em {
	/* color:red; */
}


/* =================================================== Image table ========== */
.imagetable {
	margin:2em 1em 2em 0em;
	background-color:white;
}	

.imagetable td {
	padding:1em;
}	

.imagetable td:nth-child(1) {
	padding:2em 2em 0 0;
	vertical-align:top;
}


/* ========================================== Code tables===========================
		expltab: Code in left column, italic text in right
		tryittab: Italic text in left column, code in right
*/

.expltab, .tryittab {
	margin:2em 1em 2em 2em;
	font-size:95%;
	border-spacing:0px;
	border-collapse:collapse;
	border:1px solid black;
	background-color:var(--table-bg);
	line-height:1.4;
}

.expltab th, .tryittab th { 
	background:var(--table-hd-bg);
	color:var(--table-hd);
	font-size:150%;
	padding:0.3em 0.5em 0.3em 0.5em;
	border: thin solid black; /* */
}

.expltab th:nth-child(2) {
	border-left:thin solid white;
}
.expltab td, .tryittab td {
	padding: 0.7em 1em 0.7em 1.0em;
	border: thin solid black;
}

.expltab td:nth-child(1) { 
	color:var(--code-color);
	min-width:8em;
	font-family:monospace;
	white-space:pre;
	height:3em;
}

.expltab td:nth-child(2) { 
	font-style:italic;
	color: black;
	max-width:40em;
}

.tryittab td:nth-child(1) {
	font-style:italic;
	color: black;
	min-width:5em;
	max-width:30em;
}

.tryittab td:nth-child(2) {
	color:var(--code-color);
	height:3em;
	width:10em;
	font-family:monospace;
	white-space:pre;
}


/**************************************************************/


.tdbutton {
	background:var(--button-bg);
	border: 1px solid;
	border-radius:3px;
	/*font: 600 13px Arial;*/
	font-weight:normal;
	font-size:90%;
	height:30px;
	line-height:28px;
	padding: 0px 9px;
	text-align:center;
	margin-right:5px;
	margin-left:5px;
	box-sizing:border-box;/**/
	cursor:pointer;	
}	


.answer {
	display:none;
	margin:5px 0 10px 0;/**/
	line-height:1.4;
	max-width:39em; /* */
	box-shadow:0px 8px 26px 0px rgba(0,0,0,0.9);/* */
	padding: 8px 10px;
	z-index:1;
	color:black;
	background:var(--answer-bg);
	font-weight:normal;
	border-radius:5px;
	text-align:left;
}

.qua li {  /* Suitable for questions and answers */
	max-width:45em;
	margin-top:1.5rem; 
	margin-bottom:0.5rem;
	margin-left:1rem;
	padding-top:0.5em;
	padding-bottom:0.5em;	
}

/* =============== Code stuff ==================== */

code, .code, .code-em {
	margin-left    :2px;
	margin-right   :2px;
	padding-left   :3px;
	padding-right  :3px;
	padding-top    :0px;
	padding-bottom :0px;
	font-size      :100%; 
	font-style     :normal;
	font-weight    :normal;
	color          :var(--code-color);
	font-family    :monospace; 
	background-color:#ebebeb;
}

.code-em {   /* emphasized code */
	font-weight     :600;
	color           :var(--code-em-color);
	background-color:var(--code-em-bg);
}

button {  /* DrJava buttons - should be a class instead */
	padding:2px 5px 2px 5px;
	margin:1px;
	/*font-style:italic;*/
	background-color:#d0d0d0; 
	color:black;
}


pre {
	color: blue;
	margin:0;
	padding:0;
	font-size: medium;
	font-style: normal;	
}




/* ========== Special panes =============== */

.textpane, .tp, .datapane, .dp, .codepane, .cp, .outputpane, .op, .ip {
	line-height : 1.4;
	font-size   : 95%;
	font-style  : normal;
	font-weight : normal;
	margin      : 1.5em 1px 2.5em 2.0em;
	padding     : 0.0em 1px 1.0em 1.0em;	
}

.textpane, .tp {
	font-style  : italic;
} 

.datapane, .dp {
	background  : var(--table-bg);
	color       : green;
	white-space : pre;
	width       : 95%;
	font-family : monospace;
	border      :thin solid black;
}

.codepane, .cp {
	background  : var(--code-bg);
	color       : var(--code-color);
	font-family : monospace;
	white-space : pre;
	border      : thin solid black;
}

.outputpane, .op {
	background  : var(--output-bg);
	color       : var(--output-color);
	font-family : monospace;
	white-space : pre;
	border      : thin solid black;
}

.importantpane, .ip {
	background    :var(--table-bg);
	box-shadow    :inset 0 0 10px red;/* */
	border        :5px solid red;
	border-radius :10px;
	padding       :1em 1.5em 1em 1.5em;
}

/* ==================== Convenience gadgets ===================== */

.floatright {float:right;}
.floatleft  {float:left;}
.clear      {clear:both;}
.center     {text-align:center;}
.red        {color: red;}
.redbg      {background:red;}
.whitebg    {background:white;}
.black      {color:black;}
.graybg     {	background:var(--table-bg);}
.framed     {border: 1px solid black;}
.i          {font-style:italic;}

.vhm14 {
	margin:1.0em 1.0em 1.0em 4.0em;
}
.vhm12 {
	margin:1.0em 1.0em 1.0em 2.0em;
}

.vhm22 {
	margin:2.0em 2.0em 2.0em 2.0em;
}

.vhm5 {
	margin:2.5em 2.5em 2.5em 2.5em;
}

.mtop0 {margin-top:0.0em}
.mtop1 {margin-top:0.5em}
.mtop2 {margin-top:1.0em}
.mtop3 {margin-top:1.5em}
.mtop4 {margin-top:2.0em}
.mtop5 {margin-top:2.5em}
.mtop6 {margin-top:3.0em}
.mtop7 {margin-top:3.5em}
.mtop8 {margin-top:4.0em}
.mtop9 {margin-top:5.0em}

.mlft0 {margin-left:0.0em}
.mlft1 {margin-left:0.5em}
.mlft2 {margin-left:1.0em}
.mlft3 {margin-left:1.5em}
.mlft4 {margin-left:2.0em}
.mlft5 {margin-left:2.5em}
.mlft6 {margin-left:3.0em}
.mlft7 {margin-left:3.5em}
.mlft8 {margin-left:4.0em}
.mlft9 {margin-left:5.0em}

.vsp0 {margin-top:0.0em; margin-bottom:0.0em;}
.vsp1 {margin-top:0.5em; margin-bottom:0.5em;}
.vsp2 {margin-top:1.0em; margin-bottom:1.0em;}
.vsp3 {margin-top:1.5em; margin-bottom:1.5em;}
.vsp4 {margin-top:2.0em; margin-bottom:2.0em;}
.vsp5 {margin-top:2.5em; margin-bottom:2.5em;}
.vsp6 {margin-top:3.0em; margin-bottom:3.0em;}
.vsp7 {margin-top:4.0em; margin-bottom:4.0em;}
.vsp8 {margin-top:5.0em; margin-bottom:5.0em;}

.hsp0 {margin-left:0.0em; margin-right:0.0em;}
.hsp1 {margin-left:0.5em; margin-right:0.5em;}
.hsp2 {margin-left:1.0em; margin-right:1.0em;}
.hsp3 {margin-left:1.5em; margin-right:1.5em;}
.hsp4 {margin-left:2.0em; margin-right:2.0em;}
.hsp5 {margin-left:2.5em; margin-right:2.5em;}
.hsp6 {margin-left:3.0em; margin-right:3.0em;}
.hsp7 {margin-left:3.5em; margin-right:3.5em;}
.hsp8 {margin-left:4.0em; margin-right:4.0em;}


.hpad0 {padding-left:0.0em; padding-right:0.0em;}
.hpad1 {padding-left:0.2em; padding-right:0.2em;}
.hpad2 {padding-left:0.4em; padding-right:0.4em;}
.hpad3 {padding-left:0.6em; padding-right:0.6em;}
.hpad4 {padding-left:0.8em; padding-right:0.8em;}
.hpad5 {padding-left:1.0em; padding-right:1.0em;}
.hpad6 {padding-left:1.2em; padding-right:1.2em;}

.vpad0 {padding-top:0.0em; padding-bottom:0.0em;}
.vpad1 {padding-top:0.2em; padding-bottom:0.2em;}
.vpad2 {padding-top:0.4em; padding-bottom:0.4em;}
.vpad3 {padding-top:0.6em; padding-bottom:0.6em;}
.vpad4 {padding-top:0.8em; padding-bottom:0.8em;}
.vpad5 {padding-top:1.0em; padding-bottom:1.0em;}
.vpad6 {padding-top:1.2em; padding-bottom:1.2em;}

.h1 { height:1em;}
.h2 { height:2em;}
.h3 { height:3em;}
.h4 { height:4em;}
.h5 { height:5em;}
.h6 { height:6em;}
.h7 { height:7em;}
.h8 { height:8em;}
.h9 { height:9em;}

.w1 { width: 3em;}
.w2 { width: 6em;}
.w3 { width: 9em;}
.w4 { width:12em;}
.w5 { width:15em;}
.w6 { width:18em;}
.w7 { width:21em;}
.w8 { width:24em;}
.w9 { width:27em;}
.w10{ width:30em;}
.w11{ width:33em;}
.w12{ width:36em;}
.w13{ width:39em;}
.w14{ width:42em;}
.w15{ width:45em;}
.w16{ width:48em;}
.w17{ width:51em;}
.w18{ width:54em;}
.w19{ width:57em;}
.w20{ width:60em;}