/*
Theme Name: RG B2B
Theme URI: https://b2b.royalgalapagos.com
Author: Royal Galapagos
Description: Custom theme for the Royal Galapagos B2B portal (GO-461 WordPress migration).
Version: 0.1.0
Text Domain: rg-b2b
Requires PHP: 8.3
*/

/* ================================================================
 * GO-461 F2c/F2e: protostar base + bare shell + site chrome.
 *
 * Ground truth (re-measured against the Joomla origin 2026-10-14): every
 * Joomla page loads templates/protostar/css/template.css and then the inline
 * template-parameter block:
 *
 *   h1..h6, .site-title { font-family:'Open Sans',sans-serif }
 *   body.site { border-top:3px solid #0088cc; background-color:#f4f6f7 }
 *   a { color:#0088cc }
 *
 * template.css carries TWO layers. Lines 1-7120 are Bootstrap 2.3.2 plus
 * protostar's own base; lines 7127+ are a custom block that loads LAST and
 * therefore wins on everything it touches:
 *
 *   body.site      { padding:20px }            <- the page gutter
 *   .container     { max-width:960px }
 *   .body .container { white card: bg #fff, padding 20px, 1px border
 *                      rgba(0,0,0,.15), radius 4px, 0 0 6px rgba(0,0,0,.05) }
 *   h1..h6         { margin:12px 0; 26/28, 22/24, 18/20, 14/16, 13/15, 12/14 }
 *
 * F2c ported only the Bootstrap half, so every page rendered with no gutter,
 * no white card and the pre-override heading scale (h1 35.75px/36px). That is
 * the whole of the "the footer sits on top of the content" report: with no
 * body padding and no card, the footer's hr lands flush against the content
 * instead of below the card, on every page. F2e ports the custom block and
 * moves the now-redundant body.home overrides out.
 *
 * Layout: <div class="body" id="top"><div class="container">
 * <header class="header"> (empty site-title brand) <div class="row-fluid">
 * <main id="content" class="span12"> ... <footer class="footer"> with the
 * hr / #back-top / copyright block, OUTSIDE .body (hence uncarded).
 *
 * The head band, the contacts foot band and the itineraries metrics are
 * NOT site-wide chrome in production: the head/foot bands were injected
 * by the itinerary template's own JS and css/itineraries.css is loaded
 * by that view only. F2 had all three site-wide, which is why the list
 * pages did not match production.
 * ================================================================ */

/* ---- Base (template.css custom block + the template-parameter inline) ---- */

/* Two rules, as in the origin: Bootstrap's base `body`, then the custom
   block's `body.site`. Keeping them separate is not cosmetic — `body.site`
   (0,1,1) is what stops the phone-width `body{padding-top:0}` from winning. */
body{
	margin:0;
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:13px;
	line-height:18px;
	color:#333;
	background-color:#fff;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
body.site{
	border-top:3px solid #0088cc;
	padding:20px;
	background-color:#f4f6f7;
}
a{
	color:#0088cc;
}
/* Bootstrap's base img, verbatim — including the `\9` on width. That hack
   makes the declaration IE-only, which is what lets an <img width="600">
   keep its attribute in every modern browser; writing plain `width:auto`
   (the F2d port) overrode the attribute instead and the itinerary map came
   out at 940px wide instead of 600px. `vertical-align:middle` is what keeps
   an inline image from carrying the line box's descender space: without it
   the ficha's photo cell measured 317px around a 313.33px image. */
img{
	max-width:100%;
	width:auto \9;
	height:auto;
	vertical-align:middle;
	border:0;
	-ms-interpolation-mode:bicubic;
}
h1,h2,h3,h4,h5,h6,.site-title{
	font-family:'Open Sans',sans-serif;
}
h1,h2,h3,h4,h5,h6{
	margin:12px 0;
	font-weight:bold;
	word-wrap:break-word;
}
h1{
	font-size:26px;
	line-height:28px;
}
h2{
	font-size:22px;
	line-height:24px;
}
h3{
	font-size:18px;
	line-height:20px;
}
h4{
	font-size:14px;
	line-height:16px;
}
h5{
	font-size:13px;
	line-height:15px;
}
h6{
	font-size:12px;
	line-height:14px;
}
p{
	margin:0 0 9px;
	word-wrap:break-word;
}
ul,
ol{
	padding:0;
	margin:0 0 9px 25px;
}
ul ul,
ul ol,
ol ol,
ol ul{
	margin-bottom:0;
}
li{
	line-height:18px;
	word-wrap:break-word;
}
/* Bootstrap 2.3.2 / protostar. An ABSOLUTE bold, not the UA's `bolder`: the
   landing pages nest <strong> inside <strong>, and with `bolder` the inner one
   compounds 700 -> 900. Measured on all nine details (5 nested pairs each),
   the port painted those at 900 against the origin's 700. */
b,
strong{
	font-weight:bold;
}
.site-title{
	font-size:calc(16px + 2.16vw);
	line-height:48px;
	font-weight:bold;
}

/* ---- Shell: .container and the white card ---- */

/* Protostar .container (template param fluidContainer=0 -> fixed 940px). */
.container{
	width:940px;
	max-width:960px;
	margin-right:auto;
	margin-left:auto;
}
.container:before,
.container:after{
	display:table;
	content:"";
}
.container:after{
	clear:both;
}

/* The card. Only the container INSIDE .body gets it — protostar's footer
   carries its own .container and is a sibling of .body, so it stays flat on
   the page background. */
.body .container{
	background-color:#fff;
	-webkit-border-radius:4px;
	border-radius:4px;
	padding:20px;
	border:1px solid rgba(0,0,0,0.15);
	box-shadow:0 0 6px rgba(0,0,0,0.05);
}

/* Header: brand with the empty site-title + the (empty) search slot. */
.header{
	margin-bottom:10px;
}
.brand{
	color:#001a27;
	-webkit-transition:color .5s linear;
	transition:color .5s linear;
}
.brand:hover{
	color:#005e8d;
	text-decoration:none;
}

/* ---- Bootstrap 2.3.2 utilities used by the shell markup ---- */

.clearfix:before,
.clearfix:after{
	display:table;
	content:"";
}
.clearfix:after{
	clear:both;
}
.pull-left{
	float:left;
}
.pull-right{
	float:right;
}

/* Fluid grid (Bootstrap 2.3.2 row-fluid; span12 is the full width). */
.row-fluid{
	width:100%;
}
.row-fluid:before,
.row-fluid:after{
	display:table;
	content:"";
}
.row-fluid:after{
	clear:both;
}
.row-fluid [class*="span"]{
	display:block;
	float:left;
	width:100%;
	min-height:28px;
	margin-left:2.127659574%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.row-fluid [class*="span"]:first-child{
	margin-left:0;
}
/* The two columns the portal actually uses (the home is span9 article +
   span3 sidebar; every other page is span12). Plain selectors, as in
   Bootstrap — scoping them to body.home (F2b) made them out-specify the
   ≤767px collapse below, so on a phone the sidebar kept its 23% width. */
.row-fluid .span9{
	width:74.468085099%;
}
.row-fluid .span3{
	width:23.404255317%;
}

/* Footer divider (protostar hr) + the back-to-top link. */
hr{
	margin:18px 0;
	border:0;
	border-top:1px solid #eee;
	border-bottom:1px solid #fff;
}
#back-top{
	text-decoration:none;
}

/* ---- Bootstrap 2.3.2 tables ---- */

/* The itinerary list renders <table class="category table table-striped">
   with sectiontableheader th cells, exactly as the Joomla list did. */
table{
	max-width:100%;
	background-color:transparent;
	border-collapse:collapse;
	border-spacing:0;
}
.table{
	width:100%;
	margin-bottom:18px;
}
.table th,
.table td{
	padding:8px;
	line-height:18px;
	text-align:left;
	vertical-align:top;
	border-top:1px solid #ddd;
}
.table th{
	font-weight:bold;
}
/* Bootstrap 2.3.2 also resets the header cells, and protostar ships those two
   rules in template.css. Without them the list header keeps the 1px top
   border from `.table th` and stays top-aligned, which made every list page
   exactly 1px taller than the origin (thead 35px against 34.5px) — found
   2026-10-14 while migrating the list intro into the page body. */
.table thead th{
	vertical-align:bottom;
}
.table caption + thead tr:first-child th,
.table caption + thead tr:first-child td,
.table colgroup + thead tr:first-child th,
.table colgroup + thead tr:first-child td,
.table thead:first-child tr:first-child th,
.table thead:first-child tr:first-child td{
	border-top:0;
}
.table tbody + tbody{
	border-top:2px solid #ddd;
}
.table .table{
	background-color:#fff;
}
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th{
	background-color:#f9f9f9;
}

/* ---- Bootstrap 2.3.2 components (used by the home wells and the forms) ---- */

.page-header{
	margin:2px 0 10px;
	padding-bottom:5px;
	border-bottom:1px solid #eee;
}
.well{
	min-height:20px;
	padding:19px;
	margin-bottom:20px;
	background-color:#f5f5f5;
	border:1px solid #e3e3e3;
	border-radius:4px;
	box-shadow:inset 0 1px 1px rgba(0,0,0,.05);
}
.well .page-header{
	margin:0 0 5px;
}
.well select,
.well .chzn-container{
	max-width:100%;
}
.nav{
	margin-left:0;
	margin-bottom:18px;
	list-style:none;
}
.nav > li > a{
	display:block;
}
.nav > li > a:hover,
.nav > li > a:focus{
	text-decoration:none;
	background-color:#eee;
}
ul.unstyled,
ol.unstyled{
	margin-left:0;
	list-style:none;
}
ul.inline,
ol.inline{
	margin-left:0;
	list-style:none;
}
ul.inline > li,
ol.inline > li{
	display:inline-block;
	padding-left:5px;
	padding-right:5px;
}
ul.lang-inline li{
	display:inline;
}
.mod-languages ul{
	margin:0;
	padding:0;
	list-style:none;
}
.mod-languages li{
	margin-left:5px;
	margin-right:5px;
}
.mod-languages img{
	border:none;
}
.mod-languages a{
	text-decoration:none;
}
form{
	margin:0 0 18px;
}
fieldset{
	padding:0;
	margin:0;
	border:0;
}
legend{
	display:block;
	width:100%;
	padding:0;
	margin-bottom:18px;
	font-size:19.5px;
	line-height:36px;
	color:#333;
	border:0;
	border-bottom:1px solid #e5e5e5;
}
legend small{
	font-size:13.5px;
	color:#999;
}
/* Bootstrap's form base. `line-height:18px` here is what gives a native
   <button> its 24px (18 + 2 padding + 2×2 border) — without it Chrome's UA
   line-height:normal wins and the print popup's Print/Close buttons came out
   21px, dragging the whole popup 3px up. */
label,
input,
button,
select,
textarea{
	font-size:13px;
	font-weight:normal;
	line-height:18px;
}
input,
button,
select,
textarea{
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
label{
	display:block;
	margin-bottom:5px;
}
.form-inline label{
	display:inline-block;
}
.form-inline input,
.form-inline textarea,
.form-inline select,
.form-inline .help-inline,
.form-inline .uneditable-input,
.form-inline .input-prepend,
.form-inline .input-append{
	display:inline-block;
	margin-bottom:0;
	vertical-align:middle;
}
.form-inline .input-append,
.form-inline .input-prepend{
	margin-bottom:0;
}
.form-inline .radio,
.form-inline .checkbox{
	padding-left:0;
	margin-bottom:0;
	vertical-align:middle;
}
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"]{
	float:left;
	margin-right:3px;
	margin-left:0;
}

/* Inputs (Bootstrap 2.3.2 base + the protostar overrides the login form
   depends on: .add-on + #modlgn-username resolves to 132px, measured). */
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input{
	display:inline-block;
	height:18px;
	padding:4px 6px;
	margin-bottom:9px;
	font-size:13px;
	line-height:18px;
	color:#555;
	border-radius:3px;
	vertical-align:middle;
}
input,
textarea,
.uneditable-input{
	width:206px;
}
textarea{
	height:auto;
}
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input{
	background-color:#fff;
	border:1px solid #ccc;
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
	transition:border linear .2s, box-shadow linear .2s;
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus{
	border-color:rgba(82,168,236,0.8);
	outline:0;
	box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
/* Submit/reset/button/file inputs are NOT 206px wide — without this the
   generator forms' submit buttons came out full-width. */
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"]{
	width:auto;
}
select,
input[type="file"]{
	height:28px;
	line-height:28px;
}
select{
	width:220px;
	border:1px solid #ccc;
	background-color:#fff;
}
select[multiple],
select[size]{
	height:auto;
}
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus{
	outline:thin dotted #333;
	outline:5px auto -webkit-focus-ring-color;
	outline-offset:-2px;
}
input[type="submit"],
input[type="radio"],
input[type="checkbox"]{
	cursor:pointer;
}
input[type="radio"],
input[type="checkbox"]{
	margin:4px 0 0;
	line-height:normal;
	width:auto;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
	color:#999;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder{
	color:#999;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
	color:#999;
}
.input-small{
	width:90px;
}
#login-form{
	margin-top:8px;
}
.add-on + #modlgn-username,
.add-on + #modlgn-passwd{
	width:132px;
}
.input-prepend{
	display:inline-block;
	margin-bottom:9px;
	vertical-align:middle;
	font-size:0;
	white-space:nowrap;
}
.input-prepend .add-on{
	display:inline-block;
	width:auto;
	min-width:16px;
	height:18px;
	padding:4px 5px;
	font-size:13px;
	font-weight:normal;
	line-height:18px;
	text-align:center;
	text-shadow:0 1px 0 #fff;
	background-color:#eee;
	border:1px solid #ccc;
	margin-right:-1px;
	border-radius:3px 0 0 3px;
	vertical-align:top;
}
.input-prepend input,
.input-prepend select{
	position:relative;
	margin-bottom:0;
	vertical-align:top;
	border-radius:0 3px 3px 0;
}
.input-prepend input{
	font-size:13px;
}
.radio,
.checkbox{
	min-height:18px;
	padding-left:20px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"]{
	float:left;
	margin-left:-20px;
}
.controls > .radio:first-child,
.controls > .checkbox:first-child{
	padding-top:5px;
}
.radio.inline,
.checkbox.inline{
	display:inline-block;
	padding-top:5px;
	margin-bottom:0;
	vertical-align:middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline{
	margin-left:10px;
}
.control-group{
	margin-bottom:9px;
}
.btn{
	display:inline-block;
	padding:4px 12px;
	margin-bottom:0;
	font-size:13px;
	line-height:18px;
	color:#333;
	text-align:center;
	text-shadow:0 1px 1px rgba(255,255,255,.75);
	vertical-align:middle;
	cursor:pointer;
	background-color:#f5f5f5;
	border:1px solid #ccc;
	border-radius:3px;
}
.btn-primary{
	color:#fff;
	text-shadow:0 -1px 0 rgba(0,0,0,.25);
	background:#0088cc;
	border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
}
.element-invisible{
	position:absolute;
	padding:0;
	margin:0;
	border:0;
	height:1px;
	width:1px;
	overflow:hidden;
}

/* IcoMoon icon font (files copied from media/jui/fonts/ to theme fonts/). */
@font-face{
	font-family:'IcoMoon';
	src:url('fonts/IcoMoon.eot');
	src:url('fonts/IcoMoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/IcoMoon.woff') format('woff'),
		url('fonts/IcoMoon.ttf') format('truetype'),
		url('fonts/IcoMoon.svg#IcoMoon') format('svg');
	font-weight:normal;
	font-style:normal;
}
[class^="icon-"],
[class*=" icon-"]{
	display:inline-block;
	width:14px;
	height:14px;
	line-height:14px;
}
[class^="icon-"]:before,
[class*=" icon-"]:before{
	font-family:'IcoMoon';
	font-style:normal;
	speak:none;
}
.icon-user:before{
	content:"\22";
}
.icon-lock:before{
	content:"\23";
}

/* ================================================================
 * GO-461 F2 additions (not part of the Joomla itineraries.css port).
 * ================================================================ */

/*
 * No rule for .single-visitor_site table.details th on purpose. F2 gave the
 * ficha's header row a brand-maroon background so the white island-name span
 * would be readable, but that made the ficha differ from production, where
 * the ficha loads template.css only (no itineraries.css) and the th therefore
 * has NO background — white text on white, the island name invisible on the
 * page and in the print popup. The client chose production parity on
 * 2026-10-14 (plan §9.7), so the th keeps its default transparent background.
 */

/* ================================================================
 * GO-461 F2e: print.
 *
 * Two separate things, both measured against the origin on 2026-10-14:
 *
 * 1. Ctrl+P on a normal page. Joomla shipped Bootstrap's print reset in
 *    template.css (lines 112-166) and nothing else, so the printed page is
 *    the same DOM in black on white with the URL after each link. Re-measured
 *    with a print-media emulator: the origin emitted 682 bytes of print CSS
 *    on a ficha, the WordPress theme emitted 0.
 *
 * 2. The ContentBuilder print bar and its popup. On the origin the ficha and
 *    the boat page carry div.cbPrintBar (top right, printButton.png) which
 *    opens ?layout=print&tmpl=component in a 640x480 window. That popup is a
 *    BARE document — body.contentpane.modal, no .body wrapper, template.css
 *    only — so it has no gutter, no card and no footer; the Print/Close
 *    buttons are unstyled native buttons. See single-visitor_site.php and
 *    single-boat.php for the markup and body.contentpane below for the reset.
 *    The itinerary detail hides the bar on the origin (itineraries.css) and
 *    therefore has none here either.
 * ================================================================ */

/* The print bar (inline-styled in the origin markup, as it was there). */
.cbPrintBar a{
	text-decoration:none;
}
.cbPrintButton{
	cursor:pointer;
}
.cbPrintBarButtons{
	text-align:center;
}

/* The popup document: strip the site chrome the origin never loaded. */
body.contentpane{
	margin:0;
	padding:0;
	border-top:0;
	background-color:#fff;
	-webkit-font-smoothing:auto;
}

/* component.php emits an EMPTY template-parameter <style>, so inside the
   popup neither the Open Sans heading font nor the #0088cc link colour
   applied. Measured on the origin popup: h1 is "Helvetica Neue" 26/28
   (never Open Sans) and there is no themed link colour, so Bootstrap's
   #005e8d base is what a link in there gets. The Print/Close buttons are
   left unstyled on purpose — the origin rendered native buttons. */
body.contentpane h1,
body.contentpane h2,
body.contentpane h3,
body.contentpane h4,
body.contentpane h5,
body.contentpane h6,
body.contentpane .site-title{
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
body.contentpane a{
	color:#005e8d;
}
body.contentpane a:hover,
body.contentpane a:focus{
	color:#002b41;
	text-decoration:underline;
}

/* Bootstrap 2.3.2 print reset, verbatim from template.css. */
.visible-print{
	display:none !important;
}
@media print{
	*{
		text-shadow:none !important;
		color:#000 !important;
		background:transparent !important;
		box-shadow:none !important;
	}
	a,
	a:visited{
		text-decoration:underline;
	}
	a[href]:after{
		content:" (" attr(href) ")";
	}
	abbr[title]:after{
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after{
		content:"";
	}
	pre,
	blockquote{
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead{
		display:table-header-group;
	}
	tr,
	img{
		page-break-inside:avoid;
	}
	img{
		max-width:100% !important;
	}
	@page{
		margin:0.5cm;
	}
	p,
	h2,
	h3{
		orphans:3;
		widows:3;
	}
	h2,
	h3{
		page-break-after:avoid;
	}
	.visible-print{
		display:inherit !important;
	}
	.hidden-print{
		display:none !important;
	}
}

/* ================================================================
 * GO-461 F2b: Joomla protostar home (login page) replica.
 *
 * The Joomla home is NOT a regular portal page: it has no head/foot
 * bands and no primary nav. front-page.php renders a standalone copy
 * of the protostar layout (article + Login Form + Main Menu wells).
 * Everything it shares with the rest of the site — body, container,
 * card, headings, wells, page headers, inputs, buttons — now comes from
 * the blocks above; only what is genuinely home-only is scoped here.
 * ================================================================ */

body.home a{
	color:#0088cc;
}
body.home p{
	text-align:left !important;
}

/* The flag switcher. NOT home-only: protostar floats the brand and the
   search slot from the markup itself (.brand.pull-left / .header-search
   .pull-right), so the languages sit top-right on every page and both go
   full width only below 768px (see the max-width:768 block at the end).
   F2b had them centred/stacked at all widths, which moved the flags to the
   top-left and, by de-floating .header-search, dropped its 5px. */
.header-search .mod-languages ul{
	margin:0 0 5px 0;
}


/* ================================================================
 * Responsive (Bootstrap 2.3.2 + protostar's own media queries), last so
 * they win. Values re-measured against the origin at 1440/1280/1024/979/
 * 900/767/600/480/375.
 * ================================================================ */

/* Bootstrap's responsive visibility helpers. The only one the portal
   actually uses is .hidden-phone (the itinerary list drops its Days and
   Itinerary Name columns on phones); the rest are the class's own defaults. */
.visible-phone,
.visible-tablet{
	display:none !important;
}
.hidden-desktop{
	display:none !important;
}
.visible-desktop{
	display:inherit !important;
}
@media (min-width:768px) and (max-width:979px){
	.hidden-desktop{
		display:inherit !important;
	}
	.visible-desktop{
		display:none !important;
	}
	.visible-tablet{
		display:inherit !important;
	}
	.hidden-tablet{
		display:none !important;
	}
}
@media (max-width:767px){
	.hidden-desktop{
		display:inherit !important;
	}
	.visible-desktop{
		display:none !important;
	}
	.visible-phone{
		display:inherit !important;
	}
	.hidden-phone{
		display:none !important;
	}
}

/* Bootstrap (max-width:767px): the fluid grid collapses. Every
   [class*="span"] stops floating and goes full width. Omitting this left the
   home's span9/span3 side by side on phones — measured at 767/600/480/375 the
   login well sat at x=566 instead of stacking at x=41, and .container came
   out 377px short. */
@media (max-width:767px){
	body{
		padding-left:20px;
		padding-right:20px;
	}
	.container{
		width:auto;
	}
	.row-fluid{
		width:100%;
	}
	[class*="span"],
	.uneditable-input[class*="span"],
	.row-fluid [class*="span"]{
		float:none;
		display:block;
		width:100%;
		margin-left:0;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	.span12,
	.row-fluid .span12{
		width:100%;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	input[class*="span"],
	select[class*="span"],
	textarea[class*="span"],
	.uneditable-input{
		display:block;
		width:100%;
		min-height:28px;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}
	.input-prepend input,
	.input-append input,
	.input-prepend input[class*="span"],
	.input-append input[class*="span"]{
		display:inline-block;
	}
}

/* Protostar's own tablet block. */
@media (min-width:768px) and (max-width:979px){
	.container{
		width:724px;
	}
	#login-form .input-small{
		width:62px;
	}
}

/* Protostar's own phone block: the header stops floating — brand centred on
   its own line, the languages below it. */
@media (max-width:768px){
	body{
		-webkit-overflow-scrolling:touch;
		padding-top:0;
	}
	.header{
		background:transparent;
	}
	.header .brand{
		float:none;
		display:block;
		text-align:center;
	}
	.header .nav.pull-right,
	.header-search{
		float:none;
		display:block;
	}
	.header-search form{
		margin:0;
	}
	.header-search .search-query{
		width:90%;
	}
	.form-search > .pull-left,
	.form-search > .pull-right{
		float:none;
		display:block;
		margin-bottom:9px;
	}
}
@media (max-width:980px){
	.well{
		padding:10px;
	}
}
@media (min-width:1024px){
	.site-title{
		font-size:40px;
	}
}