/* Start of CMSMS style sheet 'Layout: Top menu + 2 columns' */
/*****************
browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
   text-align: left;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 75.01%;
   line-height: 1em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
   font-size: 1em;
}

/*
if img is inside "a" it would have 
borders, we don't want that
*/
img {
   border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link 
a:active {
   text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit; 
   color: #18507C; 
}

a:visited {
   text-decoration: underline;
   background-color: inherit;
  color: #18507C;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {
   text-decoration: none;
   background-color: #5F000E;
   color: #fff;
}

/*****************
basic layout 
*****************/
body {
position: relative;
   background: #fff url(uploads/images/bg.png) repeat-x 10% 10%;
   color: #fff;
margin-top: 1.2em;
margin-bottom: 1.2em;
}

div#header {
clear: both;
width: 100%;
   height: 180px; /* adjust according your image size */
   background: #fff url(uploads/images/clips3.jpg) no-repeat right 50%;
margin-top: -1em;
margin-right: auto;
margin-left: auto; 
position: relative;
border-bottom: 2px solid #000064;      
}

div#header h1 a {
/* you can set your own image here */
position: relative;
width: 16em;
   background: transparent url(uploads/images/cpcircle3.gif) no-repeat 3.5em 50%; 
   display: block;
overflow: visible; 
z-index: 4;
   height: 180px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

#section {
position: relative;
height: 270px;
width: 100%;
_width: 800px;
margin-left: auto;
margin-right: -1.0em;
text-align: center;
margin-top: -2.0em;
margin-bottom: -2.8em;
overflow:visible;
}

#section ul {

margin-right: auto;

margin-right: -3.8em;
}

#section li {
position: relative;
display: inline;
   text-decoration:none;
overflow:visible;
padding: 0.50em;
margin-left: -4.3em;
margin-right: -4.3em;
}
#section .left1  {
position:relative;
xmargin-right: -0.75em;
xmargin-left: -1.8em;
margin-top: -1.9em;
z-index: 4;
overflow:visible;
}

#section .left2 {
position: relative;
overflow:visible;
z-index: 2;
}

#section .right1  {
position: relative;
z-index: 3;
overflow:visible;
}

#section .right2 {
position: relative;
xmargin-right: -1.5em;
z-index: 4;
overflow:visible;
}

#section li a {
visibility: hidden;
overflow: visisble;
}

#section li a img {
visibility: visible;
overflow: visible;
}
/* center wrapper, min max width */
div#pagewrapper {
   border-bottom: 1px solid #ccc;
border-top: none;
   margin: 0 auto;     /* this centers wrapper */
   width: 820px; /* IE wont understand these, so we will use javascript magick */
  
   background: #fff;
   color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/


div#search {
  clear: both;

   padding: 0.6em 0 0.2em 0;
z-index: 5;
}

#breadcrumbs {
float: right;
color: #000;
   padding: 0.25em 0 0 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;             /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */

z-index: 5;
}

#breadcrumbs a {
color: #000064;
}

 div.breadcrumbs span.lastitem { 
   font-weight:bold; 
 } 

 div#content {
   margin: 0 auto 2em 0; /* some air above and under menu and content */
padding-top: 1em;
padding-right: 0.50em;
_width: 820px;
}

div#main {
   margin-left: 210px; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 0.5em; /* and some air on the right */
}


div#sidebar {
   float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
   width: 190px;    /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX ie doublemargin bug */
   margin-left: auto;
margin-right: auto;
margin-top: 4.5em;
padding-right: 0.5em;
padding-left: 0.5em;
}

#sidebar h3 {
color: #5F000E; 
   font-size: 1.5em; 
   text-align: left; 
/* some air around the text */
   padding-left: 0.5em;
   padding-bottom: 1px;
/* set borders around header */
   border-bottom: 1px solid #ccc; 
   line-height: 1.5em;
/* and some air under the border */
   margin: 0 0 0.5em 0;
}

#sidebar p {
text-align: center;
}

#sidebar img {
margin-top: -0.5em;
}


div#footer {
   clear:both;       /* keep footer below content and menu */
   color: #333;
   background: #fff url(uploads/images/group-bg.gif) repeat-x;
width: 100%;
}

div#footer p {
   font-size: 0.8em;
   padding: 1.5em;      /* some air for footer */
   text-align: center; /* centered text */
   margin:0;
}

div#footer p a {
   color: #333; /* needed becouse footer link would be same color as background otherwise */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   margin: 1em;
   border-bottom: 1px dotted black;
}

/* relational links under content */
div.left49 {
  float: left;
  width: 49%;  /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
}


/********************
CONTENT STYLING
*********************/
div#content {

}

/* HEADINGS */
div#content h1 {
   font-size: 2em;  /* font size for h1 */
   line-height: 1em;
   margin: 0;
}
div#content h2 {
   color: #000064; 
   font-size: 1.5em; 
   text-align: left; 
/* some air around the text */
   padding-left: 0.5em;
   padding-bottom: 1px;
/* set borders around header */
   border-bottom: 1px solid #ccc; 
   line-height: 1.5em;
/* and some air under the border */
   margin: 0 0 0.5em 0;
width: 75%:
}
div#content h3 {
   color: #5F000E;
   font-size: 1.3em;
   line-height: 1.3em;
   margin: 0 0 0.5em 0;
}
div#content h4 {
   color: #5F000E; 
   font-size: 1.2em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
div#content h5 {
   font-size: 1.1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
h6 {
   font-size: 1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
#main p, p {
   font-size: 1em;
   margin: 0 0 1.5em 0;  /* some air around p elements */
   line-height:1.4em;
   padding: 0;
}
blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}
pre {
   font-family: monospace;
   font-size: 1.0em;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
}
em, i {
/* explicit setting for these */
   font-style:italic;
}

/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 font-family: "Courier New", Courier, monospace;
 font-size: 1em;
}

pre {
   border: 1px solid #000;  /* black border for pre blocks */
   background-color: #ddd;
   margin: 0 1em 1em 1em;
   padding: 0.5em;
   line-height: 1.5em;
   font-size: 90%;   /* smaller font size, as these are usually not so important data */
}

a[href^="mailto:"] {
background: url(http://www.threeriverswv.com/uploads/images/email2.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:18px;
}

#main ul.listings li a[href^="http:"] {
background: url(http://www.threeriverswv.com/uploads/images/external5.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:18px;
}



/* END TEXT */
#main ul.listings {
line-height: 1.9em;
margin-left: 1.5em;
padding-left: 5px;
margin-bottom: 10px;
border-left: 1px solid #ccc;

}

#main ul.listings li {
list-style: none;
font-weight: bold;
}

#main .staffleft, #main .staffright, #main p img {
float:right;
width:250px !important;
height:134px !important;
background-color:#fff;
border:1px solid #ccc;
border-right:3px solid #ccc;
border-bottom:3px solid #ccc;
margin:0.5em;
padding:1em;
}


p .staff {
clear: left;
}
p.staff1 {
float: right;
}

#main .staffright {
float: left;
}

a[href$=".pdf"] {
background:url(uploads/images/file_acrobat.gif) no-repeat left center;
line-height:4em;
padding:1em 1em 1em 20px;
}

#main p.portfolio a {
padding-top: 0;
padding-bottom: 0;
display: block;
}

#main p.portfolio a:hover, a:hover {
background: #000064;
}

#sidebar li {
list-style: none;
text-align: center;
}

a .thickbox img {
border:0;
}

.thumb {
border:0;
text-decoration:none;
line-height:normal;
list-style-type:none;
text-align:center;
float:left;
padding:0;
}

.thumb a {
display:block;
background-color:#FFF;
border-top:1px solid #fff;
border-right:2px solid #ccc;
border-bottom:2px solid #ccc;
border-left:1px solid #fff;
text-decoration:none;
margin:0;
padding:4px;
voice-family: "\"}\""; 
  voice-family:inherit;
margin-left: .25em;
padding: 10px;
}

.albumcomment {
text-align:center;
font-weight:400;
font-style:normal;
}

.thumb a:visited img {
background-color:#eee;
}

.thumb a:hover img,.thumb a img {
border:none;
width:250px !important;
height:150px !important;
}

.albumname {
font-size:smaller;
text-align:center;
font-weight:700;
font-style:normal;
}

.albumname a {
display:inline;
border:none;
background-color:transparent;
margin:none;
padding:none;
}

.albumpicturecount {
font-size:smaller;
text-align:center;
font-weight:400;
font-style:italic;
}

.albumnav {
text-align:center;
font-weight:400;
font-style:normal;
font-size:smaller;
}

.instructiontext {
font-weight:400;
font-size:smaller;
font-style:italic;
}

.bigpicture {
clear:left;
border-top:1px solid #ccc;
text-align:center;
padding:.5em 0 0;
}

.bigpicturecaption {
text-align:center;
margin:0 0 5px;
padding:0;
}

.bigpicture img {
width:80%;
background-color:#FFF;
border-top:1px solid #eee;
border-right:2px solid #ccc;
border-bottom:2px solid #ccc;
border-left:1px solid #eee;
text-decoration:none;
margin:0;
padding:18px;
}

.bigpicturenav {
color:#000;
font-size:smaller;
line-height:normal;
margin:0;
padding:0;
}

#TB_window {
font:12px Arial, Helvetica, sans-serif;
position:fixed;
background:#fff;
z-index:102;
color:#000;
display:none;
border:4px solid #ccc;
text-align:left;
top:40% !important;
top: 2%;
left:50%;
}

#TB_secondLine {
font:10px Arial, Helvetica, sans-serif;
color:#666;
}

#TB_window a:hover {
color:#000;
}

#TB_overlay {
position:fixed;
z-index:100;
top:0;
left:0;
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
height:100%;
width:100%;
}

#TB_window img#TB_Image {
display:block;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
border-top:1px solid #666;
border-left:1px solid #666;
margin:15px 0 0 15px;
}

#TB_caption {
height:25px;
float:left;
padding:7px 30px 10px 25px;
}

#TB_closeWindow {
height:25px;
float:right;
padding:11px 25px 10px 0;
}

#TB_closeAjaxWindow {
margin-bottom:1px;
text-align:right;
float:right;
padding:7px 10px 5px 0;
}

#TB_ajaxWindowTitle {
float:left;
margin-bottom:1px;
padding:7px 0 5px 10px;
}

#TB_title {
background-color:#e8e8e8;
height:27px;
}

#TB_ajaxContent {
clear:both;
overflow:auto;
text-align:left;
line-height:1.4em;
padding:2px 15px 15px;
}

#TB_ajaxContent.TB_modal {
padding:15px;
}

#TB_ajaxContent p {
padding:5px 0;
}

#TB_load {
position:fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top:15%;
left:50%;
margin:-6px 0 0 -104px;
}

#TB_HideSelect {
z-index:99;
position:fixed;
top:0;
left:0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
height:100%;
width:100%;
}

#TB_iframeContent {
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}

.images a:hover,.thumb a:hover img {
background-color:#B8121E;
}

#TB_window a:link,#TB_window a:visited,#TB_window a:active,#TB_window a:focus {
color:#666;
}

* html #TB_overlay,* html #TB_HideSelect {
position:absolute;
height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

* html #TB_window,* html #TB_load {
position:absolute;
margin-top:expression(0 - parseInt(this.offsetHeight / 2) 0 (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) 0 'px');
}

/*----

/* End of 'Layout: Top menu + 2 columns' */