/*Clear Creek Telephone and TeleVision, OCNInteractive, June 2007*/
/*@charset "utf-8";*/

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:150%;
	background: #858AB1;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
}

/* -------------------------------------------------------------------------- */
/* headers, text & links */
/* -------------------------------------------------------------------------- */

h1 {
	font-size:1.5em;
	padding:0px;
	margin: 15px  0 0 0px;
	}
h2 {
	font-size:1.1em;
	padding:0px;
	margin: 10px  0 0 0px;
	}
h3 {
	font-size:1.0em;
	padding:0px;
	margin: 5px  0 0 0px;
	}
p {
	padding:0px;
	margin: 10px  0 10px 0px;
	}					

a:link, a:visited {				/*link color*/
	color:#993333;
	}
a:hover, a:active {				/*link hover color*/
	color:#0000FF;
	text-decoration:none;
	}	

/* -------------------------------------------------------------------------- */
/*main tab navigation*/
/* -------------------------------------------------------------------------- */

#nav_tabs {
	margin:0 17px;
	padding: 0px;
	width: auto;
	background:url(../../images/nav/nav_tab_bkg.jpgx) no-repeat top left; /*2nd set of tab images to prevent flickering in ie6*/
	}
#nav_tabs ul, #nav_tabs li {
	display:inline;
	list-style-type: none;
	margin:0;
	padding:0;
	}	

#nav_tabs a:link, #nav_tabs a:visited {		/*setup tab blocks*/
	display:block;
	float:left;
	height: 22px;
	padding:0px;
	margin:0px;
	text-indent:-9000px;
	}

#nav_tabs #telephone a:hover,  		/*shifts background tab on hover*/
#nav_tabs #cable a:hover, 
#nav_tabs #internet a:hover, 
#nav_tabs #custservice a:hover, 
#nav_tabs #newsletter a:hover, 
#nav_tabs #specials a:hover, 
#nav_tabs #community a:hover, 
#nav_tabs #home a:hover{
    background-position: bottom left;
	}	

#nav_tabs li#telephone a {	 /*display individual tab images*/
	background: url(../../images/nav/nav_telephone.jpg) no-repeat top left;
	width: 152px;
	}
#nav_tabs li#cable a {
	background: url(../../images/nav/nav_tv.jpg) no-repeat top left;
	width: 152px;
	}
#nav_tabs li#internet a {
	background: url(../../images/nav/nav_internet.jpg) no-repeat top left;
	width: 152px;
	}
#nav_tabs li#custservice a {
	background: url(../../images/nav/nav_custservice.jpg) no-repeat top left;
	width: 132px;
	}
#nav_tabs li#newsletter a {
	background: url(../../images/nav/nav_newsletter.jpg) no-repeat top left;
	width: 95px;
	}
#nav_tabs li#specials a {
	background: url(../../images/nav/nav_specials.jpg) no-repeat top left;
	width: 82px;
	}
#nav_tabs li#community a {
	background: url(../../images/nav/nav_community.jpg) no-repeat top left;
	width: 93px;
	}
#nav_tabs li#home a {
	background: url(../../images/nav/nav_home.jpg) no-repeat top left;
	width: 58px;
	}				

/* highlight selected tab - set by the class of the body tag on each page*/

.telephone #nav_tabs li#telephone a,
.cable #nav_tabs li#cable a,
.internet #nav_tabs li#internet a,
.custService #nav_tabs li#custservice a,
.newsletter #nav_tabs li#newsletter a,
.contact #nav_tabs li#contact a,
.community #nav_tabs li#community a,
.home #nav_tabs li#home a {
	background-position: bottom left;
	}

#blue_spacer_bar {
	height: 23px;
	margin: 0px 17px;
	padding:0;
	background:url(../../images/blue_spacerbar_1px.jpg) repeat-x;
	}

/* -------------------------------------------------------------------------- */
/*top of accordian title - submenu rollovers*/
/* -------------------------------------------------------------------------- */

.submenuTitle:link, .submenuTitle:visited {													/*setup the generic rollover blocks*/
            display:block;
            width:225px;
            height:25px;
            margin-top:1px;
            padding:0px;
            text-indent:-9000px;
            background-position: top left;
            }
	
.submenuTitle:hover {	background-position: bottom left; }							/*shift the background position*/


.about { background: url(../../images/submenu_roll_about.gif);}						/*define the rollover background to use*/
.community2 { background: url(../../images/submenu_roll_com.gif);}
.contact { background: url(../../images/submenu_roll_contact.gif);}
.customerService{ background: url(../../images/submenu_roll_cs.gif);}
.internet2{ background: url(../../images/submenu_roll_internet.gif);}
.legal{ background: url(../../images/submenu_roll_legal.gif);}
.myServices { background: url(../../images/submenu_roll_my_ser.gif);}
.news { background: url(../../images/submenu_roll_news.gif);}
.phone { background: url(../../images/submenu_roll_phone.gif);}
.special { background: url(../../images/submenu_roll_special.gif);}
.TV { background: url(../../images/submenu_roll_tv.gif);}
.cams { background: url(../../images/submenu_roll_tv.gif);}

/* -------------------------------------------------------------------------- */
/*homepage layout - two column fixed width, right column, header + footer*/
/* -------------------------------------------------------------------------- */
#container { 
	width: 950px;  /* width of site */
	background: #fff;
	margin: 4px auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #fff;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

#round_corners_top {
	display:block;
	height:17px;
	background:url(../../images/round_corners_top.jpg) no-repeat top left;
}

#header { 
	position:relative;
	background: #fff; 
	padding: 0 ; 
}

#header h1 {
	display:block;
	margin: 0 0 0 20px; 
	background:url(../../images/clearcreek_logo.jpg) no-repeat top left;
	padding: 10px 0 10px 40px; /* pushes logo away from the edges of the div */
	font-size: 1.5em;
	text-indent:-9000px;
	height:62px;
	width:250px;
}

#header .logo {			/*turns logo background image into click-able link*/
	display:block;
	top:0;
	left:0;
	width: 250px;
	height: 85px;
	cursor:pointer;	
	border: 0px solid green;
	}

#utility_menu {
	position:absolute;
	top:15px;
	right:17px;
	height:20px;
	margin:0;
}

#tagline {
	position:absolute;
	top:35px;
	right:0px;
	margin: 0;
	background:url(../../images/tagline.gif) no-repeat top right;
	font-size: 1.5em;
	text-indent:-9000px;
	height:62px;
	width:347px;
}


/* --------------homepage, right column------------ */
#rightColumn { 	/*to adjust the green "my services" block , go to line 264*/
	float: right; 
	width: 235px;
	height:350px;
	margin:0px 17px 0 0px;  /*uses an ie 6 conditional margin of 8: (should be 9, still 1px off)*/
	border: 0px solid red;
}

#rightColumnImageContainer {
	height: 151px;
	margin: 0px 0 2px 0px;
	padding:0px;
	}

#rightColumnBtm{
	display:block;
	height:89px;
	background-color:#993333;
	margin:0px 0 0 0;
	padding:15px  0 15px 20px;
	border: 0px solid black;
	color:#fff; 
}

#hm_specials{							/*text in homepage bottom right 'specials' box*/
	margin:0 0 0 75px;
	color:#fff;
	}
	
#hm_specials a:link, #hm_specials a:visited {
	display:block;
	color:#333;
	padding:0px 0 0px 25px;
	background:url(../../images/arrow_white_on_red.gif) no-repeat 100px 0px;
	}
#hm_specials a:hover {
	color:#fff;
	text-decoration:none;
	padding:0px 0 0px 25px;
	background:url(../../images/arrow_white_on_red2.gif) no-repeat 100px 0px;
	}	
	
/* -----------homepage main image container--------*/
.twoColumn #mainContent  {
	position:relative; 
	margin: 0px  0px 0px 17px;
	width:678px;
	border:0px solid #000;
}
/* -----------homepage touts--------*/
#tout_telephone  {
	position:absolute;
	top: 273px;
	left:25px;
	width:185px;
}
#tout_cable  {
	position:absolute;
	top: 273px;
	left:250px;
	width:185px;
}
#tout_internet  {
	position:absolute;
	top: 273px;
	left:473px;
	width:193px;
}

/* -------------------------------------------------------------------------- */
/*subpage layout - three column  specifics
/* -------------------------------------------------------------------------- */

/* -----------left column for accordian submenu-------------- */
.threeColumn #leftColumn, .twoColumnNoServiceBlock #leftColumn {  
	float: left; /* since this element is floated, a width must be given */
	width: 225px;
	height: 620px; 
	margin:0 0 0 17px;		/*needs ie6 conditional margin-left:9px;*/
	padding: 0 2px 0 2px; /* padding keeps the content of the div away from the edges */
	border:1px solid #999;
}

/* -----------Right Column for all inner pages-------------- */
#rightColumn2 {
	float: right; 
	width: 235px;
	margin:0px 17px 0 0; 	/*needs ie6 conditional margin-left:7px;*/
	border: 0px solid red;
}

/* -----------my services block-------------- */
#myServices {
	display:block;
	height:165px;
	background-color:#578B70; 
	margin: 0px 0 2px 0;
	padding:15px 0 0 15px;
	}
	
#myServices ul {
	padding:0;
	margin:15px 0 0 -4px;
	list-style: none;
	}
#myServices li {
	padding:0px 0 0px 25px;
	margin:0;
	color:#fff;
	}		

#myServices a:link, #myServices a:visited {
	display:block;
	height:25px;
	color:#FFFFFF;
	text-decoration:none;
	padding:0px 0 0px 25px;
	background:url(../../images/arrow_white.gif) no-repeat 0px 0px;
	}
#myServices a:hover {
	color:#333;
	padding:0px 0 0px 25px;
	background:url(../../images/arrow_red_on_green.gif) no-repeat 0px 0px;
	}	
/* ------------------------------------------------------------ */

#rightColumn2 #special {
	height: 70px;
	margin: 0;
	padding:15px 10px;
	background-color:#993333;
}

#rightColumn2 #newsletter {
	height: 120px;
	margin: 2px 0 0 0;
	padding:15px 0 0 15px;
	background-color:#515890;
}

#emailForm {
	margin:5px 10px 0 0;
	padding:0;
	border:1px solid #fff;
}

/* ------------------------3 column layout for live cams ------------------------------------ */

#camColumn1 {
	float: left; 
	width: 300px;
	margin:0px 0px 0 30px; 	/*needs ie6 conditional margin-left:7px;*/
	border: 0px solid red;
}

#camColumn2 {
	float: right; 
	width: 300px;
	margin:0px 30px 0 0px; 	/*needs ie6 conditional margin-left:7px;*/
	border: 0px solid blue;
}

.camThumb {
	text-align:center;
	border:1px solid #999;
	}

.threeColumn #mainContentCams { 
	margin: 50 100px 0 270px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. */
	padding: 0; 
}
	
/* --------------------main content container for 3 column layout------------------------------- */
.threeColumn #mainContent { 
	margin: 0 270px 0 270px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. */
	padding: 0; 
}

#mainContent h3  { 
	margin: 0px  0px  0px 0px; /* sets spacing round main image */
}

#mainContent h4  { 
	margin:2px 0 0 0;
}

/* --------------------layout: twoColumn - left subnav, wide content column, No Services Block------------------------------- */
.twoColumnNoServiceBlock #mainContent { 
	margin: 0 10px 0 275px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. */
	padding: 0;
}

.TVguide {
	margin: 0 0px 0 255px;
	border:1px solid #999999;
	width: 655px;
}
.TVguide h2 {
	padding-left: 10px;
	}


/* --------------------layout: Blog page------------------------------- */
#mainContentBlog  {

	margin: 0px  0px 0px 265px;
	width:670px;
	border:0px solid #000;
}


/* -------------------footer-------------------------------- */
#footer_color_bars {
	display: block;
	height: 40px;
	margin:0px 17px 10px 17px;
	background:url(../../images/footer_colorbar.gif) repeat-x;
	}

#footer { 
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
} 
#footer p {
	text-align:center;
	margin: 0 auto; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

/* --------------------------------------------------- */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}