@media screen
/***default formatting***/

html {
min-height:100%;
margin-bottom:1px;
}

body {
/* br-comment:  the original grey background-color was   background-color:#999; */
  background-color:#fff;
  color:#000;
  margin:0;
  padding:0;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:medium;
}

a { text-decoration:underline; }

#page {
  position:relative;
  margin-right:auto;
  margin-left:auto;
  padding:0;
  top:0;
  width:760px;
  background-color: #fff;
  background:#eaeaea url("../pix/abseil_background3.jpg") no-repeat top left;
  border:solid #000 1px;
  border-top:0;
}

#mypage {
/* br-comment:  my changes to above page definition:
  removed background: (abseil photo); changed border:
  effect: got rid of grey bit at top of page
  (presumably caused by missing jpg)
  and lines up side of header (caused by border) */
  position:relative;
  margin-right:auto;
  margin-left:auto;
  padding:0;
  top:0;
  width:760px;
  background-color: #fff;
  border:0;
  border-top:0;
}

/*the banner is the black bar across the top of the page (not the top or left navigation bits)*/

#banner_container { width: 100%; }

#banner {
  position:relative;
  height:60px;
  padding:0 0 0 0px;
  background:#000 url("../pix/banner_pix.jpg") no-repeat top right;
  color:inherit;
  z-index:100;
}

#banner img { padding-top:5px; padding-left:25px; }

#content_placeholder {
  background-color:#fff;
  color:inherit;
  width:575px;
  margin:0 0 0 150px;
  padding:0 15px 0 20px;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#content {
  position:relative;
  background-color:inherit;
  color:inherit;
  width:560px;
  height:100%;
}

#full_width {
  width:560px;
  /*width:auto;*/
}


/*********HOME PAGE, SECTION TITLES (in banner) AND HOME PAGE TAGLINE********/

#page_title {
  text-align:right;
  padding: 10px 20px 10px 0;
  margin-left:150px;
  background-color:#fff;
  color:inherit;
}

#page_title h1 {
  font-family:Arial, Helvetica, sans-serif;
  color:#998829;
  background-color:inherit;
  font-size:180%;
  font-weight:normal;
  margin:0;
}

#section_title { margin:0 0 0 120px; }

#section_title h1 {
  font-family:Arial, Helvetica, sans-serif;
  color:#e6cc3e;
  background-color:inherit;
  font-size:180%;
  font-weight:normal;
  margin:0 0 0 45px;
  padding-top:12px;
}

#tag {
  color:#e6cc3e;
  background-color:inherit;
  font-size:80%;
  margin:0 300px 0 140px;
  padding-top:20px;
}

html>body #tag {
padding-top:25px;
}

/***************TOP NAV  *******************/

#topnav {
  background-color:#fff;
  color:inherit;
  width:605px;
  left:0;
  top:0;
  font-size:80%;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;
  padding:5px 5px 0 20px;
  text-align:left;
  margin-left:150px;
}

html>body #topnav { padding-top:0; padding-bottom:5px;
}

#topnav ul { margin:0; padding:0 0 10px 0; }

html>body #topnav ul { padding-top:7px; }

#topnav li {
  display:inline;
  list-style-type:none;
  margin: 0;
  text-align:center;
  padding:0 4px 0 0px;
  border-right: 1px solid #000;
}
#topnav li:last-child { border-right: 0px solid #000; }

#topnav a { border-bottom:0; color:#000; }

#topnav a:hover { text-decoration:underline; color:#e6cc3e; }

#topnav .currentsection { color:#e6cc3e; }

/******************** LEFT NAV ************************/

#leftnav {
  position:absolute;
  left:0;
  top:190px;
  height:auto;
  width:150px;
  border-left:0;
  z-index:10;
}

#leftnav ul {
  margin:0; padding:0;
}

#leftnav li {
  display:block;
  list-style-type:none;
  margin: 5px;
  text-align:right;
  padding:0;
  border: 1px solid #3a5766;
  font-size:80%;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;
}

#leftnav a {
  display:block;
  background-color:#c6cacc;
  color:#3a5766;
  text-decoration:none;
  margin:0;
  padding:2px 4px 2px 2px;
  border-bottom:0;
}

#leftnav a:hover {
  background-color:#3a5766; color:#c6cacc;
}

#leftnav .currentpage {
  display:block;
  background-color:#3a5766;
  color:#c6cacc;
  margin:0;
  padding:2px 4px 2px 2px;
}

/***************MAIN CONTENT STYLES********************/

/*
#content stuff:
most pages are contained in a <div id="content">, so I suspect that these definitions only apply within this div.
Taking these out mucks up the header tabs, which are not within the div
*/

#content h2 {
  color:#3a5766;
  background-color:inherit;
  font-weight:normal;
  font-size:150%;
  font-family:Arial, Helvetica, sans-serif;
  margin:0 0 10px 0;
}

#content h3 {
  font-family:Arial, Helvetica, sans-serif;
  color:#998829;
  background-color:inherit;
  font-weight:bold;
  font-size:100%;
  margin-top:5px;
  margin-bottom:5px;
}

#content p {
  font-size:75%;
  line-height:170%;
  margin:5px 0 10px 0;
}
#content hr {
  height:3px;
  border:0;
  color:#fff;
  border-top: #999 dashed 1px;
}
#content .links {
  text-align:right;
  margin-bottom:15px;
}
#content .links a {
  font-size:60%;
  text-transform:uppercase;
  padding:0 5px 0 5px;
  border-left:solid #000 1px;
  border-bottom:0;
}
#content .links a:hover {
  text-decoration:underline;
}

#content ul {
/*
font-size: 75%;
line-height:170%;
commented this out since each successive sub list got smaller by factor .75
Using definitions below for li rather than for ul; second one stops sub list fonts shrinking
*/
  padding-left:30px;
  margin-top:-5px;
  margin-bottom:10px;
}

#content ul ul{
  margin-left:-20px;
  margin-top:0px;
}

#content li {
  font-size: 75%;
  line-height:170%;
  margin-bottom:3px;
}

#content li li {
  font-size: 100%;
  line-height:170%;
  list-style-type:disc;
  margin-left:0px;
}

table {
  margin-top:-5px;
  margin-bottom:10px;
  margin-left:30px;
  border: 0;
}

th {
  font-size:75%;
  padding:5px;
  vertical-align: top;
  padding-left:0px;
  padding-right:25px;
}

td {
  font-size:75%;
  vertical-align: top;
  padding-left:0px;
  padding-right:25px;
}

p.intro { font-weight: bold; }

blockquote{
  font-size: 100%;
  margin-left:20px;
}

/*******************FOOTER***************************/

#footer {
border-top:solid #999 1px;
background-color:#fff;
height:100%;
width:auto;
padding:5px 0 25px 0;
}

#footer p { font-size:70%; }


/*****************BLOG STYLES*************************/

#content .image {
float:left;
padding-right:10px;
}
#content .caption {
font-size:50%;
text-transform:uppercase;
padding:2px 0 0 0;
margin:0;
}
#content .caption a {
border-bottom:0;
}
#content .caption a:hover {
text-decoration:underline;
}
#content p.submitted {
font-size:60%;
text-transform:uppercase;
color:#999;
background-color:inherit;
}
#content p.date {
font-size:70%;
text-transform:uppercase;
color:#999;
background-color:inherit;
}

#content a.list_link {
border-bottom:0;
}
#content a.list_link:hover {
text-decoration:underline;
}

/***************  TRIP REPORT STYLES  *************/

ul.trip {
list-style-type:none;
text-transform:uppercase;
color:#999;
}

ul.trip li {
padding:0 4px 0 4px;
border-left: solid 1px #999;
font-size:90%;
}

#trip_report_photos {
float:right;
width: 100px;
padding:0 50px 0 10px;
}

table.trip_report_photos_table
{
width:40px;
background-color:#998829;
}

#trip_list_photos {
float:left;
width: 100 pt;
padding:0 100 pt 30 pt 10 pt;
}

table.trips_list {
width:0;
}

/*******************MEETS LIST STYLES*******************/

table.meets_list {
  width:100%;
  border-collapse:collapse;
  border:none;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:90%;
  line-height:120%;
  margin-bottom:10px;
  margin-left:0px;
}

table.meets_list th {
  background-color:#3a5766;
  color:#c6cacc;
  border-left: solid medium #fff;
  border-right: solid medium #fff;
  padding:5px;
  font-size:90%;
}

table.meets_list td {
  background-color: #eaeaea;
  border: solid medium #fff;
  padding: 5px 5px 5px 5px;
  vertical-align:top;
}

th.set { width:45%; }

/***  set relative column widths in meets table ***/
th.mydate { width:8%; }
th.myvenue { width:30%; }
th.mynotes { width:55%; }


/******************** CONTACT FORM *****************************/

form#contact {
margin-bottom:10px;
}

form#contact fieldset {
padding:0 0 0 0;
}
html>body form#contact fieldset {
background-color:#eaeaea;
padding:5px 5px 5px 15px;
}

form#contact legend {
position:relative;
top:-8px;
left:0;
z-index:10;
font-size: 75%;
font-weight: bold;
color: #000;
}


form#contact label {
vertical-align:top;
font-size:75%;
font-weight: bold;
}

.label {
margin-top:5px;
}

.formReply {
background-color:#eaeaea;
border: solid 1px #3a5766;
padding: 10px;
font-weight: bold;
}



/***  start of formatting for small devices (phones/tablets)  ***/
@media only screen and (max-width: 768px) {

#topnav {
width:auto;
padding:5px 5px 0 10px;
margin-left:0px;
}

#leftnav {
position:relative;
top: -18px;
left:16px;
bottom: 20px;
background-color: inherit;
color: inherit;
height:100%;
width:160px;
}

#leftnav li {
width: auto;
}

#content_placeholder {
width:auto;
margin:0 0 0 0px;
}

#content {
width:auto;
}

#mypage {
width:auto;
}

#full_width {
width:auto;
margin:0 10px 0 0px;
}

#page_title {
margin-left:none;
}

/*the banner is the black bar across the top of the page (not the top or left navigation bits)*/

#banner_container {
width: 100%;
}

#banner {
  position:relative;
  height:60px;
  padding:0 0 0 0px;
  background: #000;
  background-image:none;
  color:inherit;
  z-index: none;
}

#banner img {
/*  padding-left:20px;*/   /*get rid of JMCS logo on small screens*/
display: none;
}

#section_title { margin:0 0 0 20px; }

#section_title h1 {
  font-family:Arial, Helvetica, sans-serif;
  color:#e6cc3e;
  background-color:inherit;
  font-size:180%;
  font-weight:normal;
  margin:0;
  padding-top:12px;
}

#page {
  width: auto;
  background:none;
  background-image:none;
}

#content p {
  font-size:75%;
  line-height:140%;
  margin:5px 0 10px 0;
}


#content ul {
  margin-top:0px;
  margin-left:-15px;
}

#content ul ul{
  margin-top:0px;
  margin-left:-20px;
}


#content li {
  font-size: 75%;
  line-height:140%;
}

#content li li{
  font-size: 100%;
  line-height:140%;
}

table {
  margin-top:0px;
  margin-bottom:0px;
  margin-left:10px;
  border: 0;
}

th {
  font-size:75%;
  vertical-align: top;
  padding-left:0px;
  padding-right:15px;
}

td {
  font-size:75%;
  vertical-align: top;
  padding-left:0px;
  padding-right:15px;
}


table.meets_list td {
  font-size:75%;
  background-color: #eaeaea;
  border: solid medium #fff;
  padding: 5px 5px 5px 5px;
  vertical-align:top;
}


/***  set relative column widths in meets table ***/
th.mydate { width:27%; }
th.myvenue { width:27%; }
th.mynotes { width:46%; }


blockquote{
  font-size: 100%;
  margin-left:15px;
}

#footer {
  border-top:solid #999 1px;
  background-color:#fff;
  height:100%;
  width:auto;
  padding:5px 0 25px 0;
}

#footer p { font-size:70%; }

#trip_report_photos {
float:left;
width: 50px;
padding:0 110px 0 2px;
}

table.trip_report_photos_table
{
width:10px;
}

}    /***  end of formatting for small devices (phones/tablets)  ***/