Difference between revisions of "Template:JMU Wuerzburg/jmu wuerzburg css"

Line 1: Line 1:
<html>
 
 
/*-------------------------
 
/*-------------------------
 
         Simple reset
 
         Simple reset
Line 6: Line 5:
 
     margin:0;
 
     margin:0;
 
     padding:0;
 
     padding:0;
 +
    border: none;
 
}
 
}
  
Line 293: Line 293:
 
}
 
}
  
            .img-preview-mask {
+
.img-preview-mask {
                width: 100%;
+
    width: 100%;
                height: 100%;
+
    height: 100%;
                position: fixed;
+
    position: fixed;
                top: 0;
+
    top: 0;
                left: 0;
+
    left: 0;
                z-index: 9998;
+
    z-index: 9998;
                background-color: rgba(0,0,0,.5);
+
    background-color: rgba(0,0,0,.5);
            }
+
}
  
            .img-preview-popover {
+
.img-preview-popover {
                position: fixed;
+
    position: fixed;
                z-index: 9999;
+
    z-index: 9999;
            }
+
}

Revision as of 08:48, 16 October 2018

/*-------------------------

       Simple reset

*/
  • {
   margin:0;
   padding:0;
   border: none;

}

/*-------------------------

       General Styles

*/

html{

   background: #fefefe;
   position: relative;
   height: 100%;

}

body{

   font: 14px/1.3 'Segoe UI',Arial, sans-serif;
   min-height: 100%;
   min-width: 1000px;
   box-shadow: inset 0px 0 200px -30px rgba(0,0,0,.75);

}

a, a:visited {

   text-decoration: none;
   outline: none;
   color: #54a6de;

}

a:hover{

   text-decoration: underline;

}

section, footer, nav{

   display: block;

}

p {

   font-size: 14pt;

}

h1, h2, h3, h4, h5, h6, h7, p{

   color: #333333;

}

hr{

   margin: 2em 0;

}


/*----------------------------

       Navigation Menu

*/
  1. colornav{
   padding-top: 1em;

}

  1. colorNav > ul{
   width: 800px; /* Increase when adding more menu items */
   margin: 0 auto 2em auto;

}

  1. colorNav > ul > li{ /* will style only the top level li */
   list-style: none;
   box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
   display: inline-block;
   line-height: 1;
   margin: 1px;
   border-radius: 3px;
   position: relative;

}

  1. colorNav > ul > li > a{
   color:inherit;
   text-decoration:none !important;
   font-size: 24px;
   padding: 25px;

}

  1. colorNav li ul{
   position:absolute;
   list-style:none;
   text-align:center;
   width:180px;
   left:50%;
   margin-left:-90px;
   top:70px;
   font:bold 12px 'Open Sans Condensed', sans-serif;
   /* This is important for the show/hide CSS animation */
   max-height:0px;
   overflow:hidden;
   -webkit-transition:max-height 0.4s linear;
   -moz-transition:max-height 0.4s linear;
   transition:max-height 0.4s linear;

}

  1. colorNav li ul li{
   background-color:#313131;

}

  1. colorNav li ul li a{
   padding:12px;
   color:#fff !important;
   text-decoration:none !important;
   display:block;

}

  1. colorNav li ul li:nth-child(odd){ /* zebra stripes */
   background-color:#363636;

}

  1. colorNav li ul li:hover{
   background-color:#444;

}

  1. colorNav li ul li:first-child{
   border-radius:3px 3px 0 0;
   margin-top:25px;
   position:relative;

}

  1. colorNav li ul li:first-child:before{ /* the pointer tip */
   content:;
   position:absolute;
   width:1px;
   height:1px;
   border:5px solid transparent;
   border-bottom-color:#313131;
   left:50%;
   top:-10px;
   margin-left:-5px;

}

  1. colorNav li ul li:last-child{
   border-bottom-left-radius:3px;
   border-bottom-right-radius:3px;

}

/* This will trigger the CSS */ /* transition animation on hover */

  1. colorNav li:hover ul{
   max-height:400px; /* Increase when adding more dropdown items */

}

.menu > a > img{

   width: 50px;
   height: 50px;

}

.menu > p{

   text-align: center;

}

.menu:hover{

   background: #CCC;

}


/*----------------------------

       Logo Positioning

*/
  1. logo{
   position: relative;
   float: right;
   height: 100px;
   width: 100px;
   margin-right: .5em;
   border-radius: 5px;

}

/*----------------------------

       Footer

*/
  1. footer{
   margin: 3em auto 0 auto;
   width: 80%;
   text-align: center;

}

/*----------------------------

       jQuery Accordion-Anpassung

*/

.ui-state-active{

   background: #CCC;

}

/*----------------------------

       Content Styling

*/

.content{

   width: 80%;
   margin: 0 auto;
   padding: 1em 0 1em 0;

}

.content > img {

   margin: 2em auto;
   display: block;
   width: 80%;

}

.content > h3 {

   margin-top: 2em;

} .content > h3:first-child{

   margin-top: 0;

}

.content h4 {

   margin-top: 1em;
   text-decoration: underline;

}

.content > .figure_with_desc{

   border-style: solid; 
   border-color: #CCC; 
   border-width: 1px; 
   margin: 2em 0; 
   width: 602px;

}

.content > .figure_with_desc > .figure{

   display: block; 
   width: 600px; 
   margin: auto; 
   border: none;

}

.content > .figure_with_desc > .desc_head{

   display: inline-block; 
   width: 55px;
   vertical-align: top;
   text-decoration: underline;

}

.content > .figure_with_desc > .desc{

   display: inline-block; 
   width: 540px;

}

  1. team_members > #accordion > h3 {
   text-align: center;
   font-weight: bold;
   font-size: larger;
   border: 1px solid black;
   border-radius: 5px;
   margin-bottom: .5em;

}

  1. team_members > #accordion > h3:hover {
   background: #CCC;

}

  1. team_members > #accordion > div > img{
   display: inline-block;
   border-radius: 5px;
   width: 300px;

}

  1. team_members > #accordion > div > table{
   display: inline-block;
   width: calc(100% - 310px);
   vertical-align: top;
   padding-bottom: 1em;

}

  1. team_members > #accordion > div:first-child > img{
   display: inline-block;
   border-radius: 5px;
   width: 400px;

}

  1. team_members > #accordion > div:first-child > table{
   display: inline-block;
   width: calc(100% - 310px);
   vertical-align: top;

}

  1. team_members > #accordion > div > table > tbody > tr {
   margin-bottom: 1em;

}

  1. team_members > #accordion > div > table > tbody > tr > td {
   padding-left: 10px;

}

  1. team_members > #accordion > div > table > tbody > tr > th {
   vertical-align: top;
   width: 120px;

}

.img-preview-mask {

   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9998;
   background-color: rgba(0,0,0,.5);

}

.img-preview-popover {

   position: fixed;
   z-index: 9999;

}