/***
	This file generated by /home/domains/vol2/291/2598291/user/htdocs/soms/somShell.css.php at Tue, 23 Jul 2024 16:00:49 UTC 
***/
/* 
	CSS TEMPLATE file requires pre-processing via script using cssPrep.class.php with somShell.const.php file for 
	responsive design break points,  font sizes, left/right margins/padding
	Same constants file is used within somsShell.class.php for responsive images etc
*/


body {
	margin: 0;
	padding: 0;
}

.somContent {
	margin-left: auto;
	margin-right: auto;
	background-color: white;    	/* pinky background*/
	font-family:  'Helvetica', sans-serif;
	font-size: 12px;	/* mobiles size *//* php pre-processor */
	color: black;					/* brownish */
}
.somHeader {
	max-width: 100%;
	background-color: #ffcc66;
	background-color: white;
	text-align: center;
}

.somBanner {
	width:100%;
	height:5em;
	font-weight: bold;
	line-height: 1;
	padding-top: 0;
}

.somBanner-title{
	font-size: 2em;
}
.somBanner-subtitle {
	font-size: 1.6em;
}

.somBody {
	line-height: 1.4;
}

.somBody h1 {
	padding: 0 0.2em 0 0.2em;
}

blockquote.somNotice {
	font-size: smaller;
	padding: 1em;
	background-color: #ff4000;	/* orangeish */
}

#somMenu-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#somMenu-list li {
    float: left;
}

#somMenu-list li a, a#somMenu-button {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	border-top-left-radius: 2em;
	border-top-right-radius: 2em;
	color: brown;
}

a#somMenu-button {
	display: none;
}

#somMenu-list li a:hover:not(.somActiveMenu) {
    background-color: rgb(211,211,211,0.5);
	font-weight: bold;
}

#somMenu-list .somActiveMenu {
    background-color: khaki;
}

/* Hide navigation and display responsive menu button */
a#somMenu-button {
	display: block;
}
#somMenuBar {
	display: none;
} 
#somMenu-list {
	padding: 0px; width: 100%; 
} 
#somMenu-list li { 
	width: 100%; 
}
#somMenu-list li a {
	width: 100%;
	padding: 6px 0px;
	text-align: center;
	border-top: solid 1px #ffffff;
	border-bottom: solid 1px #dddddd; 
	border-top-left-radius: 0;
	border-top-right-radius: 0;
} 


/* Restyle for larger devices */


@media	screen and (min-width : 600px) { 
		
	.somContent {
		font-size: 16px;	/* php pre-processor */
	}
	#somMenuBar {
		display: block;
		margin-left: 0em;
		margin-right: 0em;
		padding-left: 1em;
		padding-right: 1em;
	}
	a#somMenu-button {
		display: none;
	}
	#somMenu-list {
		padding: 0px; 
	} 
	#somMenu-list li { 
		width: auto; 
	}
	#somMenu-list li a {
		width: auto;
		padding: 8px 8px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
}


@media only	screen and (min-width : 768px) { 
		
	.somContent {
		font-size: 20px; /* php pre-processor */
	} 
	
	#somMenu-list li a {
		width: auto;
		padding: 16px 14px;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
	}
}


.somFooter {
	clear: both;
	max-width: 100%;
	background-color: #ffcc66;
	font-size: smaller;
	text-align: center;
	padding: 1em;
}
	
.somHideWithoutJS {
	display: none;
}

/*
	RESPONSIVE LAYOUT borrowed heavily from W3 examples - Mobile FIRST 
	ALL FONT size must be set using PHP constants in px
	ALL row and column left/right margins/paddings MUST be set using PHP constants in em units so that responsive images can have correct
	sizes attribute generated.
*/
* {
  box-sizing: border-box;
}

 /* For all devices */
[class*="respCol-"] {
	max-width: 100%;
	float: left;
	margin-left: 0em;
	margin-right: 0em;
	padding-left: 1em;
	padding-right: 1em;
	/*border: 1px solid red;*/
}	

.respRow {
	padding-top:0.6lh;
	margin-left: 0em;
	margin-right: 0em;
	padding-left: 0em;
	padding-right: 0em;
}



.respRow::after {
  content: "";
  clear: both;
  display: table;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .respCol-s-0 {width: 0; display: none;}
  .respCol-s-1 {width: 8.33%;}
  .respCol-s-2 {width: 16.66%;}
  .respCol-s-3 {width: 25%;}
  .respCol-s-4 {width: 33.33%;}
  .respCol-s-5 {width: 41.66%;}
  .respCol-s-6 {width: 50%;}
  .respCol-s-7 {width: 58.33%;}
  .respCol-s-8 {width: 66.66%;}
  .respCol-s-9 {width: 75%;}
  .respCol-s-10 {width: 83.33%;}
  .respCol-s-11 {width: 91.66%;}
  .respCol-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
 /* Medium devices (landscape tablets, 768px and up) */
  .respCol-m-0 {width: 0; display: none;}
  .respCol-m-1 {width: 8.33%;}
  .respCol-m-2 {width: 16.66%;}
  .respCol-m-3 {width: 25%;}
  .respCol-m-4 {width: 33.33%;}
  .respCol-m-5 {width: 41.66%;}
  .respCol-m-6 {width: 50%;}
  .respCol-m-7 {width: 58.33%;}
  .respCol-m-8 {width: 66.66%;}
  .respCol-m-9 {width: 75%;}
  .respCol-m-10 {width: 83.33%;}
  .respCol-m-11 {width: 91.66%;}
  .respCol-m-12 {width: 100%;}
} 

@media only all and (min-width: 992px) {
/* Large devices (laptops/desktops, 992px and up) */
  .respCol-l-0 {width: 0; display: none;}
  .respCol-l-1 {width: 8.33%;}
  .respCol-l-2 {width: 16.66%;}
  .respCol-l-3 {width: 25%;}
  .respCol-l-4 {width: 33.33%;}
  .respCol-l-5 {width: 41.66%;}
  .respCol-l-6 {width: 50%;}
  .respCol-l-7 {width: 58.33%;}
  .respCol-l-8 {width: 66.66%;}
  .respCol-l-9 {width: 75%;}
  .respCol-l-10 {width: 83.33%;}
  .respCol-l-11 {width: 91.66%;}
  .respCol-l-12 {width: 100%;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) 
@media screen and (min-width: 1200px) {...}
*/

/* other styling dependant of responsive DOM structure */

.respRow img {
	width: 100%;
}

.respRow  figure  {
	margin: 0;
	
}

.respRow  figure  img {
	vertical-align: middle;
}

.respRow  figcaption {
	text-align: center;
	font-size: 0.8em;
}

.respRow p {
	margin-top: 0;
	margin-bottom: 0.6lh;
}
.ZZrespRow p {
	margin-top: 1em;
	margin-bottom: 1em;
}

.ZZrespRow p:first-child {
	margin-top: 0;
	
}

.ZZrespRow p:last-child {
	margin-bottom: 0;
}

.resp h1, .respRow h2,.resp h3, .respRow h4,.resp h5, .respRow h6 {
	margin: 0;;
}