/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Title : Reachout New Page Layout
URL : http://www.reachout.org.uk/
Created : June 2013
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

body  {
	font: 100% 'Century Gothic', Arial, Verdana, Helvetica, sans-serif;
	background: #F4F4F4 url(images/patterns-full.gif) bottom left repeat-x fixed;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: left; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	margin-top: 0px;
}

#wrapper {
	max-width: 935px;
	margin: 0px auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000;
	background-color: #fff;
}

a {
	text-decoration: none;
	color: #930;
}

a:hover {
	color: #F35100;
}


/* =Global
----------------------------------------------- */

/* Forms */
input[type=text],
input[type=password],
textarea {
	background: #fafafa;
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	border: 1px solid #ddd;
	color: #888;
}
input[type=text]:focus,
textarea:focus {
	color: #373737;
}
textarea {
	padding-left: 3px;
	width: 98%;
}
input[type=text] {
	padding: 3px;
}
input#s {
	background: #fff url(search.png) no-repeat 2px 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-size: 14px;
	height: 15px;
	line-height: 1.2em;
	padding: 4px 10px 4px 28px;
	color: #999;
	font-family: 'Century Gothic';
}
input#searchsubmit {
	display: none;
}




/* =Responsive Structure
----------------------------------------------- */

@media (max-width: 800px) {
	/* Simplify the basic layout */

}
@media (max-width: 650px) {
	/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */

}
@media (max-width: 450px) {

}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

}


/* =Print
----------------------------------------------- */

@media print {

}


/* =IE7
----------------------------------------------- */

#ie7 article.intro {
	margin-left: -7.6%;
	margin-right: -7.6%;
	padding-left: -7.6%;
	padding-right: -7.6%;
	max-width: 1000px;
}
#ie7 section.featured-post {
	margin-left: -7.6%;
	margin-right: -7.6%;
	max-width: 850px;
}
#ie7 section.recent-posts {
	margin-right: 7.6%;
}

/* Extra styles for home page
  
*/

/*p{
	margin: 0 0 0px 0;	
}*/

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


img{
	border: 0;
}

h2{
	margin: 0 0 2px 0;
}

.float-left{
	float: left;	
	margin: 0 0 0 20px;
}

.float-right{
	float: right;
	margin: 0 50px 0 0;
}


#wrapper img {
	max-width: 100%;
	height: auto;
}

#container {
	padding: 1.604278%; /* 15px/935px */
	padding-bottom: 2.13904%; /* 20px/935px */
	border: 0px solid #000;
}

#left {
	margin: 2.13904%; /* 20px/935px */
	margin-top: 0;
	border: 0px solid #000;
	width: 26.73797%; /* 250px/935px */
	width: 190px;
	position: fixed;
	float: left;
}

#left .logo {
	text-align: right;
}

#left .menu {
	margin-top: 30px;
}

#left .menu a {
	color: #000;
}

#left .menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	border-bottom: 2px solid #F5962E;
}

#left .menu ul.sub-menu {
	margin-top: 7px;
	border-bottom: 0px solid #F5962E;
	border-top: 1px solid #F5962E;
}

#left .menu ul li {
	padding: 7px 0;
	border-top: 2px solid #F5962E;
	font-weight: bold;
}

#left .menu ul.sub-menu li {
	border-top: 1px solid #F5962E;
}

#left .menu ul ul {
	margin-left: 0px;
	padding: 0px;
	list-style: none;
	border-top: 0px solid #F5962E;
}

#left .menu ul ul li {
	padding: 7px 0 7px 20px;
	border-top: 1px solid #F5962E;
	font-weight: normal;
}

#left .menu ul li .sub-menu {
	display: none;
}

#left .menu ul li.current-menu-item .sub-menu {
	display: block;
}

#left .menu .current-menu-ancestor .sub-menu { 
	display:block; 
}

#left .social-media {
	margin-top: 10px;
}

#left .social-media img {
	margin-right: 10px;	
}

#left .random-quotes {
	margin: 10px 0 20px;
	border-top: 5px solid #DE872A;
	padding: 3px 0 0;
	font-size: 13px;
	font-weight: bold;
	color: #DE872A;
}

#left .random-quotes p {
	margin: 0px;
	font-weight: normal;
}


#right {
	float: right;
	width: 68.98396%; /* 645px/935px */
	border: 0px solid #000;
	margin-right: 1.604278%; /* 15px/935px */
}

#right .banner img {
	border: 1px solid #ddd;
}

#right .banner h3 {
	color: #333;
}

#right .home-info {
	margin: 0 0 30px;
	font-size: 14px;
	line-height: 22px;
}

#right .home-info h3 {
	margin-bottom: -10px;
}

#right .content {
	margin-top: 2.13904%; /* 20px/935px */
	margin-bottom: 3.20856%; /* 30px/935px */
	padding: 2.13904% 0;
	padding-right: 1.06992%;
	border-top: 2px solid #F5962E;
	font-size: 14px;
	line-height: 24px;
}

#right .boxes {
	margin: 0px 0 30px;
	/*width: 850px;*/
}

#right .boxes .box {
	/*
	width: 20.42781%;
	margin: 1.06992% 0.53476% 1.06992%;
	*/
	width: 150px;
	margin: 10px 50px 0 0;
	padding: 0;
	border: 0px solid #666;
	/*display: inline-block;*/
	float: left;
}

#right .boxes .box:last-child {
	margin: 10px 0px 0 0;
}

#right .box .title {
	padding: 5px 0 5px 5px;
	border: 1px solid #C67723;
	border-bottom: 1px solid #000;
	background: #F5962E; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#F5962E, #E77B03);
	background: -o-linear-gradient(#F5962E, #E77B03);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5962E), to(#E77B03)); /* older webkit syntax */
	background: -webkit-linear-gradient(#F5962E, #E77B03);
	font-size: 15px;
	font-weight: normal;
	color: #fff;
	cursor: pointer;
}

#right .box h2 {
	font-size: 14px;
	line-height: 20px;
}

#right .box img {
	max-width: 150px !important;
	height: auto;
	padding: 0 !important;
	border: none !important;
}

#right .box p {
	font-size: 12px;
	line-height: 18px;
	margin: 0;
}

#right .special-box {
	border: 1px solid #E77B03;
	padding: 10px;
	margin: 0 0 30px;
	background-color: #FFF0DC;
}

#right .special-box img {
	float: left;
	margin: 0 10px 0;
}

#right .content img {
    border: 1px solid #DDDDDD;
    padding: 6px;
}

#footer {
	padding: 3px 0px;
	width: 100%;
	background: #E77B03; /* Show a solid color for older browsers */
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px;
	border-top: 1px solid #C67723;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	z-index: 100;
	clear: both;
	text-align: center;
}

#footer a {
	color: #F7D985;
	font-size: 11px;
}


/**
  * Rhinoslider 1.05
  * http://rhinoslider.com/
  *
  * Copyright 2013: Sebastian Pontow, Rene Maas (http://renemaas.de/)
  * Dual licensed under the MIT or GPL Version 2 licenses.
  * http://rhinoslider.com/license/
  */
.rhino-btn {
	background:url(../img/rhinoslider-sprite.png) 0 0 no-repeat;
	z-index:10;
	width:56px;
	height:53px;
	display:block;
	text-indent:-999%;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
}

.rhino-prev, .rhino-next { bottom:-4px; }

.rhino-prev {
	left:-6px;
	background-position:-168px 0;
}

.rhino-next {
	right:-6px;
	background-position:-106px 0;
}

.rhino-prev:hover { background-position:-168px -53px; }

.rhino-next:hover { background-position:-106px -53px; }

.rhino-toggle {
	top:-4px;
	left:-6px;
}

.rhino-play { background-position:0 0; }

.rhino-play:hover { background-position:0 -53px; }

.rhino-pause { background-position:-56px 0; }

.rhino-pause:hover { background-position:-56px -53px; }

.rhino-container { position:relative; }

.rhino-caption {
	position:absolute;
	background: #000;
	display:none;
	left:0;
	right:0;
	top:0;
	color:#fff;
	padding:10px;
	text-align:right;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
}

.rhino-bullets {
	position: absolute;
	top: 0px;
	left: 0%;
	margin: -65px 0 10px 15px;
	z-index: 10;
	background: #fff;
	padding:0;
}

.rhino-bullets:before, .rhino-bullets:after {
	position:absolute;
	display:block;
	left:-16px;
	content:' ';
	width:16px;
	height:26px;
	background:url(../img/rhinoslider-sprite.png) -224px 0 no-repeat;
}

.rhino-bullets:after {
	left:auto;
	right:-16px;
	background-position: -240px 0;
}

.rhino-bullets li {
	float:left;
	display:inline;
	margin:0 12px;
}

.rhino-bullets li a.rhino-bullet {
	display: block;
	width: 16px;
	height: 35px;
	cursor: pointer;
	background: white;
	font-size: 30px;
	text-align: center;
	padding: 6px 5px 5px 5px;
	color: #333;
	text-decoration:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
}

.rhino-bullets li a.rhino-bullet:hover, .rhino-bullets li a.rhino-bullet:focus {
	color:#999;
	background:#eee;
}

.rhino-bullets li a.rhino-bullet.rhino-active-bullet {
	color:#fff;
	/*background:#5cd4e8;*/
	background: #e47823;
}


/**
 * Responsive Navigation
 *
 **/

#left .handle a#pull {
	display: none;
	padding: 5px 0px;
}

/*Styles for screen 745px and lower*/
@media screen and (max-width: 745px) {
	#left .menu { 
  		height: auto;
		float: left;
		width: 100%;
		margin-top: 0px;
  	}
	#left .menu ul {
		display: none;
		height: auto;
	}
	#left .handle a#pull {
		display: block;
		background-color: #283744;
		width: 100%;
		text-align: right;
		float: right;
		border-top: 1px solid #C67723;
		border-bottom: 1px solid #C67723;
		background: #F5962E; /* Show a solid color for older browsers */
		background: -moz-linear-gradient(#F5962E, #E77B03);
		background: -o-linear-gradient(#F5962E, #E77B03);
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5962E), to(#E77B03)); /* older webkit syntax */
		background: -webkit-linear-gradient(#F5962E, #E77B03);
	}
	#left .handle a#pull:after {
		background: url('images/nav-icon.png') top right no-repeat;
		width: 100%;
		height: 30px;
	}
	#left {
		float: none;
		position: inherit;
		/*width: 68.98396%;  645px/935px */
		margin-right: 1.604278%; /* 15px/935px */
		margin-left: 0;
		width: 100%;
	}
	#left .logo {
		text-align: left;
	}
	#right {
		float: none;
		clear: left;
		width: 100%;
	}
}


table {
    border-bottom: 1px solid #DDDDDD;
    margin: 0 0 1.625em;
    width: 100%;
}

th {
    color: #666666;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2.6em;
    text-transform: uppercase;
}

td {
    border-top: 1px solid #DDDDDD;
    padding: 6px 10px 6px 0;
}