MediaWiki:Common.css

From University Innovation Fellows
Jump to navigation Jump to search

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.
#n-Training > a {
	font-weight: bold;
}

#rahulTestPage {
	color: red;
}

.portal .body > ul li:hover{
    transform: translate(15px);
    color: #00cec9;
}

.mw-selflink .templateTabLink{
	color: #000000 !important;
}

@media only screen and (max-width: 600px) {
	#mainpage-outertext {
		margin-left:10px;
	}
	#mainpage-innertext {
		margin-right: auto;
		font-size: x-small;
	}
	#mainpage-section-mb {
		margin-right: auto;
	}
}

/* Style for horizontal lists (separator following item).
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 9 (2016-08-10)
   @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
}
/* Hide empty list items */
.hlist .mw-empty-li,
.hlist .mw-empty-elt {
    display: none;
}
/* Generate interpuncts */
.hlist dt:after {
    content: ": ";
}
.hlist dd:after,
.hlist li:after {
    content: " · ";
    font-weight: bold;
}
.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
    content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
    content: ")";
    font-weight: normal;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
    counter-reset: listitem;
}
.hlist ol > li {
    counter-increment: listitem;
}
.hlist ol > li:before {
    content: " " counter(listitem) "\a0";
}
.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
    content: " (" counter(listitem) "\a0";
}


/** @source http://en.wikipedia.org/wiki/MediaWiki:Common.css | 2020-02-03 */
/** {{mbox}}, {{ambox}}, {{ombox}}, .. */
/** readded dmbox, because already template styled on en.wp */
/** removed messagebox */

/* For old WikiProject banners inside banner shells. */
.mbox-inside .standard-talk {
	border: 1px solid #c0c090;
	background-color: #f8eaba;
	width: 100%;
	margin: 2px 0;
	padding: 2px;
}

/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
th.mbox-text, td.mbox-text {   /* The message body cell(s) */
	border: none;
	/* @noflip */
	padding: 0.25em 0.9em;     /* 0.9em left/right */
	width: 100%;               /* Make all mboxes the same width regardless of text length */
}
td.mbox-image {                /* The left image cell */
	border: none;
	/* @noflip */
	padding: 2px 0 2px 0.9em;  /* 0.9em left, 0px right */
	text-align: center;
}
td.mbox-imageright {           /* The right image cell */
	border: none;
	/* @noflip */
	padding: 2px 0.9em 2px 0;  /* 0px left, 0.9em right */
	text-align: center;
}
td.mbox-empty-cell {           /* An empty narrow cell */
	border: none;
	padding: 0;
	width: 1px;
}

/* Article message box styles */
table.ambox {
	margin: 0 10%;                  /* 10% = Will not overlap with other elements */
	border: 1px solid #a2a9b1;
	/* @noflip */
	border-left: 10px solid #36c;  /* Default "notice" blue */
	background-color: #fbfbfb;
	box-sizing: border-box;
}
table.ambox + table.ambox {      /* Single border between stacked boxes. */
	margin-top: -1px;
}
.ambox th.mbox-text,
.ambox td.mbox-text {            /* The message body cell(s) */
	padding: 0.25em 0.5em;       /* 0.5em left/right */
}
.ambox td.mbox-image {           /* The left image cell */
	/* @noflip */
	padding: 2px 0 2px 0.5em;    /* 0.5em left, 0px right */
}
.ambox td.mbox-imageright {      /* The right image cell */
	/* @noflip */
	padding: 2px 0.5em 2px 0;    /* 0px left, 0.5em right */
}

table.ambox-notice {
	/* @noflip */
	border-left: 10px solid #36c;       /* Blue */
}
table.ambox-speedy {
	/* @noflip */
	border-left: 10px solid #b32424;    /* Red */
	background-color: #fee7e6;          /* Pink */
}
table.ambox-delete {
	/* @noflip */
	border-left: 10px solid #b32424;    /* Red */
}
table.ambox-content {
	/* @noflip */
	border-left: 10px solid #f28500;    /* Orange */
}
table.ambox-style {
	/* @noflip */
	border-left: 10px solid #fc3;       /* Yellow */
}
table.ambox-move {
	/* @noflip */
	border-left: 10px solid #9932cc;    /* Purple */
}
table.ambox-protection {
	/* @noflip */
	border-left: 10px solid #a2a9b1;    /* Gray-gold */
}

/* Image message box styles */
table.imbox {
	margin: 4px 10%;
	border-collapse: collapse;
	border: 3px solid #36c;    /* Default "notice" blue */
	background-color: #fbfbfb;
	box-sizing: border-box;
}
.imbox .mbox-text .imbox {  /* For imboxes inside imbox-text cells. */
	margin: 0 -0.5em;       /* 0.9 - 0.5 = 0.4em left/right.        */
	display: block;         /* Fix for webkit to force 100% width.  */
}
.mbox-inside .imbox {       /* For imboxes inside other templates.  */
	margin: 4px;
}

table.imbox-notice {
	border: 3px solid #36c;       /* Blue */
}
table.imbox-speedy {
	border: 3px solid #b32424;    /* Red */
	background-color: #fee7e6;    /* Pink */
}
table.imbox-delete {
	border: 3px solid #b32424;    /* Red */
}
table.imbox-content {
	border: 3px solid #f28500;    /* Orange */
}
table.imbox-style {
	border: 3px solid #fc3;       /* Yellow */
}
table.imbox-move {
	border: 3px solid #9932cc;    /* Purple */
}
table.imbox-protection {
	border: 3px solid #a2a9b1;    /* Gray-gold */
}
table.imbox-license {
	border: 3px solid #88a;       /* Dark gray */
	background-color: #f7f8ff;    /* Light gray */
}
table.imbox-featured {
	border: 3px solid #cba135;    /* Brown-gold */
}

/* Category message box styles */
table.cmbox {
	margin: 3px 10%;
	border-collapse: collapse;
	border: 1px solid #a2a9b1;
	background-color: #dfe8ff;    /* Default "notice" blue */
	box-sizing: border-box;
}

table.cmbox-notice {
	background-color: #d8e8ff;    /* Blue */
}
table.cmbox-speedy {
	margin-top: 4px;
	margin-bottom: 4px;
	border: 4px solid #b32424;    /* Red */
	background-color: #ffdbdb;    /* Pink */
}
table.cmbox-delete {
	background-color: #ffdbdb;    /* Pink */
}
table.cmbox-content {
	background-color: #ffe7ce;    /* Orange */
}
table.cmbox-style {
	background-color: #fff9db;    /* Yellow */
}
table.cmbox-move {
	background-color: #e4d8ff;    /* Purple */
}
table.cmbox-protection {
	background-color: #efefe1;    /* Gray-gold */
}

/* Other pages message box styles */
table.ombox {
	margin: 4px 10%;
	border-collapse: collapse;
	border: 1px solid #a2a9b1;    /* Default "notice" gray */
	background-color: #f8f9fa;
	box-sizing: border-box;
}

table.ombox-notice {
	border: 1px solid #a2a9b1;    /* Gray */
}
table.ombox-speedy {
	border: 2px solid #b32424;    /* Red */
	background-color: #fee7e6;    /* Pink */
}
table.ombox-delete {
	border: 2px solid #b32424;    /* Red */
}
table.ombox-content {
	border: 1px solid #f28500;    /* Orange */
}
table.ombox-style {
	border: 1px solid #fc3;       /* Yellow */
}
table.ombox-move {
	border: 1px solid #9932cc;    /* Purple */
}
table.ombox-protection {
	border: 2px solid #a2a9b1;    /* Gray-gold */
}

/* Talk page message box styles */
table.tmbox {
	margin: 4px 10%;
	border-collapse: collapse;
	border: 1px solid #c0c090;    /* Default "notice" gray-brown */
	background-color: #f8eaba;
	min-width: 80%;
	box-sizing: border-box;
}
.tmbox.mbox-small {
	min-width: 0;                /* reset the min-width of tmbox above        */
}
.mediawiki .mbox-inside .tmbox { /* For tmboxes inside other templates. The "mediawiki" class ensures that */
	margin: 2px 0;               /* this declaration overrides other styles (including mbox-small above)   */
	width: 100%;                 /* For Safari and Opera */
}
.mbox-inside .tmbox.mbox-small { /* "small" tmboxes should not be small when  */
	line-height: 1.5em;          /* also "nested", so reset styles that are   */
	font-size: 100%;             /* set in "mbox-small" above.                */
}

table.tmbox-speedy {
	border: 2px solid #b32424;    /* Red */
	background-color: #fee7e6;    /* Pink */
}
table.tmbox-delete {
	border: 2px solid #b32424;    /* Red */
}
table.tmbox-content {
	border: 2px solid #f28500;    /* Orange */
}
table.tmbox-style {
	border: 2px solid #fc3;       /* Yellow */
}
table.tmbox-move {
	border: 2px solid #9932cc;    /* Purple */
}
table.tmbox-protection,
table.tmbox-notice {
	border: 1px solid #c0c090;    /* Gray-brown */
}

/* Disambig and set index box styles */
table.dmbox {
    clear: both; 
    margin: 0.9em 1em; 
    border-top: 1px solid #ccc; 
    border-bottom: 1px solid #ccc; 
    background: transparent;
}

/* Footer and header message box styles */
table.fmbox {
	clear: both;
	margin: 0.2em 0;
	width: 100%;
	border: 1px solid #a2a9b1;
	background-color: #f8f9fa;     /* Default "system" gray */
	box-sizing: border-box;
}
table.fmbox-system {
	background-color: #f8f9fa;
}
table.fmbox-warning {
	border: 1px solid #bb7070;  /* Dark pink */
	background-color: #ffdbdb;  /* Pink */
}
table.fmbox-editnotice {
	background-color: transparent;
}
/* Div based "warning" style fmbox messages. */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning,
div.locked-warning {
	clear: both;
	margin: 0.2em 0;
	border: 1px solid #bb7070;
	background-color: #ffdbdb;
	padding: 0.25em 0.9em;
	box-sizing: border-box;
}

/* These mbox-small classes must be placed after all other
   ambox/tmbox/ombox etc classes. "html body.mediawiki" is so
   they override "table.ambox + table.ambox" above. */
html body.mediawiki .mbox-small {   /* For the "small=yes" option. */
	/* @noflip */
	clear: right;
	/* @noflip */
	float: right;
	/* @noflip */
	margin: 4px 0 4px 1em;
	box-sizing: border-box;
	width: 238px;
	font-size: 88%;
	line-height: 1.25em;
}
html body.mediawiki .mbox-small-left {   /* For the "small=left" option. */
	/* @noflip */
	margin: 4px 1em 4px 0;
	box-sizing: border-box;
	overflow: hidden;
	width: 238px;
	border-collapse: collapse;
	font-size: 88%;
	line-height: 1.25em;
}

/* Style for compact ambox */
/* Hide the images */
.compact-ambox table .mbox-image,
.compact-ambox table .mbox-imageright,
.compact-ambox table .mbox-empty-cell {
	display: none;
}
/* Remove borders, backgrounds, padding, etc. */
.compact-ambox table.ambox {
	border: none;
	border-collapse: collapse;
	background-color: transparent;
	margin: 0 0 0 1.6em !important;
	padding: 0 !important;
	width: auto;
	display: block;
}
body.mediawiki .compact-ambox table.mbox-small-left {
	font-size: 100%;
	width: auto;
	margin: 0;
}
/* Style the text cell as a list item and remove its padding */
.compact-ambox table .mbox-text {
	padding: 0 !important;
	margin: 0 !important;
}
.compact-ambox table .mbox-text-span {
	display: list-item;
	line-height: 1.5em;
	list-style-type: square;
	list-style-image: url(/w/skins/MonoBook/resources/images/bullet.svg);
}
.skin-vector .compact-ambox table .mbox-text-span {
	list-style-type: disc;
	list-style-image: url(/w/skins/Vector/images/bullet-icon.svg);
}
/* Allow for hiding text in compact form */
.compact-ambox .hide-when-compact {
	display: none;
}

#siteNotice {
padding-bottom: 10px;
}

header {

 background: #FFF !important;
 border-bottom: 1px solid #CCC;
 height: 100px;
 margin: 0 auto;
 position: relative;
 width: 100%;
 max-width: 1210px;
 padding: 0;

}

body {

 margin-top: 0px;
 min-width: 0px !important;

}

header h1 {

 background: transparent no-repeat left top;
 height: 147px;
 left: 0;
 margin: 0;
 position: absolute;
 top: 0;

}

main-content {

 background: none repeat scroll 0 0 #FFFFFF;
 border-radius: 0px;
 box-shadow: none;
 padding: 0px;
 overflow: hidden;

}

main {

 position: relative;
 padding: 0px;
 margin: 20px auto;
 width: 100%;
 max-width: 1210px;

}

main-content h1 {

 color: #222222;
 text-transform: uppercase;
 letter-spacing: 1px;
 font-size: 28px;
 border-bottom: 1px solid #e1e1e1;

}

wiki-tools h2 {

 color: #222222 !important;
 padding: 0 0 0 10px;

}

/*This CSS code adding by Rahul for responsiveness */


._rstring ._dummylogo{ position:absolute; left:0; top:10px; width: 150px;  display: flex; justify-content: space-between;  align-items:stretch; z-index:999; display:none; }
._rstring ._dummylogo ._nav{ flex-basis: 25%; margin-left:5%;}
._rstring ._dummylogo ._nav svg{width:30px; height:30px; margin-top: 5px;}

._rstring ._dummylogo ._logo{ flex-basis: 70%; height:40px; background-size: 100%;  background-image: url(https://universityinnovation.org/thumb.php?f=UIF-logo-black.png&width=180);}
 
@media only screen and (max-width: 600px) {
	
}

 
@media only screen and (min-width: 600px) {
	
}

 

@media only screen and (max-width: 1200px) {  
._rstring ._dummylogo{ display: flex; }	
 
._rstring #mw-panel { 
    left: -15em; background-color:#FFF;
}
._rstring #mw-panel #p-logo{ display:none;}

._rstring #mw-panel._show {
    left: 0em;
    background-color: #FFF;
    z-index: 10;
    margin-top: 81px;
    box-shadow: 1px 8px 15px #000;     min-width: 216px;
}


._rstring #left-navigation { 
    margin-left: 0; 
    float: right;
}
 ._responsive #p-personal { 
    right: auto; 
}

 ._rstring #right-navigation {
    float: right; 
}

._rstring .mw-body {
    margin-left: 0; 
}
	
	

 ._rstring #firstHeading{font-size:1.4em !important;}
 
  ._rstring .topbanner { 
    min-width: auto !important;  
    margin-left: 0px !important;
} 
._rstring .topbanner .name p span{ font-size:2em !important;}
._rstring .topbanner .name p span>span{ font-size:.5em !important;}

._rstring #mf-pagebanner center table{width: 100%;}
._rstring #mf-pagebanner center table tr td>div{    width: auto !important;     display: block !important;}

._rstring ._responsive big{    font-size: large;   line-height: unset;}

._rstring ._responsive table tr td { font-size: 12px; }
._rstring ._responsive table tr td a{ font-size: 12px; }
._rstring ._responsive table tr td a big{ font-size: 12px; }

._rstring #footer {
    margin-left: 0em; 
}



}

 
@media only screen and (max-width: 992px) {
	
	._rstring ._dummylogo { 
    width: 100%; 
    justify-content: space-between; 
}
._rstring ._dummylogo ._logo { 
    max-width: 100px; 
}

._rstring ._dummylogo ._nav { 
    max-width: 40px;
}
	
	._rstring .mw-body {   margin-left: 0;  margin-top: 65px;  }
    ._rstring #mw-navigation h2 { display:none;  } 
  
  ._rstring ._dummylogo { 
    top: 0px; 
  }

  ._rstring   #p-personal {
    position: relative;
    top: 51px;
    right: auto;
    z-index: auto;
     min-height: 48px;
     height: 48px;
}


._rstring #p-personal ul {
    padding-left: 0;
    position: relative;
    text-align: center;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    padding-bottom: 5px;
    min-height: 48px;
   
}
  ._rstring   #p-personal li {
    float: none;
    margin-left: 0;
    padding-top: 0;
    font-size: 0.75em;
    line-height: 1.16666667em;
    white-space: normal;
    display: inline-block;
    margin: 0 10px;
}

  ._rstring      #pt-notifications-alert .mw-echo-notifications-badge,  ._rstring     #pt-notifications-notice .mw-echo-notifications-badge {
     top: -990px; 
}

 
     
._rstring #mw-panel._show {
    margin-top: 0px;
    z-index: 1000;
    overflow: auto;
    position: fixed;
    height: 100%;
}

._rstring #left-navigation { 
    float: left;
    margin-top: 51px;
}
._rstring #right-navigation {
     float: right;
      margin-top: 51px;
}
     
}


@media only screen and (max-width: 768px) {
	
._rstring .mw-body {
    margin-left: 0;
    margin-top: 100px;
}


._rstring #p-personal { 
    min-height: 82px;
    height: 82px;
}
._rstring #p-personal ul{
    min-height: 82px;
    height: 82px;
}

._rstring #left-navigation { 
    margin-top: 59px;
}
._rstring #right-navigation{
	margin-top: 59px;
}
._rstring #mf-pagebanner center table tr td>div {
    width: auto !important;
    display: block !important;
     padding: 7px !important;
       min-height: 129px !important;
       margin: 0 !important;
}

}

 

/*This CSS code adding by Rahul for responsiveness */