css working differently depends on window size - css

Question

I would like to have the display for maximized window as shown when browser is minimized. However it does not work it is supposed to be. I hope any of who can help me. Please.
This are the pictures.
Maximized picture : http://imgur.com/qdAKJiJ
Minimized picture : http://imgur.com/MRdiGPm
I hope you can understand my question. I want my middle part of this web in white color even when the browser is full page as shown it is minimized.
Please help me, really need help.
body {
font: 100% Lucida Sans;
margin: 50px;
width: 1200px;
line-height: 26px;
background-image: url("pink ribbon simple.jpg");
background-size: auto;
background-repeat: no-repeat
}
.main {
position: relative;
padding: 0px;
}
/**************************WELCOME*******************************/
#video { background-color: #f1f1f1;
width: 800px ;
margin:0 auto;
text-align: center;
padding: 50px;
border-style: outset;
border-color: #993366;
border-width: 8px; }
#option div { background: #f1f1f1;
color: black;
padding: 15px;
width: 300px;
margin: 5px; }
.opt { text-align: center; }
.opt div { display: inline-block;
text-align: center; }
/**************************BUTTON*******************************/
.button
{
display: inline-block;
margin-top: 2em;
padding: 0.8em 2em;
background: #8B317D;
line-height: 1.8em;
letter-spacing: 1px;
text-decoration: none;
font-size: 1em;
color: #FFF;
}
.button:before
{
display: inline-block;
background: #ccc;
margin-right: 1em;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
text-align: center;
color: #272925;
}
.button-small
{
}
/**************************HEADER*******************************/
#header {
border: 8px solid #993366;
background-color: #f1f1f1;
padding: 15px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 35px;
margin-left: 0px;
position: relative;
text-align: center;
text-color: #993366;
}
/**************************SIGN UP*******************************/
#signUp {
background-color: #f1f1f1;
width: 60% ;
margin:0 auto;
text-align: center;
padding: 50px;
border-style: outset;
border-color: #993366;
border-width: 8px;
}
/**************************LOGIN*******************************/
#login {
background-color: #f1f1f1;
width: 60% ;
margin:0 auto;
text-align: center;
padding: 50px;
border-style: outset;
border-color: #993366;
border-width: 8px;
}
/**************************MENU*******************************/
#cssmenu {
position: relative;
height: 44px;
background: #993366;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 35px;
margin-left: 0px;
}
#cssmenu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenu > ul {
position: relative;
display: block;
background: #993366;
width: 100%;
z-index: 500;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
#cssmenu > ul > #menu-button {
display: none;
}
#cssmenu ul li a {
display: block;
font-family: Helvetica, sans-serif;
text-decoration: none;
}
#cssmenu > ul > li > a {
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
color: #fff;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu li.has-sub::after {
display: block;
content: "";
position: absolute;
width: 0;
height: 0;
}
#cssmenu > ul > li.has-sub::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #993366;
}
#cssmenu > ul > li:hover::after {
border-top-color: #ffffff;
}
#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: -1;
}
#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #993366;
z-index: -2;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}
#cIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #993366;
top: -12px;
right: 100%;
z-index: -2;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#cssmenu ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
opacity: 1;
}
#cssmenu ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul li:hover > ul {
left: auto;
right: 170px;
top: 0;
opacity: 1;
padding-right: 5px;
}
#cssmenu ul ul li a {
width: 130px;
border-bottom: 1px solid #eeeeee;
padding: 10px 20px;
font-size: 12px;
color: #993366;
background: #ffffff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu ul ul li:hover > a {
background: #f2f2f2;
color: #8c9195;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
#cssmenu > ul > li > ul::after {
content: '';
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #993366;
position: absolute;
top: -12px;
left: 30px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 30px;
}
#cssmenu ul ul li.has-sub::after {
border: 4px solid transparent;
border-left-color: #993366;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub::after {
border-left-color: transparent;
border-right-color: #993366;
right: auto;
left: 10px;
}
#cssmenu ul ul li.has-sub:hover::after {
border-left-color: #ffffff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#cssmenu.align-right ul ul li.has-sub:hover::after {
border-right-color: #ffffff;
border-left-color: transparent;
left: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: auto;
}
#cssmenu.align-center ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: none;
}
#cssmenu ul {
width: auto;
}
#cssmenu .submenuArrow,
#cssmenu #indicatorContainer {
display: none;
}
#cssmenu > ul {
height: auto;
display: block;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu li,
#cssmenu > ul > li {
display: none;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu ul > li:hover > ul,
#cssmenu ul ul > li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul > li:hover > ul,
#cssmenu.align-right ul ul > li:hover > ul {
position: relative;
left: auto;
top: auto;
opacity: 1;
padding-left: 0;
padding-right: 0;
right: auto;
}
#cssmenu ul .has-sub::after {
display: none;
}
#cssmenu ul li a {
padding: 12px 20px;
}
#cssmenu ul ul li a {
border: 0;
background: none;
width: auto;
padding: 8px 35px;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu ul ul li:hover > a {
background: none;
color: #8c9195;
}
#cssmenu ul ul ul a {
padding: 8px 50px;
}
#cssmenu ul ul ul ul a {
padding: 8px 65px;
}
#cssmenu ul ul ul ul ul a {
padding: 8px 80px;
}
#cssmenu ul ul ul ul ul ul a {
padding: 8px 95px;
}
#cssmenu > ul > #menu-button {
display: block;
cursor: pointer;
}
#cssmenu #menu-button > a {
padding: 14px 20px;
}
#cssmenu ul.open li,
#cssmenu > ul.open > li {
display: block;
}
#cssmenu > ul.open > li#menu-button > a {
color: #fff;
border-bottom: 1px solid rgba(150, 150, 150, 0.1);
}
#cssmenu ul ul::after {
display: none;
}
#cssmenu #menu-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #7a8189;
border-bottom: 2px solid #7a8189;
right: 20px;
top: 15px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #7a8189;
right: 20px;
top: 25px;
}
#cssmenu ul.open #menu-button::after,
#cssmenu ul.open #menu-button::before {
border-color: #fff;
}
/**************************FORM*******************************/
form {
display: inline-block;
text-align: center;
}
#button {
align: right
border: 8px solid #993366;
}
/**************************MIDDLE*******************************/
.middle {
width: 100%;
position: relative;
margin: 0 auto;
background-color: white;
}
.middle:after {
display: table;
clear: both;
content: '';
}
.container {
width: 100%;
float: left;
overflow: hidden;
background-color: #FF99CC;
}
.content {
padding: 10 320px 0 0;
}
/**************************AWARENESS*******************************/
#awareness {
background-color: #FFF;
width: 60% ;
margin:0 40px;
text-align: center;
padding: 50px;
border-style: solid;
border-color: #993366;
border-width: 8px;
}
#awareness p {
text-align: left;
}
#awareness h3 {
color: #198D83;
text-align: left;
}
/**************************FOOTER*******************************/
.footer {
border: 8px solid #993366;
background-color: #f1f1f1;
text-align: center;
padding: 5px;
margin: 10px 0px 0px 0px;
font-size: 70%;
line-height: 10px;
}
p.explanation { text-align: left; }
#header h1 { color: #E20765; }
#signUp h2, #header h1, #header p { text-align: center; }
#header h1,{ margin: 0;
padding: 0; }
<?php
include 'protectedPage.php';
?>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="regLog.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>PINK RIBBON</title>
<body>
<div class="main">
<div id="header">
<h1>JOIN OUR COMMUNITY NOW</h1>
<p>PINK RIBBON COMMUNITY PAGE</p>
</div>
<div id='cssmenu'>
<ul>
<li><a href='main.php'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Assesment Tests</span></a>
<ul>
<li class='last'><a href='#'><span>Risk Assesment Test</span></a></li>
<li class='last'><a href='#'><span>Symptom Test</span></a></li>
<li class='last'><a href='#'><span>Stage Test</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='awareness.php'><span>The Awareness</span></a>
<ul>
<li class='last'><a href='#'><span>About Breast Cancer</span></a></li>
<li class='last'><a href='#'><span>Breast Self Examination</span></a></li>
<li class='last'><a href='#'><span>Symptoms</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Types and Treatment</span></a>
<ul>
<li class='last'><a href='#'><span>Type of Treatment</span></a></li>
<li class='last'><a href='#'><span>Recovery Process</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Lifestyle</span></a>
<ul>
<li class='last'><a href='#'><span>Eat Healthy</span></a></li>
<li class='last'><a href='#'><span>Get Active</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Coping With Cancer</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Join and Share</span></a>
<ul>
<li><a href='#'><span>List of Forum</span></a></li>
<li class='last'><a href='#'><span>Cancer Survivor</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>What Should Us Do</span></a>
<ul>
<li><a href='#'><span>Self Support</span></a></li>
<li><a href='#'><span>Family Support</span></a></li>
<li class='last'><a href='#'><span>Public Support</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact Us</span></a></li>
</ul>
</div>
</div>
<br><br>
<div class="middle">
<div class="container">
<main class="content">
<div id="forum">
hi!<?php echo $loginSession;?> <b id="logout">Log Out</b>
<p>Forum is bla bla bla bla</p>
<br><br>
<h2>JOIN FORUM</h2>
<br>
<h3>Share your experience of coping with cancer</h3>
<p>Alex said: <b>We need to be patient</b></p>
</div>
</main>
</div>
</div>
<div class="footer">
<strong>COPYRIGHT OF PINK RIBBON INFO4999 SECTION 1</strong>
</div>
</body>
</head>
</html>

Answer 1

Your screen shots show a different effect from the code snippet in your question: in the snippet, the main block becomes pink when you make the window narrower instead of white.
So I'm not sure if the webpage has the same code as the snippet, but to solve the problem in the snippet, you need an extra } to close the media query.
Judging by the indentation, the missing } should be inserted in line 469 of the css.
Solved snippet:
body {
font: 100% Lucida Sans;
margin: 50px;
width: 1200px;
line-height: 26px;
background-image: url("pink ribbon simple.jpg");
background-size: auto;
background-repeat: no-repeat
}
.main {
position: relative;
padding: 0px;
}
/**************************WELCOME*******************************/
#video { background-color: #f1f1f1;
width: 800px ;
margin:0 auto;
text-align: center;
padding: 50px;
border-style: outset;
border-color: #993366;
border-width: 8px; }
#option div { background: #f1f1f1;
color: black;
padding: 15px;
width: 300px;
margin: 5px; }
.opt { text-align: center; }
.opt div { display: inline-block;
text-align: center; }
/**************************BUTTON*******************************/
.button
{
display: inline-block;
margin-top: 2em;
padding: 0.8em 2em;
background: #8B317D;
line-height: 1.8em;
letter-spacing: 1px;
text-decoration: none;
font-size: 1em;
color: #FFF;
}
.button:before
{
display: inline-block;
background: #ccc;
margin-right: 1em;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
text-align: center;
color: #272925;
}
.button-small
{
}
/**************************HEADER*******************************/
#header {
border: 8px solid #993366;
background-color: #f1f1f1;
padding: 15px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 35px;
margin-left: 0px;
position: relative;
text-align: center;
text-color: #993366;
}
/**************************SIGN UP*******************************/
#signUp {
background-color: #f1f1f1;
width: 60% ;
margin:0 auto;
text-align: center;
padding: 50px;
border-style: outset;
border-color: #993366;
border-width: 8px;
}
/**************************LOGIN*******************************/
#login {
background-color: #f1f1f1;
width: 60% ;
margin:0 auto;
text-align: center;
padding: 50px;
border-style: outset;
border-color: #993366;
border-width: 8px;
}
/**************************MENU*******************************/
#cssmenu {
position: relative;
height: 44px;
background: #993366;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 35px;
margin-left: 0px;
}
#cssmenu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenu > ul {
position: relative;
display: block;
background: #993366;
width: 100%;
z-index: 500;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
#cssmenu > ul > #menu-button {
display: none;
}
#cssmenu ul li a {
display: block;
font-family: Helvetica, sans-serif;
text-decoration: none;
}
#cssmenu > ul > li > a {
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
color: #fff;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu li.has-sub::after {
display: block;
content: "";
position: absolute;
width: 0;
height: 0;
}
#cssmenu > ul > li.has-sub::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #993366;
}
#cssmenu > ul > li:hover::after {
border-top-color: #ffffff;
}
#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: -1;
}
#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #993366;
z-index: -2;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}
#cIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #993366;
top: -12px;
right: 100%;
z-index: -2;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#cssmenu ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
opacity: 1;
}
#cssmenu ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul li:hover > ul {
left: auto;
right: 170px;
top: 0;
opacity: 1;
padding-right: 5px;
}
#cssmenu ul ul li a {
width: 130px;
border-bottom: 1px solid #eeeeee;
padding: 10px 20px;
font-size: 12px;
color: #993366;
background: #ffffff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu ul ul li:hover > a {
background: #f2f2f2;
color: #8c9195;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
#cssmenu > ul > li > ul::after {
content: '';
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #993366;
position: absolute;
top: -12px;
left: 30px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 30px;
}
#cssmenu ul ul li.has-sub::after {
border: 4px solid transparent;
border-left-color: #993366;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub::after {
border-left-color: transparent;
border-right-color: #993366;
right: auto;
left: 10px;
}
#cssmenu ul ul li.has-sub:hover::after {
border-left-color: #ffffff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#cssmenu.align-right ul ul li.has-sub:hover::after {
border-right-color: #ffffff;
border-left-color: transparent;
left: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: auto;
}
#cssmenu.align-center ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: none;
}
#cssmenu ul {
width: auto;
}
#cssmenu .submenuArrow,
#cssmenu #indicatorContainer {
display: none;
}
#cssmenu > ul {
height: auto;
display: block;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu li,
#cssmenu > ul > li {
display: none;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu ul > li:hover > ul,
#cssmenu ul ul > li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul > li:hover > ul,
#cssmenu.align-right ul ul > li:hover > ul {
position: relative;
left: auto;
top: auto;
opacity: 1;
padding-left: 0;
padding-right: 0;
right: auto;
}
#cssmenu ul .has-sub::after {
display: none;
}
#cssmenu ul li a {
padding: 12px 20px;
}
#cssmenu ul ul li a {
border: 0;
background: none;
width: auto;
padding: 8px 35px;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu ul ul li:hover > a {
background: none;
color: #8c9195;
}
#cssmenu ul ul ul a {
padding: 8px 50px;
}
#cssmenu ul ul ul ul a {
padding: 8px 65px;
}
#cssmenu ul ul ul ul ul a {
padding: 8px 80px;
}
#cssmenu ul ul ul ul ul ul a {
padding: 8px 95px;
}
#cssmenu > ul > #menu-button {
display: block;
cursor: pointer;
}
#cssmenu #menu-button > a {
padding: 14px 20px;
}
#cssmenu ul.open li,
#cssmenu > ul.open > li {
display: block;
}
#cssmenu > ul.open > li#menu-button > a {
color: #fff;
border-bottom: 1px solid rgba(150, 150, 150, 0.1);
}
#cssmenu ul ul::after {
display: none;
}
#cssmenu #menu-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #7a8189;
border-bottom: 2px solid #7a8189;
right: 20px;
top: 15px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #7a8189;
right: 20px;
top: 25px;
}
#cssmenu ul.open #menu-button::after,
#cssmenu ul.open #menu-button::before {
border-color: #fff;
}
}
/**************************FORM*******************************/
form {
display: inline-block;
text-align: center;
}
#button {
align: right
border: 8px solid #993366;
}
/**************************MIDDLE*******************************/
.middle {
width: 100%;
position: relative;
margin: 0 auto;
background-color: white;
}
.middle:after {
display: table;
clear: both;
content: '';
}
.container {
width: 100%;
float: left;
overflow: hidden;
background-color: #FF99CC;
}
.content {
padding: 10 320px 0 0;
}
/**************************AWARENESS*******************************/
#awareness {
background-color: #FFF;
width: 60% ;
margin:0 40px;
text-align: center;
padding: 50px;
border-style: solid;
border-color: #993366;
border-width: 8px;
}
#awareness p {
text-align: left;
}
#awareness h3 {
color: #198D83;
text-align: left;
}
/**************************FOOTER*******************************/
.footer {
border: 8px solid #993366;
background-color: #f1f1f1;
text-align: center;
padding: 5px;
margin: 10px 0px 0px 0px;
font-size: 70%;
line-height: 10px;
}
p.explanation { text-align: left; }
#header h1 { color: #E20765; }
#signUp h2, #header h1, #header p { text-align: center; }
#header h1,{ margin: 0;
padding: 0; }
<?php
include 'protectedPage.php';
?>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" href="regLog.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>PINK RIBBON</title>
<body>
<div class="main">
<div id="header">
<h1>JOIN OUR COMMUNITY NOW</h1>
<p>PINK RIBBON COMMUNITY PAGE</p>
</div>
<div id='cssmenu'>
<ul>
<li><a href='main.php'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Assesment Tests</span></a>
<ul>
<li class='last'><a href='#'><span>Risk Assesment Test</span></a></li>
<li class='last'><a href='#'><span>Symptom Test</span></a></li>
<li class='last'><a href='#'><span>Stage Test</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='awareness.php'><span>The Awareness</span></a>
<ul>
<li class='last'><a href='#'><span>About Breast Cancer</span></a></li>
<li class='last'><a href='#'><span>Breast Self Examination</span></a></li>
<li class='last'><a href='#'><span>Symptoms</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Types and Treatment</span></a>
<ul>
<li class='last'><a href='#'><span>Type of Treatment</span></a></li>
<li class='last'><a href='#'><span>Recovery Process</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Lifestyle</span></a>
<ul>
<li class='last'><a href='#'><span>Eat Healthy</span></a></li>
<li class='last'><a href='#'><span>Get Active</span></a></li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Coping With Cancer</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Join and Share</span></a>
<ul>
<li><a href='#'><span>List of Forum</span></a></li>
<li class='last'><a href='#'><span>Cancer Survivor</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>What Should Us Do</span></a>
<ul>
<li><a href='#'><span>Self Support</span></a></li>
<li><a href='#'><span>Family Support</span></a></li>
<li class='last'><a href='#'><span>Public Support</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact Us</span></a></li>
</ul>
</div>
</div>
<br><br>
<div class="middle">
<div class="container">
<main class="content">
<div id="forum">
hi!<?php echo $loginSession;?> <b id="logout">Log Out</b>
<p>Forum is bla bla bla bla</p>
<br><br>
<h2>JOIN FORUM</h2>
<br>
<h3>Share your experience of coping with cancer</h3>
<p>Alex said: <b>We need to be patient</b></p>
</div>
</main>
</div>
</div>
<div class="footer">
<strong>COPYRIGHT OF PINK RIBBON INFO4999 SECTION 1</strong>
</div>
</body>
</head>
</html>