/***twistedlogic.css
*//*
Copyright www.twistedlogic.biz
Created the good old-fashioned way by hand, character by character, style by style.
Fully commented for better human understanding.
*//*
Modification history:
Nov2015: Created draft div framework
Dec2015: Designed for mobile devices

*//*
Browser testing regime:
IE on PC Win8.1 : v11,
FF on PC Win8.1: v12,
Chrome on PC Win8.1: v47.0.2526.73
Opera on PC Win8.1: v???

*//*
Known mobile devices viewports
Device: PixelWidth, PixelHeight, DeviceWidth, DeviceHeight, CSSPixelRatio, aspect ratio;
ipad1: 1024, 768, 1024, 768, 1, 4:3 (1.3); 
ipad2: 1024, 768, 1024, 768, 1, 4:3 (1.3);
ipad3: 2048, 1536, 1024, 768, 2, 4:3 (1.3);
ipad4: 2048, 1536, 1024, 768, 2, 4:3 (1.3);
iphone3: 480, 320, 480, 320, 1, 3:2 (1.5);
iphone4: 960, 640, 480, 320, 2, 3:2 (1.5);
iphone5: 1136, 640, 568, 320, 2, 16:9 (1.775);
iphone6: 1334, 750, 667, 375, 2 16:9 (1.778);
iphone6+: 2208, 1242, 736, 414, 3, 16:9 (1.778);
Samsung Android: 
Laptop small
Laptop med: min-width=1024
Laptop large: min-width=1065 
Laptop wide
PC monitor narrow
PC monitor wide=1024
kobo ereader
kindle ereader
opera TV
other


Breakpoints min-width  
1300
1140
980
750
640
480
***/


/*** import base styles and apply first ***/ 
@import url('twistedlogic-base.css'); /*/ relative from here /*/


/* Styles for different width viewports (not screens) */
/*/(See https://www.w3schools.com/css/css_rwd_mediaqueries.asp)/*/

/* Extra small devices (phones, 618px and down) kicks in at 600W */
@media only screen and (max-width: 618px) {/******LOCK IN*****/ /*/set for iphone 6s portrait/**************/
	#divPage{width:97.5%;} /*/was width:97.5%; to allow for vertical scrollbar/*/
	#divDeviceType, #divBrowserType, #divScreenSize, #divMagnifyRate{font-size:143.5%;} /*/was 143.5% to fit width/*/
	#divHeader{margin:0.25em; width:97.5%;} /*/was 97.5%/*/
	#StatusDiv{margin:0.25em; width:97.5%;} /*/was 97.5%/*/
	#divNav{margin:0.25em; width:97.5%;} /*/was 97.5%/*/
	#divContent{margin:0.25em; width:97.5%;} /*/was 97.5%/*/
	#divLeftCol{margin:0.25em 0 0 0.25em; width:95%;} /*/was 95%/*/
	#divCentreCol{margin:0.25em 0 0 0.25em; width:95%;} /*/was 95%/*/
	#divRightCol{margin:0.25em 0 0 0.25em; width:95%;} /*/was 95%/*/
	#divFooter{margin:0.25em; width:97.5%;} /*/was 97.5%/*/
}

/* Small devices (portrait tablets and landscape phones, 619px and up) kicks in at 601W */
@media only screen and (min-width: 619px) {/******LOCK IN*****/ /*/set for iphone 6s landscape/*************/
	#divPage{width:98.6%;} /*/was width:98.6%; to allow for vertical scrollbar/*/
	#divDeviceType, #divBrowserType, #divScreenSize, #divMagnifyRate{font-size:143.5%;} /*/was 143.5%/*/
	#divLeftCol{margin:0.25em 0 0 0.25em; width:30%;} /*/was 30%/*/
	#divCentreCol{margin:0.25em 0 0 0.25em; width:33%;} /*/was 33%/*/
	#divRightCol{margin:0.25em 0 0 0.25em; width:30%;} /*/was 30%/*/
}

/* Medium devices (large phones & landscape tablets, 768px and up) kicks in at 751W*/
@media only screen and (min-width: 768px) {/******LOCK IN*****/ /*/set for laptop narrow window/*/
	#divPage{width:99.75%;} /*/was width:99.75%; reclaiming full width /*/
	#divDeviceType, #divBrowserType, #divScreenSize, #divMagnifyRate{font-size:130%;} /*/was 130%/*/
	#divLeftCol{margin:0.25em 0 0 0.25em; width:30%;} /*/was 30%/*/
	#divCentreCol{margin:0.25em 0 0 0.25em; width:34%;} /*/was 33%/*/
	#divRightCol{margin:0.25em 0 0 0.25em; width:30%;} /*/was 30%/*/
}

/* Medium large devices (landscape monitors, 880px and up) kicks in at 862W */
@media only screen and (min-width: 880px) {/******LOCK IN*****/ /*/set for laptop medium window/*/
	#divPage{width:99.75%;} /*/was width:99.75%;/*/
	#divDeviceType, #divBrowserType, #divScreenSize, #divMagnifyRate{font-size:130%;} /*/was 130%/*/
	#divLeftCol{margin:0.25em 0 0 0.25em; width:25%;} /*/was 30%/*/
	#divCentreCol{margin:0.25em 0 0 0.25em; width:40%;} /*/was 34%/*/
	#divRightCol{margin:0.25em 0 0 0.25em; width:30%;} /*/was 30%/*/
}

/* Large devices (laptops/desktops, 990px and up) kicks in at 976W */
@media only screen and (min-width: 990px) { /*/was 880px/*/
	#divPage{width:99.75%;} /*/was width:99.75%;/*/
	#divDeviceType, #divBrowserType, #divScreenSize, #divMagnifyRate{font-size:130%;} /*/was 130%/*/
	#divLeftCol{margin:0.25em 0 0 0.25em; width:22.5%;} /*/was 25%/*/
	#divCentreCol{margin:0.25em 0 0 0.25em; width:43%;} /*/was 40%/*/
	#divRightCol{margin:0.25em 0 0 0.25em; width:30%;} /*/was 30%/*/

}

/* Extra large devices (large laptops and desktops, 1160px and up) kicks in at 1130W  */
@media only screen and (min-width: 1148px) { /*/was 990px/*/
	#divPage{width:99.75%;} /*/was width:99.75%;/*/
	#divDeviceType, #divBrowserType, #divScreenSize, #divMagnifyRate{font-size:130%;} /*/was 130%/*/
	#divLeftCol{margin:0.25em 0 0 0.25em; width:20%;} /*/was 22.5%/*/
	#divCentreCol{margin:0.25em 0 0 0.25em; width:46%;} /*/was 43%/*/
	#divRightCol{margin:0.25em 0 0 0.25em; width:30%;} /*/was 30%/*/
}

/* Wider windows (widescreen windows, 1318px and up) kicks in at 1300W  */
@media only screen and (min-width: 1318px) { /*/was 1148px/*/
	#divPage{width:99.75%;} /*/was width:99.75%;/*/
	#divDeviceType, #divBrowserType, #divScreenSize, #divMagnifyRate{font-size:130%;} /*/was 130%/*/
	#divLeftCol{margin:0.25em 0 0 0.25em; width:17%;} /*/was 20%/*/
	#divCentreCol{margin:0.25em 0 0 0.25em; width:49.5%;} /*/was 46%/*/
	#divRightCol{margin:0.25em 0 0 0.25em; width:30%;} /*/was 30%/*/
}

/* Wider windows (widescreen windows, 1518px and up) kicks in at 1500W  */
@media only screen and (min-width: 1518px) { /*/was 1318px/*/
	#divPage{width:99.75%;} /*/was width:99.75%;/*/
	#divDeviceType, #divBrowserType, #divScreenSize, #divMagnifyRate{font-size:130%;} /*/was 130%/*/
	#divLeftCol{margin:0.25em 0 0 0.25em; width:15%;} /*/was 20%/*/
	#divCentreCol{margin:0.25em 0 0 0.25em; width:51%;} /*/was 49.5%/*/
	#divRightCol{margin:0.25em 0 0 0.25em; width:30%;} /*/was 30%/*/
}


/* Styles for custom sections */

.clsScreenData {
    background-color: #cc6; /* pale yellow */
	border: 1px #630 solid; /* mid brown */
	color: #630; /* mid brown */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 50%; 
	float: left;
	padding: 1px; /* all around padding for spacing */
	position: relative;
	width: auto;
}

.clsRulerHoriz{
    background-color:  #cc6; /* pale yellow */
	border: thin #630 solid; /* mid brown */
	color: #630; /* mid brown */
	float: left;
	padding-left: 1px;
	position: relative;
	width: 98px; /* 100px wide including borders */
}

.clsRulerHorizSml{
	padding-left: 0; /* remove default left padding for Ruler divs text */
	width: 8px; /* 10px wide including borders */
}

.clsSubTitle{
    color: #00f; /* blue */
	margin: 0 0 0.25em 1em; /* reduce default to minimise space */
	font-size: 1.5em;
	/*float: left;
	position: relative;*/
    text-align: center;
}


/* Styles for Specialist Div Structures */

#divViewPort {
	border: 1px #ff9 solid; /* cream to make it highly visible during design process */
    font-size: 50%; /* reduce text size to minimise size affects */
    width: 99.75%; /* required to allow for vertical scrollbar on FF-PC */
}

#divRuler {
	border: 1px #ff9 solid; /* cream to make it highly visible during design process */
    font-size: 50%; /* reduce text size to minimise size affects */
    width: 99.75%; /* required to allow for vertical scrollbar on FF-PC */
}

#divUa {
	 clear:	both;
}

#divWhatsOnTV {
	background-color: olive; /* olive */
 	border: thin lime solid;
}

#divContent p{
	font-family: Verdana,sans-serif;
}

blockquote{
	background-color:#DDD;
	font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
	padding: 3px 0px 6px 0px;
}

/* Styles for custom Heading classes */
 
.clsH1{
	font-size: 1.85em; /* 185%*/ 
}

.clsH2{
	font-size: 1.75em; /* 175%*/ 
}

.clsH3{
	font-size: 1.5em; /* 150%*/ 
}

.clsH4{
	font-size: 1.35em; /* 135%*/ 
}

.clsH5{
	font-size: 1.2em; /* 120% */ 
}

.clsH6{
	font-size: 1.1em; /* 110% */ 
}

#divContent h3{
	color: purple;
}

/* Styles for custom Paragraph classes */

.clsP{
	font-size: 1em; /* 100% */
}

.clsCaption{
	font-size: smaller; 
	font-style: italic;
}

.clsCentred{
	text-align: center;
}

.clsBolder{
	font-weight: bolder;
}

.clsItalic{
	font-style: italic;
}

.clsSmaller{
	font-size: smaller; 
}

.clsLarger{
	font-size: larger; 
}

.clsListLeader{ /* NOTE the especial effect of a negative zero value on IE browsers. */ 
	margin-bottom: -0em; /* reduced space-after to visually link list-leader paragraph with following list */
}

.clsRefXlink{
	color: gray;
	font-size: x-small;	 
	font-variant: small-caps;
}

p[rel="800"]{
	color: red; /* red */
/*	visibility: hidden; */
/*	display: none; */
}


/* EXPANDING AND COLLAPSING TEXT  */

p.status /* use for status notice paragraphs */
	{
	color: #9090FF;  /* Strong Blue */
	margin: 2px 5px 2px 10px; 
	}

.display /* use to display hidden sections */
	{
	display: block;
	border-bottom: 2px solid #F7C692; /* 50% Terracotta */
	border-top: 2px solid #F7C692; /* 50% Terracotta */
	margin: 10px 5px 10px 0px;
	width: 100%; /* Required to display bottom border line */
	}

.hidden /* use to hide sections */
	{
	display: none;
	}


/* End of file */