/* for older browsers (see http://diveintohtml5.info/semantics.html) */ article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } body { background-color: #D3D3D3; /*LightGray*/ margin: 5px; padding: 0px; /* "When aligning elements" (eg, with float) ", it is always a good idea to predefine margin and padding for the element. This is to avoid visual differences in different browsers." (http://www.w3schools.com/css/css_align.asp) "But with margin: 0; the top div is up against the roof of the page. margin: 5px; seems better." (02/04/2013) */ color: blue; font-family: "Verdana", sans-serif; font-size: 100%; /*see 03/03/2015*/ } div.wrapper { width: 96%; max-width: 900px; margin: auto; padding: 0.5%; } figure { margin: 0px; } /*to override browser default settings*/ .left, .right { width: 48%; } .left { float: left; margin-right: 4%; /*this seems to stop the div displaying as block and sending the div.right lower down; it has to be placed after float: left*/ } .right { float: right; } .top_padding { padding-top: 10px; } /* on vernet-canigou page */ h1 { font-size: 1.5em; } h2 { font-size: 1.3em; } p.subhead { font-size: 1.2em; } p.subhead2 { font-size: 1em; } p.line { border-bottom: 1px solid gray; margin-left: auto; margin-right: auto; text-align: center; width: 100%; } /* to display a horizontal line */ /* p.hide used in footer page (for spacing) and formerly in plan-site page */ p.hide { visibility: hidden; margin: 0em; } /* ul & li are used on footer page and plan-site page */ ul { list-style-type: none; padding: 0px; margin: 0px; } /* margin 0px "for cross-browser compatibility"?*/ li { margin-bottom: 5%; } /* "Specifies a margin in percent of the width of the containing element" */ /*******************/ /* the following are used in plan_site.php: */ li.hide { visibility: hidden; margin-bottom: 0%; } li.indent1, li.indent2, li.indent3 { margin-top: 10px; margin-bottom: 0%; } li.indent1 { margin-left: 10px; } li.indent2 { margin-left: 20px; } li.indent3 { margin-left: 30px; } /* this is for demo purposes and is to be removed: */ a.indent1 { margin-left: 10px; } /********************/ /*currently on footer page: */ nav.footer_nav { border-radius: 25px; background: #ffffcc; font-family: 'Arial Rounded MT', sans-serif; } nav.footer_links ul { padding-left:0; /*removes indenting of li elements*/ line-height: 200%; /* above gives space between list items when they become vertical in smaller screens also makes it "responsive" with minimum effort */ } nav.footer_links li { display: inline; /* this line makes the list horizontal */ margin-left: 15px; margin-right: 15px; /* space between menu items*/ white-space: nowrap; /*as screen narrows and list items fall under each other, this keeps the text of a list item together */ } /*****************/ img.vernet, img.pics { width: 100%; } /* for main pic on index page, and pics on pics pages*/ img.favori { width: 80%; max-width: 400px; } /*for favoris pics, index page*/ img.index_map { width: 90%; max-width: 600px; } /*for pic main page each walk*/ img.zoom { width: 90%; } /*for walk map itineraire pages*/ img.paradis { width: 100%; max-width: 274px; } /* for pics on vernet-canigou page */ img.favori, img.index_map, img.zoom, img.paradis { display: block; margin-left: auto; margin-right: auto; } img.zoom2 { margin: auto; display: block; max-width: 500px; width: 90%; } /* for pointmap with portrait map, instead of .zoom */ img.zoom3 { margin: auto; display: block; max-width: 600px; width: 90%; } /* for pointmap with landscape map, instead of .zoom */ img.otwalks { width: 100%; max-width: 500px; } a.button_link { font-size: 0.8em; color: #4d4d4d; /* Gray30 - a dark gray - for the text*/ background: #efefef; /* a light gray - for the background - this line presumably for old browsers*/ background: linear-gradient(#efefef, #bbbbbb); /* from a light gray to a mid-gray - and this line supposed to go last */ box-shadow: 0px 0px 9px rgba(0,0,0,0.15); /* 9px black shadow around "button", not displaced, 0.15 transparence */ padding: 10px 10px; border-radius: 10px; } /* .bold and .italic mostly now removed, but .bold used on home page to avoid undue repetition of */ strong, .bold { font-weight: bold; } em, .italic { font-style:italic; } ul#breadcrumb li { display: inline; } /* used in breadcrumbs*/ /*---------------------------------*/ #top, #bottom { font-size: 0.1em; } /* for links to top and bottom of page (in header and footer includes) */ .center { text-align: center; } .text_right { text-align: right; } .clear { clear: both; } /* Used on index page. "No floating elements allowed on the left or the right side of a specified element." Otherwise for example "populaires" para on index page rises into floating divs above. */ .large1 { margin-top: 0.5em; margin-bottom: 0.5em; }/* used for headings in heading.php and index-template.php */ .small { font-size: 0.8em; line-height: 200%; } /* used in breadcrumb (in heading.php) */ .very_small{ font-size: 0.2em; } /* used in a hidden para at foot of footer page for spacing */ /* Used on index page and photos_template.php: */ .even_closer_top {margin-top: 0.1em;} .even_closer_bottom {margin-bottom: 0.1em;} /* used on several pages:*/ .closer_top {margin-top: 0.5em;} .closer_bottom {margin-bottom: 0.5em;} /*used in main-template and index page: */ .wider_top {margin-top: 1.5em;} .wider_bottom {margin-bottom: 1.5em;} .nowrap { white-space: nowrap; } .maxwidth_500 { max-width: 500px; margin-left:auto; margin-right:auto; } /* used in heading.php for subheading on index page: */ .maxwidth_700 { max-width: 700px; margin-left:auto; margin-right:auto; } .line-spacing { line-height:1.7; } .ot-walks-list { width: 390px; } .ot-walks-map{ margin-right:5px; } /*--------------------------------- Flexbox code for main and description and OT-walks pages ---------------------------------*/ .basemap-container { padding: 5px; display: flex; align-items: center; justify-content: space-between; } .basemap-item { padding: 5px; } .main-img { width: 100%; max-width: 400px; } .point-container-duo { padding: 5px; padding-top:30px; display: flex; justify-content: space-between; align-items: flex-end; } .point-container-single { padding: 5px; padding-top:30px; } .point-item-left { padding: 5px; margin: 5px; width: 30%; display: flex; flex-direction: column; align-items: center; } .point-item-right { padding: 5px; margin: 5px; width: 70%; } .point-img { width: 100%; max-width: 270px; } .ot-walks-index-maps { display: flex; flex-wrap: wrap; justify-content: space-between; } /*--------------------------------- Media queries ---------------------------------*/ @media screen and (max-width: 650px) { .left, .right { float: left; clear: left; margin: 0 0 10px; /*gives a bottom space between pictures on a small screen (top margin 0, left and right margins 0, bottom margin 10px)*/ width: 100%; } /* used on index page and index-template.php: */ .close_top_550 { margin-top: 0.1em; } } /*responsive header size */ @media screen and (max-width: 750px) { h1 { font-size: 1.25em; } } /* responsive header size end */ /*--------------------------------- Media queries for flexbox stuff ---------------------------------*/ @media screen and (max-width: 850px) { .basemap-container { flex-direction: column; } } @media screen and (max-width: 900px) { .point-container-duo { flex-direction: column; align-items: center; } .point-item-left { width: 100%; } .point-item-right { width: 100%; } }