MediaWiki:Common.css

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
// Hides the title for specific pages
*/
body.page-Main_Page h1.firstHeading { display:none; }
body.page-RTD_Ad_Landing_Page h1.firstHeading { display:none; }
body.page-Temperature_and_Humidity_Ad_Landing_Page h1.firstHeading { display:none; }
body.page-Ambient_Temperature_Ad_Landing_Page h1.firstHeading { display:none; }
body.page-IR_Temperature_Ad_Landing_Page h1.firstHeading { display:none; }
body.page-Thermocouple_Ad_Landing_Page h1.firstHeading { display:none; }
body.page-Temperature_Ad_Landing_Page h1.firstHeading { display:none; }

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
// Hides white space at the top of the Main Page
*/
body.page-Main_Page #contentSub { display:none; margin-bottom:0px; }
body.page-Main_Page .ph-wiki-page-content{ padding-top:1rem; }

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
// Shrink white space at the top of Programming Basics pages
*/
body.page-Phidget_Programming_Basics .ph-main-content{ padding-top:1rem; }
body.page-Phidget_Channels .ph-main-content{ padding-top:1rem; }
body.page-Phidget_Program_Outline .ph-main-content{ padding-top:1rem; }
body.page-Creating_a_Channel .ph-main-content{ padding-top:1rem; }
body.page-Addressing_Phidgets .ph-main-content{ padding-top:1rem; }
body.page-Opening_a_Channel .ph-main-content{ padding-top:1rem; }
body.page-Attaching_a_Channel .ph-main-content{ padding-top:1rem; }
body.page-Do_Things_with_the_Channel .ph-main-content{ padding-top:1rem; }
body.page-Closing_a_Channel .ph-main-content{ padding-top:1rem; }
body.page-Using_Events .ph-main-content{ padding-top:1rem; }
body.page-A_Basic_Phidget_Program .ph-main-content{ padding-top:1rem; }
body.page-Using_Multiple_Phidgets .ph-main-content{ padding-top:1rem; }
body.page-Using_the_Phidget22_API .ph-main-content{ padding-top:1rem; }
body.page-Handling_Errors_and_Logging .ph-main-content{ padding-top:1rem; }
body.page-Phidget_Network_Server .ph-main-content{ padding-top:1rem; }
body.page-Advanced_Topics .ph-main-content{ padding-top:1rem; }

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
// Hides category links at bottom of pages 
*/
#catlinks { display: none; }
#mw-normal-catlinks { display: none; }

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
// Hides the thumbnail magnify link and the "powered by mediawiki" icon.
*/
.magnify {display: none}
//#footer-poweredbyico { display: none; }

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
// Makes the level 4 header italic so it looks different from level 3. 
*/

h4{
font-style: italic;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
// The following code enables numberless tables of contents.
// When <div class="nonumtoc"> is used on the table of contents, the ToC will display without numbers.
*/

.nonumtoc .tocnumber { display: none; }
.nonumtoc #toc ul,
.nonumtoc .toc ul {
    line-height: 1.5em;
    list-style: none;
    margin: .3em 0 0;
    padding: 0;
}
.nonumtoc #toc ul ul, 
.nonumtoc .toc ul ul { 
    margin: 0 0 0 2em; 
}

/* Allow limiting of which header levels are shown in a TOC;
   <div class="toclimit-3">, for instance, will limit to
   showing ==headings== and ===headings=== but no further
   (as long as there are no =headings= on the page, which
   there shouldn't be according to the MoS). */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
    display: none;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*//////////////////////////////////////////////////////////////////////////////////////////
// Makes the typical source code div container
*/

div.source {
  background-color: #f3f3f3; 
  /*border-color: #1c9edb;*/ 
  /*Fake border:*/
  font-size: 10pt;
  border-color: #555555; 
  border-width:2px; 
  border-style: dashed;
  padding:6px;
}

/* Hide edit links */
.mw-editsection { display:none!important; }
.editsection { display:none!important; }

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
// Changes the look of the tabber tabs
*/

ul.tabbernav li a {
color: #269964;
background-color: #f1f1f1;
font-size: 15px;
}

ul.tabbernav li a:link {
color: #269964;
}

ul.tabbernav li a:visited {
color: #269964;
}

ul.tabbernav li a:hover {
color: #168351;
background-color: #e4e4e4;
}

ul.tabbernav li.tabberactive a {
color: #474747;
font-weight: bold;
background-color: white;
}

ul.tabbernav li.tabberactive a:hover {
color: #474747;
font-weight: bold;
background-color: white;
}

.bigTabs > .tabberlive > ul.tabbernav > li.tabberactive a {
}

.bigTabs > .tabberlive > ul.tabbernav > li a {
font-size: 20px;
}

/* Fix a bug in the tabber - ref: https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue/issues/30 */
.tabber__panel[aria-hidden="true"] {
    display: none; width: 100%;
}
.tabber__panel[aria-hidden="false"] {
    display: block; width: 100%;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Hover Box for switching the visibility of the selected item
*/
.hoverbox { display:inline-block; padding:0em; }
.hoverbox .hoveritem { display:none; margin:0em; padding:0em; }
.hoverbox .hoveritem.selected { display:inline-block; }
.hoverbox:hover .hoveritem { display:inline-block; }
.hoverbox:hover .hoveritem.selected { display:none; }

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Force certain images to appear inline even on mobile
*/
.InlineImages img {display:inline; padding:0em}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Make Programming Basics Intro table better on mobile
*/

.ProgrammingBasicsIntro table tr>:first-child {
    width:60%;
}

@media screen and (max-width:767px) {
    .ProgrammingBasicsIntro table tr > *{
        display: block;
    }
    .ProgrammingBasicsIntro table tr {
        display: table-cell;
        vertical-align: top;
    }

    .ProgrammingBasicsIntro .table-responsive>.table>thead>tr>th, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>tbody>tr>td, .table-responsive>.table>tfoot>tr>td {
        white-space: pre-wrap;
        width:100%;
    }
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Styling for main page buttons
*/
.MainFlow1 .hoverbox{width:21.36%;}
.MainFlow2 .hoverbox{width:19.33%;}
.MainFlow3 .hoverbox{width:19.33%;}
.MainFlow4 .hoverbox{width:21.36%;}
.MainFlow1 img{width:100%;height: auto;}
.MainFlow2 img{width:100%;height: auto;}
.MainFlow3 img{width:100%;height: auto;}
.MainFlow4 img{width:100%;height: auto;}
.MainFlowArrow img {width:6.20%;height: auto;}

.MP_Troubleshooting .hoverbox{width:17%;}
.MP_Troubleshooting img{width:100%;height: auto;}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Fix slide deck scrolling issue on Safari (Sept 2021)
*/

.ph-main-content{ overflow-y: auto; }

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Styling for collapsible sections (introduced Apr 2020)
*/
.ugcContent {
	padding-top: 10px;
	display: none;
}

.ugcHeaderName {
	font-weight: 600;
}

.ugcHeaderIcon {
	margin: 0px 5px 0px 5px;
	display: inline-block;
	width: 0;
	height: 0;
	border-right: 0px;
	border-top: 5px solid transparent;
	border-left: 10px solid #7a8598;
	border-bottom: 5px solid transparent;
}


.ugcHeaderIcon.down {
	margin: 0px 5px 0px 5px;
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid #474747;
	border-bottom: 0px;
}

.ugcHeader {
	font-size: 16px;
	background-color: #c9daf8;
	padding: 5px 0px 5px 5px;
	margin-top: 10px;
}

.ugcOpenAll {
	font-size: 12px;
	font-weight: 800;
	width: 80px;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: #c9daf8;
	padding: 5px;
	border-radius: 25px;
	margin-top: 10px;
}

.table-no-border>.tr>td {
    border-top: 0;
}

.table-no-border>tbody>tr>td {
    border-top: 0;
}

/*////////////////////////////////////////////////////////////////////////////////////////////
/* Make TOC Float left, but only if there's room in the margins
/* It will scale down with margin size until there's almost none left
/* Added July 2023
*/
@media screen and (min-width:1400px) {
    #toc {
    float:left;
    margin:0 0 1em 1em;
    position:fixed;
    top:220px;
    left:10px;
    overflow:auto;
    max-height: calc(100% - 220px);
    max-width: calc(50% - 510px);
    };
}