/* Common styles for site and blogs */
/* This is referenced from 
   the blogger template for blog.ctc-cambridge.org.uk
   the blogger template for rides.ctc-cambridge.org.uk
   the blogger template for rtr.ctc-cambridge.org.uk
   the main site: ctc-cambridge.org.uk/head.ssi
   
   # denotes a named div
*/

/**************************************************************************************/
/* Banner image and text (overridden by site-mobile)                                  */
/* See examples at                                                                    */
/* http://ctc-cambridge.org.uk/banner-examples/winter1.html                           */
/* Remember to also change image in blog, rtr blog and rides blog                     */

#banner {
  position:relative;
  width:1000px;
  height:130px;
}

#banner-background {
  position:absolute;
  top:0px;  /* -A, where A is the number of pixels we want to chop off the top */
  left:0px;    /* -B, where B is the number of pixels we want to chop off the left */   
  /* clip:rect(Apx, (B+1000)px, (A+130)px, Bpx); */ 
  clip:rect(0px, 1000px, 130px, 0px);
}
/* For Cycling UK logo */
/* #banner-logo {
  position:absolute;
  top:30px;
  right:35px;
  height:75px;
} */
/* For CTC logo */
#banner-logo {
  position:absolute;
  top:15px;
  right:50px;
  height:100px;
}
#banner-solid { 
  display:inline-block;
  position:relative;
  height:100%;
  width:100%;
  /* Use following with Cyclinng UK logo */
  /* background: linear-gradient(to right, rgba(64, 48, 32, 255), rgba(0, 0, 0, 0) 400px, rgba(0, 0, 0, 0) 600px, rgba(64, 48, 32, 255)); */
  background: linear-gradient(to right, rgba(64, 48, 32, 255), rgba(0, 0, 0, 0) 400px);

  margin:0px;
}

#banner-text {
  position:absolute;
  left:25px;
  top:25px;
  color:white;
  font-family: Tahoma, Verdana, Arial, sans-serif
}
#banner-text h1 {
  margin:0px;
  font-height:32px;
  font-size:32px; /* needed to override font-size set on blog body */
}

#banner-text p {
  margin:0px;
  font-height:16px;
  font-size:16px; /* needed to override font-size set on blog */
}

#banner-text p.bannersubhead {
  margin:0px;
  font-height:32px;
  font-size:32px; /* needed to override font-size set on blog */
  font-style: italic;
}

#banner-text a:link, #banner-text a:visited {
  font-weight : normal;  
  color: white; 
  }

#banner-text a:hover, #banner-text a:active {
  color: white;
}

/**************************************************************************************/
/* Green ribbon beneath banner image (overridden for mobile)                          */

#pretty-ribbon-new { 
  
  position:relative;
    width:1000px;
    height:8px;

  /* image height is 8px, so div height needs to be the same */
  background: url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom left repeat-x;
}

/**************************************************************************************/
/* switch off sidebars, header, footer for site and blog print view */
@media print {
  #sidebarLeft, #sidebar, #footer, #noprint, #banner, #pretty-ribbon-new { 
    display:none;
  }
}

/* Default links */

a:link, a:visited, a:active {
  word-wrap:break-word;
  font-weight : bold; 
  text-decoration : none;
  color: #692; 
  background: transparent; 
  }

a:hover {
  font-weight : bold; 
  text-decoration : underline;
  color: #8b2;
  background: transparent; 
  }
  
.psuedolink {
  font-weight : bold; 
  text-decoration : none;
  color: #692;  
  background: transparent; 
} 

/**************************************************************************************/
/* Stop description pages                                                                         */

#stoplink img { 
    float: left;
    padding-right:8px;
} 


/**************************************************************************************/
/* define a nice class that makes tables look nice in general                         */

table.mytablestyle {
  border-width: 1px;
  border-spacing: 0px;
  border-style: outset;
  border-color: black;
  border-collapse: collapse;
  background-color: white;
}
table.mytablestyle th {
  border-width: 1px;
  padding: 3px;
  border-style: inset;
  border-color: black;
  background-color: white;
  -moz-border-radius: ;
}
table.mytablestyle td {
  border-width: 1px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;  
  border-style: inset;
  border-color: black;
  background-color: white;
  -moz-border-radius: ;
}

/**************************************************************************************/
/* Start, stop and ride detail pages                                                  */ 
/**************************************************************************************/

/***** Holder for map controls (map control buttons and map legend) *************/

#mapControls { 
  position: absolute;
  top: -1px; 
  z-index: 1000;   
  width:100%; 
  /* Don't intercept pointer (click) events because this interferes with the map and markers beneath */
  /* Turn back on for specific buttons and table cells within this div */
  pointer-events:none; 
}

#largerMap, #smallerMap, #fullMap, #detailsButton, #openLegend, #closeLegendButton, #maplegendtable, #maplegendtablescrolling, #maplegendtablediv, #maplegendtabledivscrolling {
  pointer-events:auto; 
}

#mapControlButtons { 
  float:left; 
}

#largerMap, #smallerMap, #fullMap, #detailsButton {
  float:left; 
}

/****** Holder for map control buttons ********/

@media only screen and (max-width: 299px) {
  /* For ridiculously narrow mobile screens (e.g. iPhone 4) (particularly if in an iframe): */
  /* flip the buttons back to horizontal, and move legend to move beneath buttons */
  #mapControlButtons { 
  }
  #largerMap, #smallerMap, #fullMap, #detailsButton {
    border-top:1px solid black; 
    border-bottom:1px solid black;
  } 
  #mapControlsSpacer {
    clear:both;
  }    
  #maplegend, #maplegendscrolling {
  }
}

@media only screen and (min-width: 300px) and (max-width: 399px) {
  /* For normal mobile screens (particularly if in an iframe) */
  /* flip the buttons to be vertical, to avoid squeezing the legend */
  #mapControlButtons { 
    max-width:70px; 
  }
  #largerMap, #smallerMap  {
    border-top:1px solid black; 
    /* no bottom border to avoid double-thickness border */
  }
  #fullMap  {
    /* no top border to avoid double-thickness border */
    border-bottom:1px solid black;
  }
  #detailsButton {
    border-top:1px solid black; 
    border-bottom:1px solid black;
  }
  #mapControlsSpacer {
    float:left; 
    width:10px;
    height:50px;
  }
  #maplegend, #maplegendscrolling {
    overflow-x: auto; 
  }  
}
@media only screen and (min-width: 400px) {
  /* For wider mobile screens tablet and desktop: */
  /* buttons are horizontal */
  #mapControlButtons { 
  }   
  #largerMap, #smallerMap, #fullMap, #detailsButton {
    border-top:1px solid black; 
    border-bottom:1px solid black;
  } 
  #mapControlsSpacer {
    float:left; 
    width:10px;
    height:50px;
  }
  #maplegend, #maplegendscrolling {
    xwidth:40%;
    overflow-x: auto;     
  }  
}

/**************** Larger/smaller map control *******************/

#largerMap, #smallerMap {
  border-right:1px solid black;
  width:70px;
  height:50px;
}

/************** Full screen map control ******************/

/* If the larger/smaller control is not displayed, this moves to the left */

#fullMap {
  border-right:1px solid black;
  width:70px;
  height:50px;
}

/************** Ride/stop/start details button control ******************/

#detailsButton {
  border-right:1px solid black;
  width:70px;
  height:50px;
}

/************** Open legend button ******************/

#openLegend {
  float:right;
  
  border-left:1px solid black;
  border-bottom:1px solid black;
  border-top:1px solid black;
  
  width:80px;
  height:30px;
  
}

/************** Close legend button ******************/

#closeLegendButton {
      
  float:right;   
      
  border-left:1px solid black;
  border-bottom:1px solid black;
  border-right:1px solid hidden;
  
  width:80px;
  height:30px;
    
  display:none;
  
}

/************** Pop-out map legend ******************/
 
#maplegend, #maplegendscrolling {
  min-height:50px;
  opacity: 0.90;
  display:none; /* initially don't display */
}

/************ Map and legend control buttons ****/

#largerMap, #smallerMap, #fullMap, #detailsButton, #openLegend, #closeLegendButton {
  background-color: #692;
  cursor:pointer;  
  opacity: 0.90;
}

#largerMap:hover, #smallerMap:hover, #fullMap:hover, #detailsButton:hover, #openLegend:hover, #closeLegendButton:hover {
  background-color:#8b2;  
}

#largerMapText, #smallerMapText, #fullMapText, #detailsButtonText, #openLegendText, #closeLegendButtonText {
  font-size: 12pt;
  margin-top:5px;
  margin-right:3px;
  margin-bottom:5px;
  margin-left:3px;
  text-align:center;
}

/**************** Map legend *******************/

#maplegendscrolling table.mytablestyle {
  border-right-style:solid; 
  vertical-align:middle;
}

#maplegend table.mytablestyle {
  border-right-style:hidden; 
}


#maplegend table.mytablestyle td {
  /* border-right-style:none; */
}

#maplegendtablediv, #maplegendtabledivscrolling {
  /* div around legend table */
  float:right;
  min-height:50px; 
}

#maplegendtablediv {
  /* div around a short, non-scrolling legend table */
}

#maplegendtabledivscrolling {
    /* div around a long, scrolling, legend table */
    height: 300px; 
    
    /* we want the table to scroll vertically if its vertical height exceeds the defined height (300px) */
    overflow-y: auto; 
    
    border-bottom:1px solid black;
}

#maplegendtablediv table{ 
  /* Minimum height of table (i.e. for 1 row) is 50px. */
  height:50px; 
  min-height:50px; 
  
}

#maplegendtabledivscrolling table{ 
  /* Minimum height of table (i.e. for 1 row) is 50px. */
  /* height:50px; */
}

#maplegendtable {
  /* div around the legend table */
  float:right;
  
  /* table should stretch to fill the available width */
  width:100%
  

}

table.mytablestyle td.legendTitleCell {
  height:40px;
  background-color:#FFFFDD; /* Yellow */
}

table.mytablestyle td.legendCell {
  height:30px;
  xbackground-color:#FFFFDD; /* Yellow */ /* Setting this prevents hover colour working */
  xbackground-color:#D5ECB6; /* Light green */
}

table.mytablestyle img.legendImage {
  height:30px; /* constrain height of marker image */
}

.legendRow:hover td { /* BUG: This is sticky on touch devices */
  cursor:pointer;  
  background-color:#D5ECB6; /* Light green */
}

/* Class that includes ↑ (up arrow) and ↓ (down arrow) characters */
.arrow {
  font-size: 18px;
  font-family:roman;
  font-weight: bold;
  display:inline;
}

/************** Pop-up balloons on map ***************************/

#stoppingPlacePopup {
  /* outer div, don't want to see anything */
  pointer-events:none;
  background-color: rgba(0,0,0,0) /* transparent */ !important; /* override colour set directly on element */
}

.markerContent {
  /* inner div, yellow with a bit of padding */
  pointer-events: auto;
  background-color: #FFFFDE; /* light yellow */
  opacity:0.9; 
  padding:7px;
  width:180px;
  
  border-width: 1px;
  border-style: solid; 
  border-color: grey;
}

/*************** Printing ***************************************/

@media print {
  #main{
    width:100%;
    height:100%;
  }
  
  #openLegend, #closeLegendButton {
    display:none;
  }
  
  #largerMap, #smallerMap, #fullMap, #detailsButton {
    /* never displayed when printing */
    display:none;
  }