/* Start of CSS external style sheet for Barnet Plus Website */

/* Body style - border image */

@media only screen and (max-device-width: 1100px) {
body
 	{
	font-family: arial, helvetica, san-serif; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	margin-top: 10px;
	margin-bottom: 10px;
	}

/* Paragraph style */
p
	{
	font-family: arial, helvetica, san-serif;
	font-size: 20px;
	color: black;
	}


/* Mouse reactive styling - unvisited link */
a:link
	{
	color: blue;
	text-decoration: none;
	}

/* Mouse reactive styling - visited link */
a:visited
	{
	color: blue;
	text-decoration: none;
	}

/* Mouse reactive styling - selected link */
a:active
	{
	color: blue;
	text-decoration: none;
	}

/* Mouse reactive styling - mouse over link */
a:hover
	{
	color: blue;
	text-decoration: underline;
	}

/* Page header and content wrapper - white background, blue border  */
#page_wrapper
	{
	margin-left: auto; 
	margin-right: auto;
	width: 950px;
	text-align: left;
	background: #FFFFFF;
	border: 4px solid #8899AA;
	border-radius:32px;
	border-top-right-radius:32px;
	}

/* Page header - light blue background , Barnet Plus logo */
#page_header
	{
	height: 120px;
	background-color: #CCDDEE;
	background-image: url('barnet_logo1.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center 5px;
	clear: both;
	border-top-left-radius:28px;
	border-top-right-radius:28px;
	}


/* Header 1 (h1) styling within page_header id - white text */
#page_header h1
	{
	margin: 0px;
	padding-top: 30px;
	padding-left: 25px;
	font-family: arial, helvetica, san-serif;
	font-size: 32px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #FFFFFF;
	}

/* Header 2 (h2) styling within page_header id - white text */
#page_header h2
	{
	margin: 0px;
	padding-top: 90px;
	padding-left: 295px;
	font-family: arial, helvetica, san-serif;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 2px;
	color: #FF8888;
	}

/* Page header animated - light blue background , Barnet Plus logo */
#page_header_anim
	{
	height: 120px;
	background-color: #CCDDEE;
	background-image: url('barnet_logo1_animated.gif');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center 5px;
	clear: both;
	border-top-left-radius:28px;
	border-top-right-radius:28px;
	}

/* Header 1 (h1) styling within page_header id - white text */
#page_header_anim h1
	{
	margin: 0px;
	padding-top: 30px;
	padding-left: 25px;
	font-family: arial, helvetica, san-serif;
	font-size: 32px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #FFFFFF;
	}

/* Header 2 (h2) styling within page_header id - white text */
#page_header_anim h2
	{
	margin: 0px;
	padding-top: 90px;
	padding-left: 295px;
	font-family: arial, helvetica, san-serif;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 2px;
	color: #FF8888;
	}

/* START of HORIZONTAL NAVIGATION MENU BAR STYLES  */
/* Navigation menu bar styling -  shadow below menu bar */
#menu_bar
	{
	height: 40px;
	background: #FFFFFF url('drop_shadow.gif') top left repeat-x;
	clear: both;
	}

/* Unordered list (ul) styling within navigation menu bar (menu_bar id)  -  orange horizontal bar  */
#menu_bar ul
	{
	margin-top: 0px;
	padding-left: 0px;
	margin-left: 0px;
	background: #7A5DC7 url('menu_bg.gif') top left repeat-x;
	color: white;
	float: left;
	width: 100%;
	font-family: arial, helvetica, san-serif;
	font-size: 26px;
	font-weight: bold;
	}

/* List (li) styling within navigation menu bar (menu_bar id)  -  no line breaks */
#menu_bar ul li
	{
	display: inline;
	}

/* Menu anchor (a) styling within navigation menu bar (menu_bar id)  -  off-white text */
#menu_bar ul li a
	{
	padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 20px;
	padding-right: 20px;
	background: #7A5DC7 url('menu_bg.gif') top left repeat-x;
	color: #EFEFEF;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fff;
	}

/* Hover menu anchor styling within navigation menu bar (menu_bar id)  -  white text and menu hover background image when mouse hovers over menu link  */
#menu_bar ul li a:hover
	{
	background: #7A5DC7 url('menu_hover_bg.gif') top left repeat-x;
	color: #FFFFFF;
	}
/* END of HORIZONTAL NAVIGATION MENU BAR STYLES  */

/* Internal content margins */
#content_wrapper
	{
	margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 15px;
	margin-right: 15px;
	clear: both;
	}

/* General left column styling */
#left_side
	{
	float: left;
	width: 100%;
	background-color: #FFFFFF;
	border: 0px dashed #cccccc;
	}

/* Header 1 (h1) styling within left column  */
#left_side h1
	{
	margin-top: 0px;
	margin-bottom: 10px;
	font-family: times new roman, times, arial, helvetica, san-serif;
	font-size: 44px;
	font-style: italic;
	color: #000000;
	background-color:#FFFFFF;
	padding: 4px;
	border-bottom: 1px solid #018843;
	clear: both;
	}

/* Header 3 (h3) styling within left column  */
#left_side h3
	{
	margin-top: 0px;
	margin-bottom: 10px;
	font-family: arial, helvetica, san-serif;
	font-size: 36px;
	color: #7A5DC7;
	background-color:#FFFFFF;
	padding: 4px;
	border-bottom: 1px solid #018843;
	clear: both;
	}

/* Paragraph (p) styling within left column */
#left_side p
	{
	margin-top: 0px;
	margin-bottom: 15px;
	font-family: arial, helvetica, san-serif;
	font-size: 32px;
	color: #444444;
	line-height:1.5;
	padding-left:4px;
	}

/* General right column styling */
#right_side
	{
	margin-top: 5px;
	float: bottom;
	width: 90%;
	border: 0px dashed #cccccc;
	}

/* Header 3 (h3) styling within right column */
#right_side h3
	{
	margin-top: 0px;
	margin-bottom: 10px;
	font-family: arial;
	font-size: 30px;
	color: #7A5DC7;
	padding: 4px;
	border: 1px solid #AAE5A4;
	background-color: #F4FDE5;
	}

/* General page footer styling right column */
#right_side p
	{
	margin-top: 0px;
	margin-bottom: 15px;
	font-family: arial, helvetica, san-serif;
	font-size: 26px;
	color: #666666;
	line-height: 1.3;
	padding-left: 4px;
	}

/* To place images to the left side of a page */
.float_left
	{
	float: left;
	margin-right: 10px;
	}

/* To place images to the right side of a page */
.float_right
	{
	float: right;
	margin-left: 10px;
	}

/* Adds space before start of page_footer */
#spacer
	{
	height: 20px;
	clear: both;
	}

/* General page footer styling  */
#page_footer
	{
	height: 108px;
	background-color: #CCDDEE;
	clear: both;
	border-bottom-left-radius:28px;
	border-bottom-right-radius:28px;
	}

/* Paragraph (p) styling within page_footer */
#page_footer p
	{
	padding-bottom: 3px;
	text-align: center;
	font-family: arial, helvetica, san-serif;
	font-size: 1px;
	color: #99CC33;
	letter-spacing: 1px;
	}

/* Header 2 (h2) styling within page_footer */
#page_footer h2
	{
	text-align: center;
	font-family: arial, helvetica, san-serif;
	font-size: 24px;
	color: #777777;
	letter-spacing: 1px;
	}

/* Anchor (a) styling within page_footer */
#page_footer a
	{
	padding-left: 12px;
	padding-right: 12px;
	font-family: arial, helvetica, san-serif;
	font-size: 24px;
	color: #777777;
	letter-spacing: 1px;
	text-decoration: none;
	}
	}


/*    Break between small-screen styles (above) and big-screen styles (below)    */



@media only screen and (min-device-width: 1100px) {

body
 	{
	font-family: arial, helvetica, san-serif; 
  	background: url(background_canvas.jpg) no-repeat center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	margin-top: 10px;
	margin-bottom: 10px;
	}

/* Paragraph style */
p
	{
	font-family: arial, helvetica, san-serif;
	font-size: 14px;
	color: black;
	}


/* Mouse reactive styling - unvisited link */
a:link
	{
	color: blue;
	text-decoration: none;
	}

/* Mouse reactive styling - visited link */
a:visited
	{
	color: blue;
	text-decoration: none;
	}

/* Mouse reactive styling - selected link */
a:active
	{
	color: blue;
	text-decoration: none;
	}

/* Mouse reactive styling - mouse over link */
a:hover
	{
	color: blue;
	text-decoration: underline;
	}

/* Page header and content wrapper - white background, dark green border  */
#page_wrapper
	{
	margin-left: auto; 
	margin-right: auto;
	width: 950px;
	text-align: left;
	background: #FFFFFF;
	border: 4px solid #018843;
	border-radius:32px;
	border-top-right-radius:32px;
	}

/* Page header - light green background , Barnet Plus logo */
#page_header
	{
	height: 120px;
	background-color: #99CC33;
	background-image: url('barnet_logo1.png');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center 5px;
	clear: both;
	border-top-left-radius:28px;
	border-top-right-radius:28px;
	}


/* Header 1 (h1) styling within page_header id - white text */
#page_header h1
	{
	margin: 0px;
	padding-top: 30px;
	padding-left: 25px;
	font-family: arial, helvetica, san-serif;
	font-size: 32px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #FFFFFF;
	}

/* Header 2 (h2) styling within page_header id - white text */
#page_header h2
	{
	margin: 0px;
	padding-top: 90px;
	padding-left: 295px;
	font-family: arial, helvetica, san-serif;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 2px;
	color: #FFFFFF;
	}

/* Page header animated - light green background , Barnet Plus logo */
#page_header_anim
	{
	height: 120px;
	background-color: #99CC33;
	background-image: url('barnet_logo1_animated.gif');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center 5px;
	clear: both;
	border-top-left-radius:28px;
	border-top-right-radius:28px;
	}

/* Header 1 (h1) styling within page_header id - white text */
#page_header_anim h1
	{
	margin: 0px;
	padding-top: 30px;
	padding-left: 25px;
	font-family: arial, helvetica, san-serif;
	font-size: 32px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #FFFFFF;
	}

/* Header 2 (h2) styling within page_header id - white text */
#page_header_anim h2
	{
	margin: 0px;
	padding-top: 90px;
	padding-left: 295px;
	font-family: arial, helvetica, san-serif;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 2px;
	color: #FFFFFF;
	}

/* START of HORIZONTAL NAVIGATION MENU BAR STYLES  */
/* Navigation menu bar styling -  shadow below menu bar */
#menu_bar
	{
	height: 40px;
	background: #FFFFFF url('drop_shadow.gif') top left repeat-x;
	clear: both;
	}

/* Unordered list (ul) styling within navigation menu bar (menu_bar id)  -  orange horizontal bar  */
#menu_bar ul
	{
	margin-top: 0px;
	padding-left: 0px;
	margin-left: 0px;
	background: #7A5DC7 url('menu_bg.gif') top left repeat-x;
	color: white;
	float: left;
	width: 100%;
	font-family: arial, helvetica, san-serif;
	font-size: 14px;
	font-weight: bold;
	}

/* List (li) styling within navigation menu bar (menu_bar id)  -  no line breaks */
#menu_bar ul li
	{
	display: inline;
	}

/* Menu anchor (a) styling within navigation menu bar (menu_bar id)  -  off-white text */
#menu_bar ul li a
	{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
	background: #7A5DC7 url('menu_bg.gif') top left repeat-x;
	color: #EFEFEF;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fff;
	}

/* Hover menu anchor styling within navigation menu bar (menu_bar id)  -  white text and menu hover background image when mouse hovers over menu link  */
#menu_bar ul li a:hover
	{
	background: #7A5DC7 url('menu_hover_bg.gif') top left repeat-x;
	color: #FFFFFF;
	}
/* END of HORIZONTAL NAVIGATION MENU BAR STYLES  */

/* Internal content margins */
#content_wrapper
	{
	margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 15px;
	margin-right: 15px;
	clear: both;
	}

/* General left column styling */
#left_side
	{
	float: left;
	width: 70%;
	background-color: #FFFFFF;
	border: 0px dashed #cccccc;
	}

/* Header 1 (h1) styling within left column  */
#left_side h1
	{
	margin-top: 0px;
	margin-bottom: 10px;
	font-family: arial, helvetica, san-serif;
	font-size: 28px;
	color: #000000;
	background-color:#FFFFFF;
	padding: 4px;
	border-bottom: 1px solid #018843;
	clear: both;
	}

/* Header 3 (h3) styling within left column  */
#left_side h3
	{
	margin-top: 0px;
	margin-bottom: 10px;
	font-family: arial, helvetica, san-serif;
	font-size: 18px;
	color: #7A5DC7;
	background-color:#FFFFFF;
	padding: 4px;
	border-bottom: 1px solid #018843;
	clear: both;
	}

/* Paragraph (p) styling within left column */
#left_side p
	{
	margin-top: 25px;
	margin-bottom: 15px;
	font-family: arial, helvetica, san-serif;
	font-size: 16px;
	color: #222222;
	line-height: 1.4;
	padding-left:4px;
	}

/* General right column styling */
#right_side
	{
	margin-top: 5px;
	float: right;
	width: 27%;
	border: 0px dashed #cccccc;
	}

/* Header 3 (h3) styling within right column */
#right_side h3
	{
	margin-top: 0px;
	margin-bottom: 10px;
	font-family: arial;
	font-size: 14px;
	color: #7A5DC7;
	padding: 4px;
	border: 1px solid #AAE5A4;
	background-color: #F4FDE5;
	}

/* General page footer styling right column */
#right_side p
	{
	margin-top: 0px;
	margin-bottom: 15px;
	font-family: arial, helvetica, san-serif;
	font-size: 11px;
	color: #666666;
	line-height: 1.4;
	padding-left: 4px;
	}

/* To place images to the left side of a page */
.float_left
	{
	float: left;
	margin-right: 10px;
	}

/* To place images to the right side of a page */
.float_right
	{
	float: right;
	margin-left: 10px;
	}

/* Adds space before start of page_footer */
#spacer
	{
	height: 20px;
	clear: both;
	}

/* General page footer styling  */
#page_footer
	{
	height: 88px;
	background-color: #99CC33;
	clear: both;
	border-bottom-left-radius:28px;
	border-bottom-right-radius:28px;
	}

/* Paragraph (p) styling within page_footer */
#page_footer p
	{
	padding-bottom: 3px;
	text-align: center;
	font-family: arial, helvetica, san-serif;
	font-size: 10px;
	color: #FFFFFF;
	letter-spacing: 1px;
	}

/* Header 2 (h2) styling within page_footer */
#page_footer h2
	{
	text-align: center;
	font-family: arial, helvetica, san-serif;
	font-size: 14px;
	color: #FFFFFF;
	letter-spacing: 1px;
	}

/* Anchor (a) styling within page_footer */
#page_footer a
	{
	padding-left: 12px;
	padding-right: 12px;
	font-family: arial, helvetica, san-serif;
	font-size: 14px;
	color: #FFFFFF;
	letter-spacing: 1px;
	text-decoration: none;
	}
	}

/* End of CSS external style sheet for Barnet Plus Website */