/* Stylesheet for Connecticut route pages. */
/* todo: h1 and h2 etc; cellpadding on outside of cells */

body {
	 font-family: verdana, helvetica, sans-serif;
	 font-size: 80%;
	 margin-right: 15%;
	 background-color: white;
	 color: black;
}

a {
	background-color: transparent;
}

a:link 	{
	color: #36f;
	text-decoration: none;
	border-bottom: 1px dotted #36f;
}
	
a:visited {
	color: #639;
	text-decoration: none;
	border-bottom: 1px dotted #639;
}
	
a:active {
	color: #36f;
	text-decoration: none;
	border-bottom: 1px dotted #36f;
}		
	
a:hover {
	color:#c00;
	border-bottom: 1px solid #c00;
}

abbr, acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

/* use H1 for route numbers, h2 for category icons, h3 for topic 
headers. */
/* h1 and h2 styles and presentation are TBD. */

/* Helvetica looks better than Verdana in bold */
h3, h4 {
	font-family: helvetica, arial, sans-serif;
	font-weight: bold;
	font-size: 100%;
	margin-bottom: 0;
	margin-top: 0;   /* let the para above do the margin, if it's there */
}

h3 {
	font-size: 125%;
}

h4 {
	font-size: 100%;
}


/* for readability: 50 chars max width for text */
/* adjust others (e.g. li, quote) to fit */
p {
	margin-top: 0;
	max-width: 50em;
}

p.updated, p.nav-small, p.copyright, p.credits, p.disclaimer {
	margin-bottom: 0.5em;
}

p.credits, p.disclaimer {
	font-size: 80%;
}

p.updated {
}

p.copyright {
}

p.credits, p.disclaimer {
	font-size: 80%;
}

/* who said a particular quote */
p.author {
	text-align: right;
	font-style: italic;
	margin-top: -0.5em;
}

ul {
	margin-top: 0;
	margin-bottom: 1em;
	margin-left: 1em;   /* FF */
	padding-left: 0;  /* IE */
	list-style-type: circle;
}

li {
	max-width: 49em;
}

/* for breadcrumbs links, top of page */
div.logo {
	margin: 0 12px 0 12px;
	padding-left: 6px;
	width: 500px;
	background-color: rgb(205, 255, 230);
}
span.logo {
	background-color: rgb(205, 255, 230);
}

div.masthead {
	margin: 0 12px 0 12px;
	padding: 6px;
	background-color: rgb(205, 255, 230);
	border-bottom: 1px solid #009900;
}

*.nav {
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	background: transparent;
	margin-top: 8px;
}

/* for breadcrumbs links, top of page */
*.nav-small {
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	font-size: 100%;
	margin-top: 0;
}

/* for breadcrumbs links, top of page */
*.quicklinks {
	font-size: 100%;
	margin-top: 0;
}

/* box to hold route markers, in raw files */
div.route-box {
   margin: 0px 8px 8px 0px;
   float: left;
}

/* raw files: big div that lines up with header margins */
div.raw {
   margin: 12px;
}

/* larger text announcing route number, if no marker */
*.route-label
{
	font-family: arial, helvetica;
	font-size: large;
	font-weight: normal;
}

/* standard picture frame with small caption text */
/* you'll have to specify width for this pic = image width */
/* also, specify float */
*.pic, *.rpic   
{
	background-color: rgb(205, 255, 230);
	border: 1px solid gray;
	padding: 4px;
	margin: 0em 0em 8px 8px;
	font-size: 80%;
}

/* float-right pic */
*.rpic   
{
	float: right;
}

*.pic-header {
   background-color: #10aa10;
   padding: 0.5em;
	color: white;
	font-size: 125%;  /* back to normal */
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
}

/* info box is for the "more info" sidebars */
*.info-box {
	background-color: rgb(205, 255, 230);
	border: 1px solid gray;
	float: right;
	padding: 0;
	/* no padding... contents "bleed" to border */
	margin: 0 0 8px 8px;
	width: 12em;
}

*.info-header {
    background-color: #10aa10;
    padding: 0.5em;
	color: white;
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
}

*.info-body {
    padding: 0.5em;
}

/* footer box has search, links, copyright info */
*.footer-box {
	background-color: rgb(205, 255, 230);
	border: 1px solid gray;
	padding: 6px;
	margin: 8px 12px 0 12px;
}

/* route box lists routes vertically on left */
*.route-box {
	width: 64px;
    float: left;
	margin: 0 8px 8px 0;
}

*.route-box img {
	margin-bottom: 8px;
}

/* orange pullquote box right aligned */
blockquote {
	float: right;
	width: 200px;
	border-top: 3px solid #FF9900;
	border-bottom: 3px solid #FF9900;
	font: 125% palatino,times,serif;
	font-weight: bold;
	color: #FF9900;
	margin: 8px 0 8px 12px;
	padding: 8px 0 8px 0;
}

/* for attribution */
blockquote div {
	text-align: right;
	font: 64% verdana, helvetica, sans-serif;
	color: black;
	margin-top: 8px;
}

/* different kind of blockquote that doesn't float */
div.quote {
   margin: 8px 5em 8px 3em;
   border-left: 3px solid #FF9900;
   padding-left: 8px;
   max-width: 46em;   /* to match 50em <p> */
}

/* next few are iTunes-like alternating shaded bars */
div.tab
{
	width: 120px;
	background-color: #1F93FF;
	font-weight: bold;
	margin-top: 12px;
   padding: 2px;
   text-align: center;
   -moz-border-radius-topleft: 8px;
   -moz-border-radius-topright: 8px;
}

div.shaded
{
	background-color: #CCE6FF;
	padding: 4px;
}

div.clear
{
	background-color: white;
   padding: 3px;
   border-left: solid #CCE6FF 1px;
   border-right: solid #CCE6FF 1px;
}

/* in case list ends with clear div - have border on bottom too */
div.endclear
{
	background-color: white;
   padding: 3px;
   border-left: solid #CCE6FF 1px;
   border-right: solid #CCE6FF 1px;
   border-bottom: solid #CCE6FF 1px;
}

/* all table cells should be top-aligned */
td {
    vertical-align: top;
}

/* also, in route pages, should expand full width so floats go right */
td.route-content {
    width: 92%;  /* this one is tricky. 95 too big. 90 too small. */
}

/* color-coded margins help keep context in long pages */
td.route {
	width: 80px;
	border-right: solid 3px #009900;
	margin-top: 12px;
}

td.route-wide {
	width: 96px;
	border-right: solid 3px #009900;
	margin-top: 12px;
}

td.history {
	width: 80px;
	border-right: solid 3px #996633;
}

td.history-wide {
	width: 96px;
	border-right: solid 3px #996633;
}

td.turnpikes
{
	width: 80px;
	border-right: solid 3px #FA4E19;
}

td.future {
	width: 80px;
	border-right: solid 3px #3300FF;
}

td.more {
	width: 80px;
	border-right: solid 3px #33CCCC;
}

td.quotes {
	width: 80px;
	border-right: solid 3px #FF9900;
}

td.suggests {
	width: 80px;
	border-right: solid 3px #808080;
}

td.driveit
{
	width: 80px;
	border-right: solid 3px #D11406;
}

td.sources {
	width: 80px;
	border-right: solid 3px #D0D0D0;
}

td.links {
	width: 80px;
	border-right: solid 3px #3399ff;
}


/* actual tabular data tables */
table.data {
    border-spacing: 0px;
    border-collapse: collapse;
    border: 1px solid #666666;
}
table.data th {
    border-bottom: 1px solid #666666;
    text-align: left;
    font-weight: normal;
    padding: 0.2em 0.5em;
}
table.data td {
    text-align: left;
    border-bottom: 1px solid #666666;
    border-right: 1px solid #666666;
    padding: 0.2em 0.5em;
}
table.data thead th {
    background-color: #CCE6FF;
    text-align: left;
}
table.data th.Corner {
    text-align: left;
}




/* for almanac: structure is <li><span question><span answer> */
ul.almanac li span {
	font-weight: bold;
}

/* for timeline */
td.timeline {
   background: #CCE6FF;
   font-family: georgia, palatino, serif;
   font-size: 300%;  
}

ul.timeline {
   margin-left: 1em;
   padding-left: 0;
}

/* sidebar is used only in index page */
div.sidebar
{
	width: 40%;
	float: right;
	border-left: 1px solid gray;
	padding: 8px 12px 8px 12px;
	margin: 0 0 0 12px;
	font-size: 80%;
	background-color: rgb(205, 255, 230);
}

ul.sidebar {
   margin-left: 1em;
   padding-left: 0;
}