@charset "utf-8";
/* CSS Document */

/* should we set the line-height here or before? */
body { 
	background-color: #FFF;  
	color: #000; /*font color*/
	font: 62.5% Arial, Helvetica, sans-serif;
	text-align: center; 
	line-height: 1.3em; /*sets the height of the footer, and the table of the navbar   */
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

ul { /* this is the default style - change at will - SUGGEST A STYLE */
	margin-left: 20px; /* indented from side */
	margin-bottom: 20px; /* space after */
}

ol { /* this is the default style - change at will - SUGGEST A STYLE */
	margin-left: 20px; /* indented from side */
	margin-bottom: 20px; /* space after */
	list-style:square;
}

a {
	color: #000000; /* default value=   */ 
}
a:visited { /* default value=   */ 
	color: #666;
}

/* HEADERS -------------------------------------------------------------------------- */
h1 {
	color: #89181e; /* COLOUR CHANGE */ /* replace H tags colour with your own */
	/* default margins = margin: 0.5em 0 1em 0; for h tags: in this order: top, right, bottom, left */ 
	/*HEADING 1 font colour*/
	font-size:2em;
	margin-right:20px;
}
h2 {
	color: #89181e;/* COLOUR CHANGE */
	font-size: 1.4em;
	margin-right:10px;
}
h3 {
	color: #89181e; /* COLOUR CHANGE */
	font-size: 1.15em;
	/* default margins = margin: 0.5em 0; for h tags: in this order: top/bottom, right/left */
margin-right:10px;
}
h4 {
	color: #89181e; /* COLOUR CHANGE */
	/*heading 4 font colour*/
}

h5 {
	color: #89181e; /* COLOUR CHANGE */
	/*heading 4 font colour*/
}

/* POSITIONING - generic use =------------------------------------------------------- */

.right { /* aligns - floats right - margins adjustable??? */
	margin-left: 20px;  /* comment out and suggest ways to use this class */
}
.left { /* aligns - floats left - margins adjustable??? */
	margin-right: 20px;
}

.large { /* larger text - this is arbitrarily large - I made it for TCU */
	font-size: 1.4em;
	margin-top: 20px;
	display: block;
}

hr { color: #bfbfbf; background-color: #bfbfbf; }
hr.thick { height: 3px; color: #666; background-color: #666; } /* thicker separator line - change colour if desired for greater emphasis */
/* comment out and suggest ways to use this class */

/* LINKS ------------------------ default link style */

a,  a:link,  a:visited,  a:active {
	color: #052f43; /* COLOUR CHANGE */
}
a:hover {
	color: #89181e; /* COLOUR CHANGE */
}
a h4 { color: #006383; } /* COLOUR CHANGE */
a:hover h4 { text-decoration:underline; }
a#skipNav:active, a#skipNav:focus { color: #000; } /* Colour for skipnav link when tabbed / clicked - is white to hide it ohterwise */
.more a, .more a:link, .more a:visited, .more a:active { color:#89181e; }
/* NAVIGATION STYLE - will eventually change to accomodate full grid system  */

/* IMAGE PATHS + THEME / COLOUR CHANGES -- change to match your site structure */

#arc {
	background-image: url('../images/template/header_arc.gif');
}

#navbar { /* the main nav bar */
	background-color: #0a3f59; /* COLOUR CHANGE - replace Background colour with your colour that matches the graphic */ 
}
.menu li li a {/* sub menu styling - positions the arrow graphic in a bit more */
	background-image: url('../images/template/triangle_right.gif'); 
}


/*.nav_top      { background-image: url('../images/corner_nav_top.gif');  }
.nav_bottom   { background-image: url('../images/corner_nav_bottom.gif');  }*/
.main_top     { background-image: url('../images/corner_main_top.gif');  }
.photo_top    { background-image: url('../images/template/corner_photo_top.gif');  }
.photo_bottom { background-image: url('../images/template/corner_photo_bottom.gif');  }
.icon_top     { background-image: url('../images/template/corner_icon_top.gif');  }
.icon_bottom  { background-image: url('../images/template/corner_icon_bottom.gif');  }
.photo_long { background-image: url('../images/corner_photo_long.gif');}

/* ------------ SPLASH PAGE ------------*/

#splash {
	background-image: url('../images/template/header_arc.gif'); /* re-uses HEADER ARC image no need to change */
	border-color: #0A3F59; /* COLOUR CHANGE this is a colour that matches your site *** make sure to make a header ARC image to match if changing it */
	border-bottom-color: #0A3F59; /* COLOUR CHANGE this is a colour that matches the MAIN NAVIGATION BAR  */
}

#splash .two_cols { 
	background-image: url('../images/template/splash_line.gif');  /* this line matches the outline of the border above - Graphic in file: Splash_Master.psd */
}

#splash h2 a { color: #052F43; /* COLOUR CHANGE language links - match if you like */} 

.two_cols {	background-image: url('../images/two_cols.gif') ;} /* PATH CHANGE */
.three_cols { background-image: url('../images/three_cols.gif'); } /* PATH CHANGE */

#searchBox { /* search box */
	background-color: #fff; /* COLOUR CHANGE */
	border: 1px solid #1d2d44;
}

#submit { /* submit button */
	background-color: #1d2d44;
	color: #fff; /* COLOUR CHANGE */
	vertical-align:top;
}
#navbar p a { /* links in navbar */
	color: #FFFFFF; /* COLOUR CHANGE - MAKE SURE CONTRAST IS VERY HIGH */
	padding: 0 10px 0 8px; /* default */
	border-right: 2px solid #FFFFFF; /* COLOUR CHANGE (the bars in between)  - MAKE SURE CONTRAST IS VERY HIGH */
}

#banner { /* holds flash banner or static banner */
/*the bg table that holds the flash banner above (controls the colour and its size)*/
 border-bottom: 4px solid #89181e;
 overflow:hidden;
 height:185px;/* COLOUR CHANGE - this is the colour stripe under the flash banner */
}

.leftnav .header { 
	border-color: #bfbfbf;
	background: #701318 url('../images/template/arc_left.gif') no-repeat; /* COLOUR CHANGE header BG image match #colour to bottom half of arc graphic */  
}

.leftnav .header a { 
	color: #000;   /* Link in Navigational Header */
}

.leftnav .mycolour .header {
	border-bottom-color: #ccc;
	background-color: #701318;
	/*background-image: url('../images/arc_left_mycolour.gif');*/ /* COLOUR CHANGE header BG image match #colour to bottom half of arc graphic */
}

.leftnav .mycolour .header a { 
	color:#fff; /* COLOUR CHANGE update font to contrast w BG color (above in .leftnav .mycolour .header) */ 
} 

.menu a {	 
	padding: 10px 4px 10px 24px; /* this creates the size of the menu item box - last value is the distance of the text from the side */
	/*border-bottom: 1px dotted #666; */
	/*background: #f7f7ef url('../images/template/triangle_right.gif') no-repeat 12px 13px; */
}

.menu a:link,.menu a:visited,.menu a:active { 
	/*color: #333333;  optional COLOUR CHANGE */
	
}

.menu a:hover {
	/*color: #000000; optional COLOUR CHANGE */
}

/* MENU - Current item colour - USE to DESIGNATE THE CURRENT PAGE - add this id to the appropriate li in the menu */
#current { background-color: #ffffff; }

#contacts { display: none; } /* closes the menu by default */
#explore { 	display: none; } /* closes the menu by default - add your own menu items here */

#right_column ul li {
	color: #000000; /* text color for lists in content area */
	list-style-type:disc;
}

#right_column ol li { 
	color: #000000;
	list-style-type:decimal;}

.date  { color: #000000; } /* CHANGE COLOUR OF NEWS DATES here */


.row .header { /* attributes for all header bars */
	/*border-top: 3px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color: #c4e3f1; /* COLOUR CHANGE the background colour to your site's colour scheme */
	/*background-image: url('../images/template/arc_right_main.gif'); /* CHANGE PATH to match your site structure */
	color: #89181e; /* color for all row headers */
	font-size:1.4em;
	padding-top:20px;
}
.header h1 {
	/* extra if you want to change for specific headers */
	color : #89181e;
}
.header h2 {
	/* extra if you want to change for specific headers */
	color : #89181e;
}

.box {
	background-color: #f8f6d7;
	border-bottom: 1px solid #666;
}

.box table td { border-top: 1px dotted #666; }

.photolink .text {
	color: #fff; /* set colour of link text under photos here */
	background-color: #0a3f59; 
}

.photolink a{color:#fff; margin:10px}

/*controls the colour of the bg of the picture on the left panel*/
.mycolour { background-color: #0a3f59; } /* COLOUR CHANGE this is a colour that matches your site *** make sure to make a header ARC image to match if changing it */


.more a, .more a:active,  { color:#000; }
.more a:hover {color:#000;}
.more a:visited {color:#000;}
/* ------ GRID - ------------ */
/*    GRID BOX SIZES (reference)  

- when nesting grid elements inside each other (as opposed to stacking them inline) use .nomargin to remove the margin of the last nested column in a set 
REASON: each grid element is given a right-margin automatically.  If you nest two or more grid pieces inside another the redundant margin breaks the layout 

.grid1 - 40px
.grid2 - 100px
.grid3 - 160px (1/4 right_column)
.grid4 - 220px (1/3 right_column)
.grid5 - 280px
.grid6 - 340px (1/2 right_column)
.grid7 - 400px
.grid8 - 460px (2/3 right_column)
.grid9 - 520px
.grid10 - 580px (3/4 right_column)
.grid11 - 640px
.grid12 - 700px (whole right_column)



.grid13 - 760px
.grid14 - 820px
.grid15 - 880px
.grid16 - 960px



/* --- ACCESSIBILITY ---- use to hide h1s or h2s you don't want visible to the sighted but read by screen readers*/
h1.accessible,h2.accessible{float:right;margin:-9999px;}
.paddingTop{padding :10px 0 0 0;}
#wrapper #splash .button a{background-color:#FFF;}

/* --- Add the class .showmethegrid to the wrapper to see the grid ---*/
#wrapper.showmethegrid{background:#fff url(../images/nav_pluscols.gif) repeat-y;background-position:bottom left;padding-right:0}
#right_column.showmethegrid{background:#fff url(../images/template/gridhelper_rightcolumnonly_12cols.gif) repeat-y;background-position:bottom left;padding-right:0;}
/* ------ GRID - ------------ */


/* ------ JCP - ADD ON for new template design (v1.5) - ------------ */	

.row h1, .row h2, .row h3, .row h4, .row h5, .row h6{ font-weight:bold; }

.row .grid_1:last-of-type,
.row .grid_2:last-of-type,
.row .grid_3:last-of-type,
.row .grid_4:last-of-type,
.row .grid_5:last-of-type,
.row .grid_6:last-of-type,
.row .grid_7:last-of-type,
.row .grid_8:last-of-type,
.row .grid_9:last-of-type,
.row .grid_10:last-of-type,
.row .grid_11:last-of-type,
.row .grid_12:last-of-type,
.row .grid_13:last-of-type,
.row .grid_14:last-of-type,
.row .grid_15:last-of-type{border-right:none;}

.noborder{border:none !important;}

.scrollTop{
	vertical-align:top;
	line-height:40px;
	text-decoration:none !important;
	display:inline-block;	
}
	
.scrollTop:before{
	width:40px;
	height:40px;
	content:' ';
	background:#FFF url(../images/template/arrow.png) top left;
	display:inline-block;
	margin-right:5px;
}

.bt-fro-contact{
	margin:10px 0px 20px 25px;
	display:inline-block;
	text-align:center;	

}

.bt-fro-contact a.bt-div,
.bt-fro-contact a.bt-div:link,
.bt-fro-contact a.bt-div:active{
	border-width:2px 0px 2px 2px;
	border-color:#8a181f;
	border-style:solid;
	
	padding:2px 10px 10px;
	line-height:28px;
	display:inline-block;
	border-right:33px solid #8a181f;
	text-decoration:none !important;
	width:95px;
	border-radius:7px;
}

.bt-fro-contact a.bt-div:hover{
	border-right:33px solid #555;/*701318*/	
	border-color:#555;
	color:#fff;/*701318*/
	background-color:#555;
}

.bt-div .bt-fro-l1{
	font-size:17px;
}

.bt-div .bt-fro-l2{
	font-size:42px;
	font-weight:bold;
}

.ct-radio-field{
	line-height:22px;
	margin-top:10px;
	display:block;	
}
.ct-focus-field{
	border-left:6px solid #484859; 
	background-color:#F7F7F7; 
	padding:5px 0px 5px 20px; 
	margin-bottom:20px; 
}
.ct-msg-field{		
	line-height:20px;	
}
.ct-form input, .ct-form textarea{
	padding:5px;
}
.ct-form input[readonly="readonly"]{
	cursor:not-allowed;
	background-color:#D9D9D9;
	border:1px solid #999999;
}
	
.active{
	color:#000000 !important;
	display:block;	
	padding:15px;
	border: 2px solid #89181e;
}

.ct-msg-title{
	font-size:16px;
	font-weight:bold;
}