/* Content Styles for WebShell 4.60+36-41.51 San Remo Cafes - GDH 12-Sep-25 */

/* Add the following to the head section of each page 
   (below the defaultstyles.css reference): */
/* <link rel="stylesheet" type="text/css" href="css/contentstyles.css"> */

/* Image paths are relative to this css file, not the page file */

/* ====== EXTERNAL FONT FAMILIES ====== */
/* External fonts can be used either by 'link' ref in HTML page or
   using '@import' in stylesheet:
   <link href='http://fonts.googleapis.com/css?family=Family+Name' rel='stylesheet' type='text/css'>
   @import url(http://fonts.googleapis.com/css?family=Family+Name);
   Multiple families can be imported together if separated by "|" (2 max in IE)
   Due to blocking and rendering issues especially in IE, use of 'link' method is prefered.
   See: www.google.com/fonts and www.stevesouders.com/blog/2009/04/09/dont-use-import */

/* --- FONTS USED -- */
/* Pangolin|Open+Sans */

/* ====== BASIC SETTINGS ====== */

/* Page Background (Supplements commonstyles.css)*/
body
{
/* background-color: #F8F8F8; */
/* font-size: 11pt; /* Default - use % for all other sizes */
}

/* h1, h2 defined in commonstyles.css */

h3
/* Content Heading */
{
margin-top: 18px;
color: #B6002E; /* SRC Red Scheme #96002E */
font-family: "Amatic SC", "Pangolin", "Shadows Into Light Two", "Gloria Hallelujah", Tahoma, Geneva, Verdana, sans-serif;
font-size: 280%;
font-weight: bold;
/* text-align: center; */
/* text-transform: uppercase; */
/* letter-spacing: 0.06em; */
/* padding-left: 6px; */
/* border-left: 4px solid #1383EC; */
}

h4
/* Content Sub-Headings */
{
margin-top: 8px;
color: #B6002E; /* SRC Red Scheme #96002E */
font-family: "Amatic SC", "Pangolin", "Shadows Into Light Two", "Gloria Hallelujah", Tahoma, Geneva, Verdana, sans-serif;
font-size: 220%;
font-weight: bold;
/* text-align: center; */
/* text-transform: uppercase; */
/* letter-spacing: 0.06em; */
/* padding-left: 6px; */
/* border-left: 4px solid #1383EC; */
}

h5
/* Image Banner Title and Heading Strapline */
{
color: #FFE6B3; /* Dark Red Scheme #A40000 */
font-family: "Amatic SC", "Pangolin", "Shadows Into Light Two", "Gloria Hallelujah", Tahoma, Geneva, Verdana, sans-serif;
font-size: 180%;
font-weight: bold;
text-transform: uppercase;
}

h5.byline
{
margin-top: -1px;
color: #B8002E;
font-family: "Roboto", "Open Sans", "Happy Monkey", Verdana, Geneva, Tahoma, sans-serif;
font-size: 110%;
font-weight: normal;
text-transform: none;
/* font-style: italic; */
/* text-align: center; */
/* padding-left: 6px; */
/* border-left: 4px solid #1383EC; */
}

h6
/* Image Caption */
{
color: #4D4D4D;
font-family: Tahoma, Geneva, Verdana, sans-serif;
font-size: 80%;
font-weight: normal;
}

h6.caption
/* Image Caption */
{
text-align: center;
padding: 4px 0px;
}

p, td, label
/* Content Text */
{
color: #3C3C3C; /* Default #3C3C3C */
font-family: "Roboto", "Open Sans", "Happy Monkey", Verdana, Geneva, Tahoma, sans-serif;
font-size: 125%;
font-weight: normal;
line-height: 1.5; /* Default: 'normal' is approx 120%. Values can be in %, px, pt, cm, etc */
}

p.alignrt
{
text-align: right;
}

p.firstline
{
margin-top: 6px; /* Default = 0 (or 6px if boxoutinner T/B margin = 0) */
}

p.lastline
{
margin-bottom: 6px; /* Default = 0 (or 6px if boxoutinner T/B margin = 0) */
}

p.parasep, p.paraseplast
{
margin: 0px;
padding: 8px 0px; /* T-B / L-R */
border-bottom: 1px dotted #B4B4B4;
}

p.paraseplast
{
border-bottom: 0px;
}

p.revmark
{
margin-left: -8px;
padding-left: 6px;
border-left: 2px solid #888888;
}

td.price
{
width: 40px;
border-bottom: 2px dotted gray;
}

li, ul, ol
/* Ordered and Unordered Lists */
/* Only bullets and numbers controlled by this style */
/* Note: Margin parameter renders differently in different browsers - do not use */
{
color: #808080;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 100%;
font-weight: normal;
line-height: normal;
}

hr
/* Horizontal Lines */
{
color: #808080; /* IE */
background-color: #808080; /* FF, CR, etc */
width: 80%;
}

/* Link Settings */
a:link {color: #B60038; text-decoration: none;}        /* 1-unvisited */
a:visited {color: #C90041; text-decoration: none;}     /* 2-visited */
a:hover {color: #D00045; text-decoration: underline;}  /* 3-hover */
a:active {color: #EA0050; text-decoration: underline;} /* 4-selected */

a img.boxoutimg:hover
{
/* Link image hi-light */
opacity: 0.98;
width: 98%;
padding: 1%;
}

a span.imghilightbg
{
/* Enclose <img> for consistent hi-light over any page background */
display: block;
background-color: #888888;
}

.outlined
{
border: 1px solid #D4D4D4;
}

.overlined
{
border-top: 1px solid #49196D;
}

div.highlighted
{
/* background-image: url('../Images-UI/highlightbg.jpg'); */
/* background-color: #4DBED7; */
border: 0px solid #96002E;
margin: 0 auto; /* Centre */
max-width: 100%;
}

div.boxoutframe.highlighted
{
background-color: rgba(192,192,192,0.5);
/* border: 1px solid #BBBBBB; */
max-width: 96%;
box-shadow: none;
}

h4.highlighted
{
color: #100080; /* Blue-Purple */
}

h5.highlighted
{
color: #FFFFFF;
}

a span.highlighted
{
/* Enclose <img> for consistent hi-light over any page background */
display: block;
/* background-image: url('../Images-UI/highlightbg.jpg'); */
background-color: #E1E1E1;
}

a.hlbtn, button.hlbtn
{
/* background-image: url('../Images-UI/highlightbg.jpg'); */
background-color: #96002E; /* Orange Scheme #FF6600 */
border: 2px solid #D00045; /* Delitech Blue #0084E3 */
padding: 4px 6px;
color: #FAFAFA; /* Link Text */
}

a.hlbtn.disabled, a:hover.hlbtn.disabled, button.hlbtn.disabled, button:hover.hlbtn.disabled
{
background-color: #888888;
border: 2px solid #888888;
padding: 4px 6px;
color: #C3C3C3;
text-decoration: none;
cursor: not-allowed;
}

/* Status Message ('Loading...' etc) - this overides system default styles */
img.statmsg
{
margin: 10px;
float: left;
}

p.statmsg
{
margin: 0; 
line-height: 36px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: 120%;
font-weight: normal;
color: #505050;
}

span.quoteunquote
{
color: #B8002E;
font-weight: bold;
font-size: 120%;
}

.tackstrip img
{
float: left;
margin: 8px 8px 0px 2px;
cursor: pointer;
}

.tackstrip div
{
overflow: hidden;
}

/* ====== PAGE CONTENT SETTINGS ====== */

#pagecontainer
{
/* margin: 0 auto; */
min-width: 352px; /* boxoutcol (316) / 90% */
max-width: 100%;
overflow: hidden;
-webkit-animation: fadein 1.5s;
   -moz-animation: fadein 1.5s;
        animation: fadein 1.5s;
/* keyframes in commonstyles.css*/
}

/* #headerbar settings in commonstyles.css */

#headingtext
{
padding: 0px 18px 1px 18px; /* top right bot left; */
}

#bodytext
{
padding: 4px 18px 18px 18px; /* top right bot left; */
min-width: 324px; /* +padding = 360px = min scrn width */
max-width: 100%;
overflow: hidden; /* Prevents text flow around boxoutcol */
}

.boxoutcol
{
padding: 6px;
margin: 0px 12px 12px 12px; /* top right bot left; */
width: 314px; /* 'boxoutframe' width + padding*2 (Required for IE<9) */
/* background-image: url('../Images-UI/columnfillbg.gif'); /* Default */
float: right;
/* overflow: hidden; /* Ensures div expands to fill entire area */
}

.boxoutrow
{
box-sizing: border-box; /* Sizes include padding + border */
margin: 0 auto; /* Centre across page */
/* padding: 6px 6px 6px 6px; /* T/R/B/L */
width: 100%; /* 'boxoutframe' width + padding (Required for IE) */
/* background-image: url('../Images-UI/columnfillbg.gif'); /* Default */
overflow: hidden; /* Ensures div expands to fill entire area */
/* border-radius: 4px; /* Rounded Corners */
}

.boxoutwrapper
{
box-sizing: border-box; /* Sizes include padding + border */
margin: 0 auto; /* Centre in boxoutrow */
max-width: 100%;
padding: 4px; /* Allow rboxoutframe box-shadow to show */
overflow: hidden; /* Ensures div fills entire area when eq-height sizing */
/* border-radius: 4px; /* Rounded Corners */
}

.boxoutframe, .rboxoutframe, .rboxoutframe25, .rboxoutframe33, .rboxoutframe50, .tblframe
{
box-sizing: border-box; /* Sizes include padding + border */
padding: 0px;
border: 0px solid #B60038;
border-radius: 4px; /* Rounded Corners */
/* background-image: url('../Images-UI/boxframebg.jpg'); /* Default */
/* background-image: url('../Images-UI/srctranspDkRed25.png'); /* Glass Scheme */
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
overflow: hidden; /* Ensures div expands to fill entire area */
}

.rboxoutframe, .rboxoutframe33
{
max-width: 32.55%;
width: 32.55%; /* Force width for text boxes */
float: left;
}

.rboxoutframe25
{
max-width: 24.125%;
width: 24.125%; /* Force width for text boxes */
float: left;
}

.rboxoutframe50
{
max-width: 49.4%;
width: 49.4%; /* Force width for text boxes */
float: left;
}

.tblframe
{
margin: 0 auto; /* Centre */
/* border-spacing: 2px; /* Unmerged spacing */
border-collapse: collapse; /* Merge borders */
text-align: center;
overflow: auto; /* Fix IE+CR border-collapse partial render bug */
}

.boxoutheader, .rboxoutheader, .tblheader
{
height: 24px;
/* background-image: url('../Images-UI/titlebar-bg24.gif'); /* Default */
/* background-image: url('../Images-UI/srctranspDkRed75.png'); /*  Glass Scheme*/
background-color: #96002E;
line-height: 23px; /* 1px less than bar height */
text-align: center;
}

.boxoutheader
{
display: none; /* Hide Headers */
}

.rboxoutheader
{
display: none; /* Hide Headers */
}

.tblinner
{
padding: 6px;
/* background-color: #FFE6B3; /* Default Disabled */
/* background-image: url('../Images-UI/boxoutbg.gif'); /* Default */
/* background-image: url('../Images-UI/transpWhite25.png'); /*  Glass Scheme*/
}

.boxoutinner
{
padding: 0px 8px; /* T/B = 0 if no img captions */
min-width: 150px; /* Set to ensure boxes line up if images vary */
overflow: hidden; /* Ensures div expands to fill entire area */
}

.boxoutbg0
{
/* background-color: #BBBBBB; /* Med Grey */
/* background-image: url(''); */
}

/* -- Best with Black Text -- */
.boxoutbg1
{
/* background-color: #DDBC95; /* Latte */
/* background-color: #FFECC6; /* SR Beige */
background-color: #FFF5F0; /* SR Light Beige */
}

.boxoutbg2
{
background-color: #CDCDC0; /* Ceramic */
}

.boxoutbg3
{
background-color: #626D71; /* Slate */
}

.boxoutbg4
{
background-color: #D0B0F6; /* Lavender */
}

/* -- Best with White Text -- */
.boxoutbg5
{
background-color: #4F96F5; /* Mid Blue */
}

.boxoutbg6
{
background-color: #E21838; /* Mid Red */
}

.boxoutbg7
{
background-color: #F57D30; /* Mid Orange */
}

.boxoutbg8
{
background-color: #059E93; /* Mid Green */
}

.boxoutbg9
{
background-color: #FFC000; /* Mid Yellow */
}

.tblheader, .tblinner
{
border: 1px solid #96002E;
font-size: 100%;
}

.tblheader
{
padding: 0px 6px;
}

img.boxoutimg
{
display: block; /* Remove bottom space and allow centring */
margin: 0 auto; /* Centre in Boxout frame */
max-width: 100%; /* Sizes larger images to fit */
width: 100%; /* Force smaller images to fit */
}

.topspacer
{
display: none; /* Hide Top Spacer */
max-width: 100%;
height: 16px;
overflow: hidden; /* Ensures div expands to fill entire area */
}

.intspacer
{
max-width: 100%;
height: 1.5vw; /* Default: Same as midspacer width */
overflow: hidden;
}

.boxoutrow .intspacer
{
max-width: 100%;
height: 0.5vw; /* Std value 1.15vw - reduce to 0.5vw if box-shadow used */
overflow: hidden;
}

.midspacer
{
min-width: 4px;
width: 1.15%; /* Adjust to fill row */
max-width: 24px;
height: 16px;
float: left;
overflow: hidden;
}

.botspacer
{
display: none; /* Hide Bottom Spacer */
max-width: 100%;
height: 16px;
overflow: hidden;
clear: both;
}

#bodytext.toppad
{
padding-top: 6px;
}

#bodytext.overflowvis
{
overflow: visible; /* Allow full width text flow around boxoutcol */
}

div.boxoutcont
/* Boxout Layout Wrapper */
{
margin-top: 4px;
width: 300px;
float: left;
}

p.boxoutcont, span.boxoutcont
/* Boxout Content Text */
{
margin-top: 4px;
margin-bottom: 0;
color: #606060;
font-family: Tahoma, Geneva, Verdana, sans-serif;
font-size: 80%;
font-weight: normal;
line-height: normal; /* Default: 'normal' is approx 120%. Values can be in %, px, pt, cm, etc */
}

span.boxoutcont
{
margin-top: 0px;
line-height: 16px;
float: left;
}

.panel
{
max-width: 48%;
min-width: 30%;
width: 48%;
margin-right: 2%;
float: left;
}

table.panel
{
margin: 4px 0px 12px 0px; /* T-R-B-L */
padding: 0;
min-width: 100%; /* 150px */
max-width: 100%;
border-style: none;
border-color: inherit;
border-width: 0px;
border-collapse: collapse; /* Merge borders*/
}

h4.paneltxt
{
font-family: "Roboto", "Open Sans", "Happy Monkey", Verdana, Geneva, Tahoma, sans-serif;
font-size: 120%;
font-weight: bold;
}

p.paneltxt, td.paneltxt, li.paneltxt
{
font-size: 110%;
/* color: #3C3C3C; /* Default Disabled */
/* padding: 6px; */
}

li.paneltxt
{
color: #3C3C3C; /* Default Disabled */
padding: 4px 0px;
}

.aboutimg
{
float: left;
padding: 4px;
margin: 16px 10px 8px 2px; /* T/R/B/L */
max-width: 33%;
width: 200px;
border: 1px solid #96002E;
}

.boxinnerminht
{
min-height: 0px;
}

.survey
{
margin: 0 auto;
max-width: 700px;
}

.sysmsgbox
{
background-color: #FEE638;
padding: 4px;
clear: both;
}

#newsfeed
{
max-width: 300px; /* Blocks feed dkmode */
}

.dm #newsfeed
{
min-width: 301px; /* Allows feed dkmode */
max-width: 100%;
}

/* ====== Media section must come below any styles that it changes ====== */
@media all and (max-width: 660px) /* Applies while window (iframe) width below this value (not IE<9)*/
/* Single column style for narrow (mobile) devices - also set narrow device max-width in _wsframestyles to same value + 2 x container padding (frame border) */
{
	body
	{
	/* font-size: 11pt; /* Default - use % for all other sizes */
	}
	
	#headingtext
	{
	padding: 0 8px;
	}
	
	#bodytext
	{
	margin: 0 auto; /* Centre in parent div (required by some mobile browsers which reformat text) */
	clear: both; /* Required for centering */
	padding: 4px 8px 8px 8px;
	}
	
	#bodytext.toppad
	{
	padding-top: 0px; /* Zero when single col */
	}
	
	.boxoutcol, .boxoutrow
	{
	/* background-image: url(''); */
	width: auto; /* full width = auto NOT 100% */
	padding-bottom: 0px; /* Zero when single col */
	float: none;
	}
	
	.boxoutcol
	{
	margin: 0 2px; /* margin + padding = bodytext padding */
	margin-bottom: 16px; /* Spacing from text below */
	}
	
	.boxoutrow
	{
	padding: 1px; /* Alignment tweak */
	}
	
	.boxoutframe, .tblframe, .survey
	{
	margin: 0 auto;
	max-width: 92%; /* Allows a scroll margin for touch devices */
	}
	
	.rboxoutframe, .rboxoutframe25, .rboxoutframe33, .rboxoutframe50
	{
	margin: 0 auto;
	clear: both; /* Required to allow centering */
	/* Tweak max-width to match boxoutframe appearance */
	max-width: 98%;
	width: 98%;
	}
	
	img.boxoutimg
	{
	/* max-width: 300px; /* Restrict size on small screens */
	}
	
	.boxoutwrapper
	{
	/* padding: 0px; /* Equalise midspacer and inter-wrapper vertical spacing */
	padding-left: 2%; /* Offset tweak */
	/* Tweak max-width to match boxoutcol appearance */
	max-width: 96%; /* Allows a scroll margin for touch devices */
	overflow: hidden;
	}
	
	.topspacer
	{
	display: none; /* Hide Top Spacer */
	}
	
	.intspacer
	{
	height: 16px;
	}
	
	.boxoutrow .intspacer
	{
	height: 12px; /* Std value 16px */
	}
	
	.midspacer
	{
	max-width: 100%;
	width: 100%;
	}
	
	.botspacer
	{
	/* display: block; /* Show Bottom Spacer */
	}
	
	.panel
	{
	/* max-width: 100%; */
	}
	
	table.panel
	{
	min-width: 48%;
	width: 100%;
	}
	
	.boxinnerminht
	{
	min-height: 0; /* use '0' as 'initial' not supported by IE */
	}
	
	#newsfeed
	{
	max-width: 100%;
	}
}

/* ====== Media section must come below any styles that it changes ====== */
@media screen and (max-width: 9999px) /* Applies while browser window width (inc scrollbar) below this value (not IE<9) on screens only. Default 660px */
{	
	/* #### DARK POWER-SAVE THEME for OLED Mobiles #### */
	/* Enable by adding 'dm' class to body */
	.dm a:link {color: #EA0050; text-decoration: none;}
	.dm a:visited {color: #EA0050; text-decoration: none;}
	.dm a:hover {color: #D00045; text-decoration: underline;}
	.dm a:active {color: #EA0050; text-decoration: underline;}
	
	.dm h3, .dm h4
	{
	color: #C60038; /* Dark Red Scheme #96002E */
	}
	
	.dm h4.paneltxt
	{
	color: #C90041;
	}
	
	.dm h5.byline
	{
	/* color: #F8F8F8; /* Orange Scheme #FF6600 */
	}
	
   .dm h6
	{
	color: #D4D4D4;	/* Default #D4D4D4 */
	}
	
	.dm p
	{
	color: #C3C3C3; /* Default #C3C3C3 */
	}
	
	.dm p.paneltxt, .dm td, .dm li.paneltxt, .dm label
	{
	color: #FFE6B3; /* Default #C3C3C3 */
	}
	
	.dm .boxoutinner, .dm .tblinner
	{
	background-color: #2D2D2D;
	/* background-image: url('../Images-UI/transpWhite10.png'); /**/
	}
	
	.dm .boxoutframe, .dm .rboxoutframe, .dm .rboxoutframe25, .dm .rboxoutframe33, .dm .rboxoutframe50, .dm .tblframe
	{
	/* background-image: url('../Images-UI/transpWhite10.png'); /* Glass Scheme */
	box-shadow: 0px 0px 2px 1px rgba(255, 255, 255, 0.4);
	}
	
	.dm .boxoutbg1
	{
	/* background-color: #0B3B94 */
	}
	
	.dm .boxoutrow, .dm .boxoutcol
	{
	background-image: url('');
	}
	
	.dm a.hlbtn, .dm button.hlbtn
	{
	/* background-image: url('../Images-UI/highlightbg.jpg'); */
	/* background-color: #5C5C6C; /* Orange Scheme #FF6600 */;
	/* border: 2px solid #EAEAEA; */
	color: #FAFAFA; /* Link Text */
	}
}

/* ====== PAN & ZOOM VIEWER PAGE SETTINGS ====== */

#mapwrapper
{
min-width: 475px;
max-width: 100%;
margin: 0 auto;
}

#mapwallpaper
{
background-color: #EBDBC2;
}

#maptoolbar
{
display: none;
border-left: 2px solid #888888;
height: 22px;
background-image: url('../Images-UI/butnbarbg.gif');
overflow: hidden;
}

div.mapbarbtn
{
margin: 0 0px;
border-right: 2px solid #888888;
width: 96px;
height: 22px;
background-image: url('../Images-UI/smenubutn-bg24.gif');
float: left;
}

span.mapbarbtn
{
display: block; /* Forces text-align to work in IE7 */
text-align: center;
font-family: Tahoma, Geneva, Verdana, sans-serif;
font-size: 80%;
}

div.mapbarbtn:active
{background-image:url('../Images-UI/smenubtnglo.gif');}

a.mapbarbtn
{
color:#3C3C3C; text-decoration:none; display:inline-block; width:100%; height:auto; /* Only setting that works with IE, FF, CR  */
padding:4px 0px; /*Top & Bot / Left & Right*/
}
a.mapbarbtn:visited {color:#3C3C3C; text-decoration:none;} /* visited link */
a.mapbarbtn:hover {color:#EEEEEE; text-decoration:none; background-image:url('../Images-UI/smenubutnhvr-bg24.gif');} 
a.mapbarbtn:active {color:#FEFEFE; text-decoration:none;}  /* selected link - a:active MUST come after a:hover */

div.mapbarstatus
{
margin: 0 0px;
height: 22px;
float: right;
}

span.mapbarstatus
{
display: block; /* Forces text-align to work in IE7 */
text-align: center;
font-family: Tahoma, Geneva, Verdana, sans-serif;
font-size: 80%;
color: #3C3C3C;
padding: 4px 8px;
}

img.mapbarstatus
{
margin: 3px;
float: left;
}

/* ====== END ====== */

.imgframe /* not used? */
{
margin: 0 auto; /* centre in parent object */
padding: 2px; /* frame 'border' */
background-image: url('../Images-UI/framebg.jpg');
visibility: hidden; /* Initial state */
}

.framedimg /* not used? */
{
display: block; /* Remove bottom space */
margin:0 auto; /* centre in frame width */
padding: 6px; /* inner frame 'border' */
background-image: url('../Images-UI/boxoutbg.gif');
}