/*- Page Structure */

body {
	color: #fff;
	text-align: center;
	background-color: #F8F8F8;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 73%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 30px;
	margin-left: 0;
	/*line-height: 1.5em;*/
	}

#page {
	background-color: #000000;
	text-align: left;
	position: relative;
	/* The entire template's width is set in this class. */
	width:  900px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto !important;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0px;
	/*border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #B893F4;
	border-right-color: #B893F4;
	border-bottom-color: #B893F4;
	border-left-color: #B893F4;*/
	}

.textsize {
	position:absolute;
	right: 1px;
	top: 1px;
}	

#header {
	padding: 0;
	margin: 0;
	position: relative;

	height: 110px;
	
	
	/*was #6666CC*/
	/*background-color: #8A67CB;*/
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	background-position: left top;
  background-size: 100% 100%;
	}


	
.menu_top {
	margin: 0;
	/*position: relative;*/
	height: 30px;
	/*was #6666CC*/
	background-color: #000000;
	border-bottom-width: 8px;
	border-bottom-style: solid;
	border-bottom-color: #FF0099;
	text-align: center;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	//font-size: 5px;
	}
	
.user3 {



	/*was #6666CC*/
	background-color: #FF0099;
	
	}
	

.mainarea {
	float:right;
	background-color: #4E4E4E;
	margin-top: 0px;
	/*margin-right: 210px;*/
	/*margin-right: 190px;*/
	/*width:  655px; */
	width:  72.78%;
	width:  72.5%;
	/*padding-right: 5px;*/
	padding-right: 0.55%;
	/*padding-left: 10px;*/
	padding-left: 1.1%;
	padding-bottom: 15px;
	margin-left: 0px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #ffffff;
	}
	
.wide_mainarea {
	float: right;
	/*margin-right: -20px;*/
	padding-left: 10px;
	margin-bottom: 0px;
	margin-left: 5px;
	}	

.leftcolumn {
	float: left;
	/*width:220px;*/
	width:24.4%;
	color: #FFFFFF;
	background-color: #000000;
	padding-top: 8px;
	/*padding-right: 4px;*/
	padding-right: 0.44%;
	padding-bottom: 10px;
	/*padding-left: 4px;*/
	padding-left: 0.44%;
	text-align: center;
	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	
	height: 100%;	/*margin-right: 5px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #B893F4;*/
	
	
	}

/*#holder_top{
	background-color:#FF0099;
	position: relative;
	padding-top: 8px;
	padding-bottom: 0px;
	margin-right: 30px;
	margin-left: 30px;
}*/

#holder_bottom {
	position: relative;
	margin-top: 5px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px;	
}

.buttonheading {
	padding-left: 5px;
	width: 5%;

}


.path {
	font: 1.0em Verdana, Helvetica, Arial, Sans-Serif;
	float: left;
	padding-top: 3px;
	margin-right: 150px;
}

.search {
	width: 150px;
	float: right;
}




.users {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.user12 {
	margin-top: 15px;
	width: 97%;
}

.wide_user12 {
	width: 100%;
}

.user1 {
	background-color: #999999;
	padding: 6px;
	vertical-align: top;
}

.user2 {
	background-color: #999999;
	padding: 6px;
	vertical-align: top;		
	width: 49.1%;
}

.breaker {
	background-color: #4E4E4E;
	width: .5%;
}

#josmainbody {
	padding-right: 20px;
	padding-top: 10px;
}



/*- Headings */

h1, h2, h3, h4 {
	font-family: Verdana, Sans-Serif;
	}

h1 { /* H1 is used for the title of your blog */
	font-size: 1.6em;
	font-weight: bold;
	letter-spacing: -1px;
	padding-top: 75px;
	margin: 0 0 0 40px;
	width: 100%;
	}

h1, h1 a, h1 a:hover, h1 a:visited,
#header .description {
	text-decoration: none;
	color: white;
	}

h1:hover {
	text-decoration: underline;
	}

.rightcolumn h3, .wide_mainarea h3, .wide_mainarea h4 { /* Secondary H2 is sidebar headlines */
	font-size: 1.6em;
	display: inline;
	color: #ffffff;
	font-weight: normal;
	padding-right: 0;

	padding-left: 0;
	}

.mainarea h3, .mainarea h4 { /* H3 is entry headlines. H4 is comments and replyform headlines */
	font-size: 1.6em;
	font-weight: normal;
	letter-spacing: normal;
	display: inline;
	color: #ffffff;
	}

.rightcolumn > div {
	padding: 0;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	}

.rightcolumn span a, .rightcolumn span a:visited {
	color: #999;
	font-weight: normal;
	}

.rightcolumn span a {
	margin-left: 10px;
	}

h2, h2 a, h2 a:visited,
h3, h3 a, h3 a:visited,
h4, h4 a, h4 a:visited {
	color: #ffffff;
	}

h2, h2 a, h2 a:hover, h2 a:visited,
h3, h3 a, h3 a:hover, h3 a:visited,
h4, h4 a, h4 a:hover, h4 a:visited {
	text-decoration: none;
	}




/*- Links */

.mainarea a:hover, .mainarea a:visited:hover,
.wide_mainarea a:hover, .wide_mainarea a:visited:hover,
.rightcolumn a:hover, .rightcolumn a:visited:hover {
	text-decoration: underline;
	}

h2 a:hover, h2 span a:hover {
	/*color: #FF6600 !important;*/
	color: #ffffff!important;
	}

a {
	/*color: #FF6600;*/
	color: #FFFFA6;
	text-decoration: none;
	}

/*- Various Tags and Classes */

.clear {
	clear: both;
	margin: 0;
	padding: 0;
	}

.mainarea img {
	margin-left: -5px;
	padding: 4px;
	}


img.noborder {
	border: none !important;
	}

small {
	font-size: .9em;
	line-height: 1.5em;
	}

small, strike {
	color: #777;
	}
/*
hr {
	display: none;
	}
	*/






/*- Begin Lists */
.leftcolumn ul, .rightcolumn ol, .rightcolumn > div > div {
	margin: 5px 0 0;
	padding-left: 0;
	}

.leftcolumn ul {
	_margin-left: 0px; /* IE Fix */
	margin-left: 0px;
	}

.leftcolumn ol {
	margin-left: 15px;
	}

.leftcolumn ul li, .rightcolumn ol li {
	margin: 0;
	padding: 1px 0;
	}
	
.leftcolumn ul li {
	list-style-type: none;
	list-style-image: none;
	}

ol li {
	list-style: decimal inside;
	}


/*- Search Form and Livesearch */

input[type=text], textarea {
	color: #444;
	padding: 0px;
	margin: 0;	
	}


tr {} /*formatting all
<tr> items.  This default setting is used when no other style has been defined.*/
ul {} /*formatting all UL (unordered list) items. This default setting is used when no other style has been defined.*/
a:link {
	text-decoration: none;	
} /* general links style*/
a:visited {}
a:hover {}
a img {
	border: none;
	}
	
hr.hr1 {
      color: #ffffff;
      background-color: #f00;
      height: 1px;
	  width: 85%;
    }
    
hr.hr2 {
	color: #ffffff;
	background-color: #f00;
	height: 1px;

    }
	
hr {
	color: #666666;
      height: 1px;

} /* horizontal line in your template*/
hr.separator {}
 
/* FORMS SETTINGS */
.inputbox {
	margin: 0px;
	margin-right: 5px;
} /*formatting the <div> which holds search items: inputbox, search button...*/
 
form {
	margin: 0px;
	} 
 
/* NAVIGATION/MENU SETTINGS */
 
a.mainlevel{} /* this styling is for the MAIN items in the menu */
a.mainlevel:link {}
a.mainlevel:visited {}
a.mainlevel:hover {}
 
#active_menu {} /* this styling is for the menu item when it is active, even in main/sub position*/
 
.pagenavbar {} /*Sets the style for the footer navigation ("<< Start < Prev Next > End >>") when they do not appear as hyperlinks (when only a few articles exist).*/
.pagenavbar:link {} /*Style for the footer navigation ("<< Start < Prev Next > End >>") when they become hyper links*/
.pagenavbar:visited {}
 
.pagenav {} /* as the name implies, this is for formatting texts for those "<< Start < Previous 1 Next > End >>" links */
a.pagenav:visited {}
a.pagenav:hover {}
 
a.readon:link {} /*Style for the "Read More" link that is displayed for large content items*/
a.readon:hover {}
a.readon:visited {}
 
.back_button {} /*Style for the "BACK" button*/
.pagenav_prev {} /*Style for the PRE button*/
.pagenav_next {} /*Style for the NEXT button*/
 
.latestnews ul {
	color: #341D72;
} /*Style for latest news list - by default, latest news is user1 module*/
.latestnews li {
color: #341D72;
}
 
.mostread ul{
	color: #341D72;
} /*Style for most popular list - by default, most popular is user2 module*/
.mostread li{
	color: #341D72;
}
 
/* CONTENT PAGE SETTINGS */
a.category:link {}
a.category:hover {}
a.category:visited {}
 
.blogsection {} /* Formatting the links in Blog section */
.blog_more {} /*The "More" text in blog section*/
a.blogsection:link {} /* set the link format */
a.blogsection:visited {} /* same as above, but to set the visited link format */
a.blogsection:hover {} /* same as above, but for links with mouse pointer over it */

/* Title of the component being used to display the content.*/ 
.componentheading {
	font-size: 1.7em;
	color: #FFFFFF;
	display: block;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
}
/* Title of the content, article, etc. being displayed.*/
.contentheading {
	font-size: 1.4em;
	font-weight: bold;
	display: inline;
	width: 100%;
	color: #ffffff;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
}
.contentpane {} /* Table that holds all non-article information (components, category lists, contact forms, etc).*/
.contentpaneopen {
	padding-top: 0px;
	padding-right: 12px;
	padding-bottom: 0px;
	padding-left: 12px;
} /* Table that holds the actual text for an article.*/
.contentpagetitle {
	font-size: 1.4em;
	display: block;
	padding: 15px 0 0;
} /*Title of articles*/
 
a.contentpagetitle:hover {} /*Title of articles when appeare as links */
a.contentpagetitle:link {}
a.contentpagetitle:visited {}
 
.contentdescription {} /* Formating the "DESCRIPTION" of sections, categories (News/Weblinks/Latest news...) */
table.contenttoc {} /* Formating the table of the Tables of Contents for multiple pages content or article */
table.contenttoc td {} /* same as above, used to format the td and able cells */
table.contenttoc th {} /* same as above, used to format the th of "Tables of Content" ( normally Article Index)*/
table.contenttoc td.toclink {} /* same as above, used to format toc link texts*/
a.toclink:link {} /* same as above, used to format toc link text status*/
a.toclink:visited {}
a.toclink:hover {}
 
 
/* MAMBO SECTIONS LISTINGS */
.sectiontableheader {} /* This is for styling the section table headers on a SECTION's page.
  Example: table header of "Date", "Item Title", "Author" and "Hits"? */
.sectiontableentry1 {
	padding-bottom: 3px;
	font-size: 1.1em;
}
.sectiontableentry2 {}
 
 
/* MAMBO MODULES FORMATTING */
.moduletable {
}
table.moduletable {} /* Formatting the module table */
table.moduletable th {} /* Formatting the module header, and the module titles */
table.moduletable td {} /* Formatting the table cells of the module table */

.moduletable_login  {
	/*border: 0px none #A9BBE7;*/
	padding: 2px;
	background-color: #F1D3E2;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 6px;
	border-top-color: #f1d3e2;
	border-right-color: #f1d3e2;
	border-bottom-color: #f1d3e2;
	border-left-color: #f1d3e2;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-left-width: 8px;
}
 
/* MISCELLANEOUS */
 
/* Dates , Authors*/
.createdate {} /* For styling the date the content/articles are created under contents title */
.modifydate {} /* Formating "Last updated on" text at the end of articles/contents */
.small {
	font-size: 100%;
} /* Formating "Written by:...." text */
.smalldark {}/*Found in poll result page, for " Number of Voters".. text */
 
/* Polls */
.poll {} /* format the td of poll table */
.pollstableborder {} /* set the border properties of the polls voting table */


/*- mainarea Contents */



/* footer colour */

#footer_colour {
/*copied from #page */

/*background: white;*/
	/*text-align: left;*/
	position: relative;
	/* The entire template's width is set in this class. */
	width:  900px;
	/*border: 1px solid #7992CC;
	border-top: none;*/
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 8px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;

	background-color: #CFCFCF;
	
	color: #666666;
	/*color: #000066;*/
	/*border-bottom: 1px solid #ccc;*/
	font-size: 1em;
	font-weight: normal;
}

#footer {
	color: #666666;
	text-align: center;
	}

#footer a {
	color: #666666;
	/*border-bottom: 1px solid #ccc;*/
	font-size: 1.4em;
	font-weight: normal;
	text-transform: none;
	}

#footer a:hover {
	border: none;
	text-decoration: underline;
	color: #ffffff;
	}
	
.footer_wht {
	color:#666666;
	}
	


		
	
	/*extra bit in here - experimental, etc*/
	
	
.small_darklinkmenu {
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#333333;
	text-decoration: none;
	text-transform:none;
	background-color: #cccccc;	
	}
	
.linkurl {
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #FFFF66;
	text-decoration:none;
	}

a.linkurl:hover { color: #FFFFA6; text-decoration: underline;
	text-decoration:underline;
}

.learner {
	background-color: #BDCBEC;
	padding: 2px;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	display: block;
}

.tutor {
	background-color: #EBBAA7;
	padding: 2px;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	display: block;
}


@media (max-width:319px) {
    body {
        background-color: pink;
	background-color: #F8F8F8;
    }
    #page {
	width: 319px;
    }
    #footer_colour {
	width: 319px;
    }
}

@media (min-width:320px) and (max-width:359px) {
    body {
        background-color: LightGray;
	background-color: #F8F8F8;
    }
    #page {
	width: 320px;
    }
    #footer_colour {
	width: 320px;
    }
}

@media (min-width:360px) and (max-width:413px) {
    body {
        background-color: red;
	background-color: #F8F8F8;
    }
    #page {
	width: 355px;
    }
    #footer_colour {
	width: 355px;
    }
}

@media (min-width:414px) and (max-width:479px) {
    body {
        background-color: pink;
	background-color: #F8F8F8;
    }
    #page {
	width: 409px;
    }
    #footer_colour {
	width: 409px;
    }
}

@media (min-width:480px) and (max-width:539px) {
    body {
	background-color: yellow;
	background-color: #F8F8F8;
    }
    #page {
	width: 480px;
    }
    #footer_colour {
	width: 480px;
    }
}

@media (min-width:540px) and (max-width:599px) {
    body {
        background-color: darkgreen;
	background-color: #F8F8F8;
    }
    #page {
	width: 530px;
	width: 545px;
    }
    #footer_colour {
	width: 530px;
	width: 545px;
    }
}

@media (min-width:600px) and (max-width:639px) {
    body {
        background-color: pink;
	background-color: #F8F8F8;
    }
    #page {
	width: 580px;
    }
    #footer_colour {
	width: 580px;
    }
}

@media (min-width:640px) and (max-width:666px) {
    body {
        background-color: red;
	background-color: #F8F8F8;
    }
    #page {
	width: 620px;
	width: 635px;
    }
    #footer_colour {
	width: 620px;
	width: 635px;
    }
}

@media (min-width:667px) and (max-width:731px) {
    body {
        background-color: darkblue;
	background-color: #F8F8F8;
    }
    #page {
	width: 657px;
    }
    #footer_colour {
	width: 657px;
    }
}

@media (min-width:732px) and (max-width:767px) {
    body {
        background-color: purple;
	background-color: #F8F8F8;
    }
    #page {
	width: 722px;
    }
    #footer_colour {
	width: 722px;
    }
    .topnav a {
      font-size: 13.5px;
    }
}

@media (min-width:768px) and (max-width:899px) {
    body {
        background-color: orange;
	background-color: #F8F8F8;
    }
    #page {
	width: 748px;
	width: 788px;
    }
    #footer_colour {
	width: 748px;
	width: 788px;
    }
    .topnav a {
      font-size: 14px;
    }
}

@media (min-width:900px) {
    body {
        background-color: #F8F8F8;
    }
    #page {
	width: 900px;
    }
    #footer_colour {
	width: 900px;
    }
    .topnav a {
      font-size: 18px;
    }
}


@media (min-width:319px) and (max-width:819px) {
    #header {
	background-image: url(../images/header_2.jpg);
    }
}

@media (min-width:820px) and (max-width:899px) {
    #header {
	background-image: url(../images/header_1.jpg);
    }
}

@media (min-width:900px) {
    #header {
	background-image: url(../images/header.jpg);
    }
}






/* Add a black background color to the top navigation */
.topnav {
	font-family: Verdana, Arial, Helvetica, sans-serif;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

  background-color: #000000;

	padding-top: 0px; 
	padding-bottom: 0px; 
	text-align: center;
	color: #f0f0f0;
//color: red;
  overflow: hidden;
	//border: solid 1px #0f0;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  color: #ffffff;

  text-align: center;
  padding: 5px 12px;
  //padding-top: 5px;
  //padding-bottom: 5px;
  //margin-left: 5px;
  //margin-right: 5px;

  text-decoration: none;
  //font-size: 18px;
	border: solid 1px #f00;

	//border-top: 1px solid #555;
	//border-left: 1px solid #555;
	//border-right: 1px solid #555;
	//border-bottom: 1px solid #555;
  border: none;
  background-color: #000000;
}


/* Add an active class to highlight the current page */
.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
	//border: solid 1px #00f;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
	font-family: Arial, Helvetica, sans-serif;
	font-family: Verdana;

	font-weight: bold;
	font-style: normal;
  font-size: 16px;
  border: none;
	//border: solid 1px #0f0;
  outline: none;
  color: white;
  padding-top: 10px;
  padding-bottom: 0px;
  padding-left: 6px;
  padding-right: 0px;
  margin: 0px;

  background: #000000;
  //background-color: inherit;

  //font-family: inherit;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  //font-size: 28px;
  display: none;
  position: absolute;

  //border: solid 1px #0f0;

/* Pink  */
  background: #FF0099;


  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
font-size: 16px;
  float: none;
  color: black;
  padding: 6px 8px;
  text-decoration: none;
  display: block;
  text-align: left;
//border: solid 1px #0f0;
background: #FF0099;
}




/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 732px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 732px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


/* Padding for the nav bar links if screen width is 'full size'  */
@media screen and (min-width: 854px) {

.dropdown .dropbtn {
    padding-left: 0px;
    padding-right: 0px;

//border: solid 1px #0ff;
  }
}

/* Padding for the nav bar links if screen width is 'orange'  */
@media (min-width:768px) and (max-width:853px) {

.dropdown .dropbtn {
    padding-left: 0px;
    padding-right: 0px;

//border: solid 1px #0ff;
  }
}

/* Padding for the nav bar links if screen width is 'purple'  */
@media (min-width:732px) and (max-width:767px) {

.dropdown .dropbtn {

    padding-left: 0px;
    padding-right: 0px;

//border: solid 1px #0ff;
  }
}


/* Switch between different nav menu styles according to device size */
/* default - for Small devices  */

  .topnav {
  font-size: 21px;
/* Pink  */
  background: #FF0099;
  }

  .topnav a {
/* Pink  */
  background: #FF0099;
  }

  .dropbtn a:hover {
/* Pink  */
  background: #FF33cc;
  }

  .dropdown a {
/* Pink  */
  background: #00ff00;
  }

.dropdown .dropbtn {
   padding-left: 0px;
   padding-top: 0px;
   background: #FF0099;
  }

  .dropbtn a {
/* Pink  */
  background: #FF0099;
  }

 .dropdown-content {
  line-height: 100%;

  border-top: 0px solid #555;
  border-left: 0px solid #000;
  border-right: 0px solid #000;
  border-bottom: 0px solid #555;

/* Grey Green */
   background: #098381;
}

.dropdown-content a {
   background: #098381;
}

 .dropdown-content a:hover {
/* Light Grey */
  background: #7d9d9b;
}




/* Switch nav menu - for Large devices  */
@media screen and (min-width: 732px) {

  .topnav  {
/* Black  */
  background: #000000;
  }

  .dropdown {
/* Pink  */
  background: #FF0099;
  }

  .dropdown a {
/* Pink  */
  background: #000000;
  }

.dropdown .dropbtn {
/* Black  */
  padding-top: 10px;
  background: #000000;
  }

 .dropdown-content {
  color: black;
  line-height: 100%;
  margin-top: 0px;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
  border-bottom: 0px solid #999;

/* Pink  */
  background: #FF0099;
  }

.dropdown-content a {
  background: #FF0099;
}

 .dropdown-content a:hover {
/*  Pink */
  background: #FF0099;
}


#topMenuItem {
  float: none; 
  border-top: 1px solid #0f0;
  border-left: 1px solid #0f0;
  border-right: 1px solid #0f0;
  border-bottom: 0px solid #0f0;

  border: none;

  position: relative;

  //margin-top: -15px;
}

#topMenuItem:hover {
  background: #ff0099;
}

#menuItem {
  float: none; 
  border-top: 0px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 0px solid #000;
  position: relative;
}

#bottomMenuItem {
  float: none; 
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  position: relative;
}

#topAndBottomMenuItem {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

/* This is the pink bar at the bottom of the nav menu  */
#bar {
	background: #FF0099;
	width: 100%;
	height: 8px;
}




/* ---  NAV MENU COLOURS --- */

/*  Large Screen  */

/* Pink  */
// background: #FF0099;

/*  Light Pink */
//background: #fb7ac6;




/*  Small Screen  */

/* Dark Gey Green */
   //background: #5e7776;

/* Grey Green */
   //background: #098381;

/* Light Grey */
//  background: #7d9d9b;