MediaWiki:WPtouch.css

From Transit.Wiki

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* CSS placed here will affect users of the Chick skin */

body {
font-size: 90%;
} 

/* Bottom Navigation template box */
.bottomnav { 
   border:1px solid #aaa;
   background-color:#f9f9f9;
   margin-top:10px;
   padding:5px;
   font-size: 95%;
}

h1 { font-size: 140%; }
h2 { font-size: 120%; }
h3 { font-size: 100%; }
h4 { font-size: 90%; }
h5 { font-size: 90%; }
h6 { font-size: 90%; }

.toccolours {
    font-size: 90%;
}

.regmap {
width: 90%;
height:300px;
}


/**
* tablet.
*/ 
@media only screen and (max-device-width: 800px) and (max-device-height: 1280px) {
.bigmap {
width: 580px !important;
height: 580px !important;
}

.sidebarmap {
width: 580px !important;
height: 380px !important;
}

.sidebarlist {
width: 580px !important;
height: 200px !important;
border-style:groove;
}
}

/**
* iPad with portrait orientation.
*/ 
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
.bigmap {
width: 690px !important;
height: 922px !important;
}

.sidebarmap {
width: 690px !important;
height: 512px !important;
}

.sidebarlist {
width: 690px !important;
height: 307px !important;
border-style:groove;
}
}
 
/**
* iPad with landscape orientation.
*/
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
.bigmap {
width: 922px !important;
height: 690px !important;
}

.sidebarmap {
width: 922px !important;
height: 384px !important;
}

.sidebarlist {
width: 922px !important;
height: 230px !important;
border-style:groove;
}
} 

/**
* iPhone5 with portrait orientation.
*/ 
@media only screen and (device-width: 320px) and (device-height: 568px) and (orientation:portrait){
.bigmap {
width: 288px !important;
height: 540px !important;
}

.sidebarmap {
width: 288px !important;
height: 284px !important;
}

.sidebarlist {
width: 288px !important;
height: 170px !important;
border-style:groove;
}
}
 
/**
* iPhone5 with landscape orientation.
*/
@media only screen and (device-width: 320px) and (device-height: 568px) and (orientation:landscape){
.bigmap {
width: 540px !important;
height: 288px !important;
}

.sidebarmap {
width: 540px !important;
height: 160px !important;
}

.sidebarlist {
width: 540px !important;
height: 96px !important;
border-style:groove;
}
} 
 
/**
* Samsung with portrait orientation.
*/ 
@media only screen and (device-width: 360px) and (device-height: 640px) and (orientation:portrait){
.bigmap {
width: 324px !important;
height: 608px !important;
}

.sidebarmap {
width: 324px !important;
height: 320px !important;
}

.sidebarlist {
width: 324px !important;
height: 192px !important;
border-style:groove;
}
}

/**
* Samsung with landscape orientation.
*/
@media only screen and (device-width: 360px) and (device-height: 640px) and (orientation:landscape){
.bigmap {
width: 608px !important;
height: 324px !important;
}

.sidebarmap {
width: 608px !important;
height: 180px !important;
}

.sidebarlist {
width: 608px !important;
height: 108px !important;
border-style:groove;
}
} 

.bigmap {
width: 95% !important;
height: 95vh !important;
}

.sidebarmap {
width: 95% !important;
height: 50vh !important;
}

.sidebarlist {
width: 95% !important;
height: 30vh !important;
border-style:groove;
}

.sidebyside {
width: auto !important;
float: none !important;
padding-left: 0 !important;
border-left: 0 !important;
}

.multicolumn {
-moz-column-count: 1 !important; 
-webkit-column-count: 1 !important;
column-count: 1 !important;
}

.oversize {
width: auto !important;
height: auto !important;
overflow:visible !important;
}

.mw-collapsible-content {
position:relative !important;
}

.mobile-hidden {
display: none !important;
}

/* Drop down menu */

.drop ul li {
	position:relative;
	padding: 0 5px 0 5px;
	border-right: 1px solid black;
	float:left;
        list-style: none;
	}

.drop ul li a {
	text-decoration:none;
	}

.drop ul li ul {
	display: none;
	position:absolute;
	z-index:500;
	border: 1px solid #ccc;
	margin-top:-2px;
	margin-left:-5px;
	background: #fff;
	}
	
.drop ul li ul li {
	margin-left:0px;
	font-size:11px;
	border: 0px;
	margin:0px;
	padding:4px;
	margin-top:0px;
        width: 150px
	}

.drop ul li ul li a {
	text-decoration:none;
	}

.drop ul li:hover ul {
	display: block;
	font-size:11px;
	padding: 2px;
	}

.drop ul li ul li:hover {
	background:#f9f9f9;
	}

.drop table{
        margin-left:12px;
	padding:0;
	spacing:0;
	margin:0;
	border:0;
	}