/*
----------------------------------------------------------------------------------------------------
   1. Reference
      - 1.1. 12 column grid
      - 1.2. 16 column grid
      - 1.3. Standard values
   2. Test and prototyping grids
      - 2.1. All grids
      - 2.2. IE6 and IE7
      - 2.3. 12 column grid
      - 2.4. 16 column grid
   3. Modifiers
   4. Structure
   5. Custom
*/

/* 1. Reference
----------------------------------------------------------------------------------------------------

1.1. Width values for 940px grid, with 60px columns and 20px gutters.

cols    | 1     | 2      | 3      | 4      | 5      | 6      | 7      | 8      | 9      | 10      | 11      | 12      
%       | 6.391 | 14.899 | 23.407 | 31.922 | 40.430 | 48.938 | 57.454 | 65.961 | 74.469 | 82.985  | 91.493  | 100  
px		| 60    | 140    | 220    | 300    | 380    | 460    | 540    | 620    | 700    | 780     | 860     | 940     

1.2. Width values for 940px grid, with 40px columns and 20px gutters.

cols    | 1     | 2      | 3      | 4      | 5      | 6      | 7      | 8      | 9      | 10      | 11      | 12      | 13      | 14      | 15      | 16
%       | 4.285 | 10.641 | 17.024 | 23.407 | 29.790 | 36.172 | 42.555 | 48.938 | 55.321 | 61.704  | 68.086  | 74.469  | 80.852  | 87.235  | 93.618  | 100
px		| 40    | 100    | 160    | 220    | 280    | 340    | 400    | 460    | 520    | 580     | 640     | 700     | 760     | 820     | 880     | 940

1.3. Standard values at 940px:

   * 10px = 1.055%
   * 20px = 2.109%

*** See below for IE6 and 7 margins ***

*/

/* 2. Test and prototyping grids - not for production
----------------------------------------------------------------------------------------------------
*/

/* 2.1. All grids */
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11, .grid12, .grid13, .grid14, .grid15, .grid16 {
	margin-right:2.109%;
	float:left;
}

/* 2.2. IE6 and 7 margins calculate differently */

.ie6 .grid1, .ie6 .grid2, .ie6 .grid3, .ie6 .grid4, .ie6 .grid5, .ie6 .grid6, .ie6 .grid7, .ie6 .grid8, .ie6 .grid9, .ie6 .grid10, .ie6 .grid11, .ie6 .grid12, .ie6 .grid13, .ie6 .grid14, .ie6 .grid15, .ie6 .grid16 {
	margin-right:1.350%; /* this will be ~20px */
}

.ie7 .grid1, .ie7 .grid2, .ie7 .grid3, .ie7 .grid4, .ie7 .grid5, .ie7 .grid6, .ie7 .grid7, .ie7 .grid8, .ie7 .grid9, .ie7 .grid10, .ie7 .grid11, .ie7 .grid12, .ie7 .grid13, .ie7 .grid14, .ie7 .grid15, .ie7 .grid16 {
	margin-right:2.039%; /* this will be ~20px */
}

/* 2.3. 12 column grid */

.gridBy12 .grid1 {width:6.391%;} .gridBy12 .grid2 {width:14.899%;} .gridBy12 .grid3 {width:23.407%;} .gridBy12 .grid4 {width:31.922%;} .gridBy12 .grid5 {width:40.430%;} .gridBy12 .grid6 {width:48.938%;} .gridBy12 .grid7 {width:57.454%;} .gridBy12 .grid8 {width:65.961%;} .gridBy12 .grid9 {width:74.469%;} .gridBy12 .grid10 {width:82.985%;} .gridBy12 .grid11 {width:91.493%;} .gridBy12 .grid12 {width:100%;}

/* 2.4. 16 column grid */

.gridBy16 .grid1 {width:4.258%;} .gridBy16 .grid2 {width:10.641%;} .gridBy16 .grid3 {width:17.024%;} .gridBy16 .grid4 {width:23.407%;} .gridBy16 .grid5 {width:29.790%;} .gridBy16 .grid6 {width:36.172%;} .gridBy16 .grid7 {width:42.555%;} .gridBy16 .grid8 {width:48.938%;} .gridBy16 .grid9 {width:55.321%;} .gridBy16 .grid10 {width:61.704%;} .gridBy16 .grid11 {width:68.086%;} .gridBy16 .grid12 {width:74.469%;} .gridBy16 .grid13 {width:80.852%;} .gridBy16 .grid14 {width:87.235%;} .gridBy16 .grid15 {width:93.618%;} .gridBy16 .grid16 {width:100%;}

/* 3. Modifiers
----------------------------------------------------------------------------------------------------
*/

.start {margin-left:0 !important;}

.end {margin-right:0 !important;}

.pullLeft {float:left;}

.pullRight {float:right;}

/* 4. Structure
----------------------------------------------------------------------------------------------------
*/

section {
	margin-left:auto;
	margin-right:auto;
	max-width:67.143em; /* 940px at 14px */
}

.ie7 section,
.ie8 section {
	min-width:58em; /* 812px at 14px */
}

.ie6 section {
	width:67.143em; /* 940px at 14px */
}

/* 5. Custom
----------------------------------------------------------------------------------------------------
*/

/* Structure */

.twoCol #main .wrapper {
	width:64.906%;
	float:left;
}

.twoCol #sidebar {
	width:31.922%;
	float:right;
}

.twoCol #content .primary {
	padding-right:0;
}

.twoCol #content .secondary {
	padding-left:0;
	background:none;
}

/* Background */
body,
#primary,
#secondary {
	background-image:url('../images/ui/fade.png');
	background-position:50% 0;
	background-repeat:repeat-y;
}

/* Header Area */

#logo {
	width:auto;
	float:left;
	overflow:hidden;
}

#login {
	margin-bottom:0.714em;
	display:block;
}

/* Go To */

#goTo {
	display:none !important;
}

/* Nav */

.js nav {
	display:block !important;
}

nav {
	padding:0.357em;
	background:#fff;
	float:right;
	clear:right;
	/* corners */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;	
}

.home nav {
	margin-bottom:5.429em;
}

nav .inner {
	background:#9D9CBD;
	overflow:hidden;
	font-size: 16px;
}

nav ol {
	display:block;
	overflow:hidden;
	white-space:nowrap;
	float:left;
}

nav li {
	margin:0;
	float:left;
	border-right:1px solid #fff;
	color: #DF7A00;	
	
}

nav li.chl2_last {
	border:none;
}

nav li a {
	/* corners */
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border-radius:0;
}

nav .homeLink,
nav .homeLink:visited {
	width:22px;
	height:2.857em;
	overflow:hidden;
	background-image: url('../images/ui/home.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

nav .homeLink span {
	position:absolute;
	left:-9999em;
}

/* Search */

#search {
	padding:0 0.714em;
	display:block;
	float:left;
}

#search input[type="text"] {
	width:6em;
	vertical-align:baseline;
}

/* Breadcrumb */

.twoCol #breadcrumb {
	width:64%;
}

/* Sidebar */

#sidebar {
	margin-top:-3em;
}

#sidebar .slider {
	min-height:268px;
}

/* Share */

#share {
	display:block;
}

/* Home - primary */

#primary {
	padding:0 1.429em;
}

#primary .slider {
	margin:-2em 0 1.429em 0;
	width:57.454%;
	float:left;
}

#primary .slides figure {
	margin:0;
	width:45%;
	clear:none;
}

#primary .slides figure.odd {
	float:left;
}

#primary .slides figure.even {
	float:right;
}

#primary .slides .wrap {
	width:auto;
	height:auto;
	float:none;
}

#primary .slides figcaption {
	margin:0;
	text-align:center;
}

#primary .intro {
	margin-top:2.5em;
	width:40.430%;
	float:right;
}

#primary .intro h2 {
	margin:-8em 0 0.714em 0;
	display:block;
	width:256px;
	height:118px;
	font-size:1em;
	line-height:1.429em;
	text-indent:-9999em;
	background:url('../images/ui/ourServices.png') no-repeat 0 0;
}

#primary .slides {
	padding-top:1.429em;
	padding-bottom:0.714em;
	min-height:13.143em;	
}

/* Home - secondary */

#secondary .media {
	margin-top:3em;
	width:23.407%;
	float:right;
}

/* Tabbed */

.tabbed h4 {
	margin:0;
}

.tabbed .tab,
.chl2_tabSet .chl2_tabList li {
	float:left;
}

.home .tabbed {
	margin-bottom:0;
	width:74.469%;
	float:left;
}

/* columns */

.tabbed .splitColumn:after,
.tabbed .threeColumn:after {
	content:"."; display:block; height:0; clear:both; visibility:hidden;
}

/* split column */

.tabbed .splitColumn li {
	float:left;
	width:49%;
}

.tabbed .splitColumn li:nth-child(2n+1) {
	clear:both;
}

.tabbed .splitColumn li:last-child,
.tabbed .splitColumn li:nth-last-child(2) {
	padding-bottom:0.714em;
}

.tabbed .splitColumn li .inner {
	padding:0 0.714em 0 0;
}

.tabbed .splitColumn li:nth-child(2n) .inner {
	padding:0 0 0 0.714em;
}

/* Three column */

.tabbed .threeColumn li {
	float:left;
	width:32%;
}

.tabbed .threeColumn li:nth-child(3n+1) {
	clear:both;
}

.tabbed .threeColumn li .inner {
	padding:0 0.714em 0 0;
}

.tabbed .threeColumn li:nth-child(2n) .inner {
	padding:0 0.357em;
}

.tabbed .threeColumn li:nth-child(3n) .inner {
	padding:0 0 0 0.714em;
}

/* Footer */

footer .inner {
	margin:auto;
}

footer section {
	padding:1.429em;
}

/* Columns */

.programs .column,
footer .column {
	margin:0;
	margin-right:2.109%;
	width:31.922%;
	float:left;
}

.column .inner {
	padding:0.714em 1.429em;
	border:1px solid #d9d9d9;
	/* corners */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

.programs .column:last-child,
footer .column:last-child {
	margin:0;
}

.ie6 .column,
.ie6 .column li,
.ie7 .column,
.ie7 .column li,
.ie8 .column,
.ie8 .column li {
	height:1%;
	overflow:hidden;
}

/* Further Info */

.furtherInfo {
	margin-bottom:0;
	text-shadow:0 1px rgba(255,255,255,0.8);
	color:#666;
    margin-top: 20px;
}

.furtherInfo li {
	margin-bottom:1.429em;
	display:block;
}

.furtherInfo li.chl2_odd,
.furtherInfo li.chl2_even {
	width:48.25%;	
	float:left;	
}

.furtherInfo li.chl2_odd {
	margin-right:3.45%;	
}

.furtherInfo li.chl2_even {
	margin-right:0;
}

.furtherInfo .inner {
	padding:0.714em;
	border:1px solid #cfd7e5;
	background:#f5f7fa;
	/* corners */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

.furtherInfo .image {
	display:block; /* reveal for wider devices */
	float:left;
	width:64px;
}

.furtherInfo img {
	display:block;
}

.furtherInfo .text {
	margin-left:74px;
}

.furtherInfo .noImage .text {
	margin-left:0;
}

.furtherInfo span {
	font-size:0.857em;
	line-height:1.5em;
}

/* Galleries */

.galleries li {
	margin:0 2.039% 0 0;
	width:23.407%;
	float:left;
}

.galleries li:last-child {
	margin-right:0;
}

/* Contact and People */

.staff .profile {
	margin-right:3.45%;
	width:31%;
	float:left;
}

.staff .profile.chl2_first {
	clear:both;
}

.staff .profile.chl2_third {
	margin-right:0;
}

/* Page Images */

.w_generic_image {
	width:30%;
}

.w_generic_image.small {
	width:16.2%;
}

.w_generic_image.chl2_left {
	margin-right:3.45%;
	float:left;
}

.w_generic_image.chl2_right {
	margin-left:3.45%;
	float:right;
}

/* Blog - News */

.chl2_w_news .chl2_image {
	margin:0;
	width:20%;
}

.chl2_w_news .chl2_featured .chl2_image {
	width:30%;
}

.chl2_w_news .hasImage .chl2_preview {
	margin-left:25%;
	clear:none;
}

.chl2_w_news .chl2_featured .hasImage .chl2_preview {
	margin-left:35%;
}

.chl2_w_blog .chl2_entry .chl2_image {
	margin:0 1.429em 1.429em 0;	
}

.chl2_w_blog .chl2_entry .chl2_image {
	margin:0 1.429em 1.429em 0;
}

.chl2_w_blog .chl2_entry .chl2_image + p,
.chl2_w_blog .chl2_entry .chl2_image + ul,
.chl2_w_blog .chl2_entry .chl2_image + ol {
	clear:none;
}

/* Events */

.chl2_w_calendar .chl2_image {
	margin:0 0 0.714em 0;
	width:17.5%;
}

.chl2_w_calendar .hasImage .chl2_preview {
	margin-left:22.5%;
	clear:none;
}

.chl2_w_event .chl2_image + p,
.chl2_w_event .chl2_image + ul,
.chl2_w_event .chl2_image + ol,
.chl2_w_event .chl2_details {
	clear:none;
}

.chl2_w_event .chl2_image {
	margin:0 1.429em 1.429em 0;
}

/* Youth Directory */

/* Note, pixel values are used here because the text must line up with a fixed sized image... */

.landing .item {
	margin-bottom: 0.714em;
	float: left;
	width: 25%;
}

.landing .level {
	padding: 72px 0.714em 0.714em 0.714em;
	border-top: none;
	border-left: 2px dotted #ccc; 		
	min-height: 80px;	
}

.landing .item.n1 .level {
	border: none;
}

.landing hr {
	clear: both;
}

.landing .item .segment {
	position:absolute;
	left:2px;
	top:0;
	right:0;
	width:auto;
	height:60px;
	background: url('../images/yd/scale.png') no-repeat 50% 0;
}			

.audience_1 .landing .item .segment,
.audience_2 .landing .item .segment {
	background: url('../images/yd/scale1.png') no-repeat 50% 0;	
}

.audience_3 .landing .item .segment,
.audience_4 .landing .item .segment {
	background: url('../images/yd/scale2.png') no-repeat 50% 0;	
}

.landing .item.n1 .segment {
	left: 0;
	background-color: #e93231;
}

.landing .item.n2 .segment {
	background-color: #f36b37;
	background-position: 50% -60px;	
}

.landing .item.n3 .segment {
	background-color: #f36b37;
	background-position: 50% -120px;	
}

.landing .item.n4 .segment {
	background-color: #accc52;
	background-position: 50% -180px;		
}

.landing .btn {
	margin:1.25%;
	float:left;
	width:40%;
	max-width:145px;
	padding:2.5%;
	text-align:left;
	clear:none;
}

.tabbed .flexiEqual {
	width:48.75%;
}

.tabbed .flexiCol {
	margin:0;
}

.triangle.chl2_left img {
	width:128px;
	height:128px;
}

.chl2_button.telephone {
	display:none;
}

/* Tweak columns */

.flexiEqual {
	width: 48.75%;
}