MediaWiki: Common.css

From trvlpedia
Jump to: navigation, search
/* CSS placed here will be applied to all skins */

/*Adjust Tweeki Boostrop Font Basics*/
body, blockquote {
	font-size: 16px;
	font-family: "Segoe UI Semilight", "Roboto", -apple-system, system-ui, BlnkMacSystemFont, "Helvetica Neue";
	line-height: 1.8;}
	
p {margin-bottom: 1.2em;}
.infobox > p {margin-bottom: .2em;}


/* Fix issue with visited link colors being too dark */
a {color: #00bcd4;}
a:visited {color:#0097a7;}
a:hover {color: #006978;}

/*Make TOC text smaller */
/*.toc {font-size: 80%;}*/

/*Custom header formatting */
h2, h4 {text-align: center;}
.firstHeading {text-align: left;}
h1, h3, h4 {
   margin-top: 36px;
   -webkit-margin-before: 36px;
	margin-bottom: .5em;
	color: #455e64;}
h2 {
   margin-top: 72px;
   -webkit-margin-before: 36px;
	margin-bottom: 1em;
}

h3 {
	border-top: 1px solid #819ca9;
	padding-top: .5em;}

h2 + h3, h3:first-of-type {
	-webkit-margin-before: .6em;
	margin-top: .6em;}

/*Set up basic image handling*/
.inlineimg {
	margin-top: .6em;
	margin-bottom: 1.2em;}

.grid {
	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 2em;}
	
.scaledimg {
	width: 90%;
	height: auto;}
.fullimg {
	width: 100%;
	height: auto;}

/*Convert blockquote to 'blurb' */
blockquote {
   font-weight: bold;
   border-color: #607d8b;
   padding-top: 4px;
   padding-bottom: 4px;
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 12.5px;
   padding-left: 12.5px;
   padding-right: 12.5px;}

.box {
	background-color: whitesmoke;
	margin: 2em 0em 2em 0em;
	padding: 1.5em 1.5em 4px 1.5em;}

.boxtitle {
	text-align: center;
	margin-bottom: .6em;}
	
.infobox {
	border: 1px solid black;
	background-color: whitesmoke;
	padding: .5em;}
	
.infoboxheader {
	font-weight: bold;
	font-size: 85%;
	margin-top: 1.5em;
	margin-bottom: .2em;}

.top {display: none;}
@media screen and (max-width: 992px) {
	.top {display: block;}
	.middle {display: none;}
}

/*Adjust paragraph spacing in lists
  This only applies to lists within the main div, so it doesn't affect template chrome */
	
	/*Add extra space to the bottom of lists*/
	div.main ul {margin-bottom:1.2em;}
	div.main ol {margin-bottom:1.2em;}
	
	/*Add extra space between paragraphs within lists and more space between bullet and text */
	div.main ul p {
		margin-bottom: 6px;
   		padding-left: 0em;}
	div.main ol p {
   		margin-bottom: 6px;
   		padding-left: 0em;}
   	div.main li {
   		margin-bottom: .6em;
   		margin-top: 1.2em;
   		padding-left: 0em;}

	div.main ul.tight li {
		margin-bottom: .75em;
		margin-top: 0em;}
		
	div.main ul.tight {margin-top: .5em;}
		
/*Modify bullet lists for custom symbols*/

	/*Clear the normal unordered list styling */
	div.main ul li {
  		list-style-image: none;
  		position: relative;
  		margin-left: 0;
 		list-style-type: none;}
 		
 	div.main ol li {
 		margin-left: -2em;
 		padding-left: .5em;}
 		
 	div.main ol  p {margin-left: -1.5em;}
  	
  	/* Add custom bullets to the different types of lists */
	div.main .bulletlist > li:before {
		content: "\25c6";
		position: absolute;
		color: #546e7a;
		left: -1.5em;
	}

	div.main .checklist > li:before {
		content: "\25a2";
		color: DimGray;
		position: absolute;
		left: -1.5em;
	}

	div.main .simplelist > li:before {
		content: "-";
		position: absolute;
		left: -1.5em;}

	/*Add a custome bullet to sublists in every type of lists */
	div.main ul ul li:before {
		content: "-";
		position: absolute;
		left: -1em;}

	div.main ol ul li:before {
		content: "-";
		position: absolute;
		left: -1em;
	}

/*Cusotmize Table Styles */

	td > p {margin-bottom: .6em;}
	.datatable td > p {margin-top: .6em;}
	td > p:last-child {margin-bottom: 1.2em;}
	
	/*set the header cell style for all datatables*/
	.datatable tbody > tr > th {
		font-size: 14px;
		vertical-align: bottom;
		text-align: center;
		background-color: #819ca9;
		color: white;}	

	.basictable td > p {margin-bottom: 0px;}
	
	/*Center table*/
	.datatable {
		margin: auto;
		margin-bottom: 24px;
		margin-top: 0px;}

	/*adjust basic cell properties for all datatables*/
	table.datatable td {
		font-size: 16px;
		vertical-align: top;
		text-align: center;}

	/*Special case left-aligned tables */
	table.lefttable td {text-align: left;}
		
	/*Adjust first column of basic table*/
	table.basictable td:first-child, table.basictable th:first-child {
		text-align: left;
		font-weight: bold;}

	/*Special handling for two line tables*/
	.two-line tr:nth-of-type(odd) {
		border-bottom:1px solid black;}
	table.comment tbody > tr:nth-of-type(odd) > td {font-size: 15px;}
	.two-line tr > td:first-child {text-align: left;}
	.two-line tr:nth-of-type(even) > td:first-child {font-weight:bold;}

	/*scale font size on phones*/
	@media screen and (max-width: 500px) {
		table.datatable td {font-size: 14px;}
		table.datatable tbody > tr > th {font-size: 12px;}
	}

/*Styles for Credit Card "Tiles"  */

	/*Make the name of the credit cad small*/
	.guidename {
		margin-top: -.5em;
		margin-bottom: 1.5em;
		font-size: 80%;
		text-align: center;}
	
	/*When Card Title is below */
	.namebelow {
		font-size: 90%;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30px;	}
	
	/*For Image */
	.gridimg {
		margin-top: .5em;
		text-align: center;
		min-width: 100%;}

.imglist {margin-top: 8px;}
		
/*Styles to convert labelled list style tables into lists*/

	.labels>tbody>tr>td {line-height: 1.6;}
	
	.labels>tbody>tr>td:first-child {width: 2in;}
	.textlabel>tbody>tr>td:first-child {width: 1.5in;}

	@media screen and (max-width: 500px) {
		.labels>tbody>tr>th, .labels>tbody>tr>td {
			border-top: none;
			margin-left: 1em;}
		.labels>tbody>tr>td:first-child {
			width: 100%;
			border-top: 1px solid #819ca9;}
		.labels>tbody>tr, table.labels>tbody{
			display:block;
			width: 100%;}
		.labels>tbody>tr> td {
			display:block;
			width:100%;	}
		.guidename {
			margin-top: -.1em;
			margin-bottom: 0px;}
		.gridimg {width: 1in;}
	}

		
/*--------------EXPERIMENT SECTION-------------*/


@media screen and (max-width: 500px) {
	.firstcol {
		margin-top: 20px;
	}
}

@media screen and (min-width: 500px) {
	.labellist {display: table;}
	.lrow {display:table-row;}
	.firstcol {
		color:green;
		display: table-cell;}
	.lcontent {display: table-cell;}}