smmo.css

@charset "UTF-8";

/* Media Queries  */

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}


/* Header / Image at top of site page  */

div image {
    float: left;
	margin-left: 50px;
	margin-top: 50px;
}

header img {
	height: 200px;
	position: absolute;
	margin-left: 50px;
	margin-top: 0px;
	left: 133px;
	top: 37px;
}

header li {
	padding: 0;
}


/* Top Navigation Links  */

nav {
	display:inline-block;
    width: 65%;
	background-color: #000;
	float: right;
	margin-right: 200px;
	margin-top: 165px;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #000;
	top: 0;
	width: 100%;
}

li {
  font-family: Helvetica, Arial, sans serif;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
  display: block;
 
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */

li a:hover {
  background-color: #333;
}

/* Top 2-column / 1-row grid  */

.parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	margin-left: 175px;
	margin-top: 280px;
	width: 72%;
	top: 7px;
	position: absolute;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }

/* Bottom 3-column / 3-row grid  */

.parent2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 8px;
	grid-row-gap: 8px;
	margin-left: 175px;
	margin-top: 720px;
	width: 72%;
	left: 1px;
}


.div1b { grid-area: 1 / 1 / 2 / 2;
     text-align: center; 
	 font-family: Helvetica, Arial, sans serif;
	 font-size: 16px;
	 color: #000;
	 font-weight: bold;  
	 }
	 
.div2b { grid-area: 1 / 2 / 2 / 3; 
     text-align: center;
	 font-family: Helvetica, Arial, sans serif;
	 font-family: 16px;
	 color: #000;
	 font-weight: bold; 
	 }
	 
.div3b { grid-area: 1 / 3 / 2 / 4; 
     text-align: center;
	 font-family: Helvetica, Arial, sans serif;
	 font-size: 16px;
	 color: #000;
	 font-weight: bold;
	 }

.div4 {
	background-color: #000;
	padding: 18px;
	text-align: center;
	height: 10px;
}

.div5 {
	background-color: #000;
	padding: 18px;
	text-align: center;
	height: 10px;
}

.div6 {
	background-color: #000;
	padding: 18px;
	text-align: center;
	height: 10px;
}

/* Text above nav bar */

.intro {
	font-family: Helvetica, Arial, sans serif;
	font-size: 18px;
	color: #000;
	text-align: center;
	text-transform: normal;
	padding: 10px;
	width: 50%;
	margin-right: 175px;
	margin-top: 50px;
	float: right;
}




/* Splash Info to change every week and/or month  */

.splashheader {
	font-family: Helvetica, Arial, sans serif;
	font-size: 24px;
	color: #000;
	font-weight: normal;
	text-align: left;
	text-transform: uppercase;
	vertical-align: text-top;
}

.splashtext {
	font-family: Helvetica, Arial, sans serif;
	font-size: 18px;
	color: #000;
	font-weight: normal;
	text-align: left;
}

/* Images */

img {
	height: 350px;
}

img#julianne {
	height: 150px;
}

/* Bullets in Main page */

ul.bullets {
	list-style-type: disc;
	background-color: #FFFFFF;
	color: #000;
	padding: 20px;
}

li.bullets {
	font-family: Helvetica, Arial, "sans serif";
	font-size: 18px;
	font-weight: normal;
	color: #000;
	text-transform: none;
	display: list-item;
	line-height: 20px;
	font-variant: normal;
	list-style-type: disc;
	list-style-position: outside;
	text-align: left;
}

/* Links in Main page under second grid */

.maintitles {
	font-family: Helvetica, Arial, "sans serif";
	font-size: 20px;
	color: #FFF;
	font-weight: normal;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	vertical-align: bottom;
}

.maintitles a {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
  vertical-align: bottom;
}

/* Paragraph about Stacy */

div.stacy {
	font-family: Helvetica, Arial, "sans serif";
	font-size: 30px;
	color: #000;
	font-weight: normal;
	text-align: center;
	text-transform: normal;
	margin-left: 300px;
	margin-right: 300px;
	margin-top: 700px;
	width: 700px;
	position: absolute;
	line-height: 50px;
	background-color: #eee;
	padding: 25px;
}

/* Footer */

div.copyright  {
	font-family: Helvetica, Arial, "sans serif";
	color: #000;
	font-size: 10px;
	text-align: center;
	margin-left: 175px;
	width: 72%;
	padding: 15px;
	text-decoration: none;
	height: 20px;
	vertical-align: middle;
	top: 1200px;
	position: absolute;
}

div.copyright a {
	color: #000;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	display: inherit;
	font-family: Helvetica, Arial;
	font-size: 10px;
	font-style: normal;
	line-height: 14px;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
}

.copyright1 {
	font-family: Helvetica, Arial;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
}

.copyright1 a {
	font-family: Helvetica, Arial;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #CCCCCC;
	text-align: center;
	vertical-align: middle;
}