main {
	background-color: #f1f1f1 !important ;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	 display : block ;
	 vertical-align: top ;

}

.mainframe {
	 background-color: #f1f1f1 ;
	 width : 100% ;
	 padding: 0px;
	 padding-top: 70px ;
}

.pagecontent {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f1f1f1;
  margin-top:0px;
  padding-top:0px;
}

.phone-panel {
	min-height: 550px;
	width: 370px;
	background-color: white;
	margin : 0px 10px;
	padding : 0px 10px;
}

.laptop-panel {
	width: 100%;
	background-color: white;
	margin : 0px 10px;
	padding : 0px 10px;
}


#pagename {
	font-size: 1.2rem;
	color:white;
}

.page-menu-item {
    display : flex ;
    display : inline-block ;
    align-items : center ;
    cursor : pointer ;
    font-weight: 700 ;
    color: #779E67 ;
}
.page-menu-item:hover {
    color: green ;
}
.page-menu-item > div {
	display: inline-block ;
    margin : 5px ;
}

.img-nudge-down {
	position : relative ; 
	top : 3px ; 
}
.planning {
	border : 1px solid green ;
	border-radius: 5px ;
}
.planning ol {
	margin-left: 30px;
}

.planning h3 {
	padding-left: 10px;
}

table, th, td {
	width : auto ;
	margin : none ; 
	padding : 5px ;
	border-collapse : collapse ; 
	border : 1px solid black ;
}

h1, h2, h3, h4, h6, h6 {
	font-weight: 700 ;
	color: #779E67 ;
}

h1 {
	font-size: 1.5rem ;
}
h2 {
	font-size: 1.2rem ;
}
h3 {
	font-size: 1.1rem ;
}
h4 {
	font-size: 1.0rem ;
}
h5 {
	font-size: 0.9rem ;
}
h6 {
	font-size: 0.7rem ;
}

a {
	text-decoration: none ;
	color : #29598B ;
}
.publicinfo {
	border : 5px solid #779E67 ;
	text-align: left ;
	border-radius: 0.3em ;
	padding : 0.3em ;
	color : #29598B ;
}	

/* Image Sprites */
#tick {
	width: 30px;
	height: 30px;
	background: url(/images/icons.png) 0 0;
}
#cross {
	width: 30px;
	height: 30px;
	background: url(/images/icons.png) -36px 0;
}
#query {
	width: 30px;
	height: 30px;
	background: url(/images/icons.png) -73px 0;
}
#shriek {
	width: 30px;
	height: 30px;
	background: url(/images/icons.png) -109px 0;
}
.button {
	display: inline-block;
	border : 1px solid #779E67;
	cursor: pointer ;
	transition-duration: 0.2s ;
	background: #779E67;
	padding: 2px;
	text-align: center;
	border-radius: 5px;
	color: white;
	font-size: 16px;
	text-decoration: none;
	font-weight: bold;
	line-height: 25px;
}
.button:hover {
	background-color: white ;
	color: #29598B ;
	/*box-shadow: 0 5px 9px 0 rgba(0,0,0,0.24), 0 9px 18px 0 rgba(0,0,0,0.19);*/
}