Difference between revisions of "Template:NYMU-sheet"

 
(182 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<style>
 
  
−
#panel
+
<link href='https://fonts.googleapis.com/css?family=Product+Sans' rel='stylesheet' type='text/css'>
 +
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
 +
 
 +
<style type="text/css" rel="stylesheet">
 +
 
 +
@media screen and (min-width: 300px) and (max-width: 1000px){
 +
 
 +
#panelcomputer{display:none;}
 +
 
 +
#panelsmartphone1
 
{
 
{
 
     z-index: 100;
 
     z-index: 100;
 
     position: fixed;
 
     position: fixed;
−
     height: 40px;
+
     height: 38px;
 
     width: 100%;
 
     width: 100%;
 
     left: 0px;
 
     left: 0px;
−
     top: 17px;
+
     top: 40px;
−
     background-color: #303030;
+
     background-color: #FFFFFF;
 +
    font-family: 'Product Sans', Arial, sans-serif;
 +
    border-bottom: 1px solid #999;
 
}
 
}
  
−
.centered-list
+
#panelsmartphone2
 +
{
 +
    z-index: 90;
 +
    position: fixed;
 +
    height: 38px;
 +
    width: 100%;
 +
    left: 0px;
 +
    top: 40px;
 +
    background-color: #FFFFFF;
 +
    font-family: 'Product Sans', Arial, sans-serif;
 +
    border-bottom: 1px solid #999;
 +
}
 +
 
 +
#centered-list1
 
{
 
{
 
     text-align: center;
 
     text-align: center;
−
     width: 95%;
+
     width: 100%;
−
     margin: auto;
+
     margin: 0px;
 +
    margin-left:1.4px;
 
}
 
}
  
−
#panel-ul
+
#centered-list2
 
{
 
{
 +
    text-align: center;
 +
    width: 100%;
 
     margin: 0px;
 
     margin: 0px;
 +
    margin-left:1.4px;
 +
}
 +
 +
 +
#panel-ul
 +
{
 +
    margin-left: -3px;
 +
    margin-right: 0px;
 +
    margin-top: 0px;
 +
    margin-bottom: 0px;
 +
    padding: 0px;
 +
    list-style-type: none;
 +
    display: inline-block;
 +
}
 +
 +
#panel-ul111
 +
{
 +
    margin-left: -3px;
 +
    margin-right: 0px;
 +
    margin-top: 0px;
 +
    margin-bottom: 0px;
 +
    padding: 0px;
 +
    list-style-type: none;
 +
    display: inline-block;
 +
}
 +
 +
#panel-ul222
 +
{
 +
    margin-left: -3px;
 +
    margin-right: 0px;
 +
    margin-top: 0px;
 +
    margin-bottom: 0px;
 +
    padding: 0px;
 +
    list-style-type: none;
 +
    display: inline-block;
 +
}
 +
 +
#panel-ul333
 +
{
 +
    margin-left: -3px;
 +
    margin-right: 0px;
 +
    margin-top: 0px;
 +
    margin-bottom: 0px;
 +
    padding: 0px;
 +
    list-style-type: none;
 +
    display: inline-block;
 +
}
 +
 +
#panel-ul444
 +
{
 +
    margin-left: -3px;
 +
    margin-right: 0px;
 +
    margin-top: 0px;
 +
    margin-bottom: 0px;
 +
    padding: 0px;
 +
    list-style-type: none;
 +
    display: inline-block;
 +
}
 +
 +
#panel-ul555
 +
{
 +
    margin-left: -3px;
 +
    margin-right: 0px;
 +
    margin-top: 0px;
 +
    margin-bottom: 0px;
 
     padding: 0px;
 
     padding: 0px;
 
     list-style-type: none;
 
     list-style-type: none;
Line 30: Line 121:
 
#panel-ul li
 
#panel-ul li
 
{
 
{
−
display: inline-block;
+
    display: inline-block;
−
     margin: 0px;
+
    top:0px;
−
     padding: 0px 20px;
+
    padding: 0;
 +
    padding: 0px 0px;
 +
     margin: 0;
 +
    float: left;
 +
    border-right: 1px solid #999;
 +
    border-left: 1px solid #999;
 +
}
 +
 
 +
#panel-ul111 li
 +
{
 +
    display: inline-block;
 +
    top:0px;
 +
    padding: 0;
 +
     padding: 0px 0px;
 +
    margin: 0;
 +
    float: left;
 +
    border-right: 1px solid #999;
 +
}
 +
 
 +
#panel-ul222 li
 +
{
 +
    display: inline-block;
 +
    top:0px;
 +
    padding: 0;
 +
    padding: 0px 0px;
 +
    padding-left: -3px;
 +
    padding-right: -3px;
 +
    margin: 0;
 +
    float: left;
 +
    border-right: 1px solid #999;
 +
}
 +
 
 +
#panel-ul333 li
 +
{
 +
    display: inline-block;
 +
    top:0px;
 +
    padding: 0px 0px;
 +
    padding: 0;
 +
    margin: 0;
 +
    float: left;
 +
    border-right: 1px solid #999;
 +
    border-left: 1px solid #999;
 +
}
 +
 
 +
#panel-ul444 li
 +
{
 +
    display: inline-block;
 +
    top:0px;
 +
    padding: 0px 0px;
 +
    padding: 0;
 +
    margin: 0;
 +
    float: left;
 +
    border-right: 1px solid #999;
 +
}
 +
 
 +
#panel-ul555 li
 +
{
 +
    display: inline-block;
 +
    top:0px;
 +
    padding: 0px 0px;
 +
    padding: 0;
 +
    margin: 0;
 +
    float: left;
 +
    border-right: 1px solid #999;
 
}
 
}
  
 
#panel-ul li a
 
#panel-ul li a
 
{
 
{
−
     color: white;
+
     color: #FFFFFF;
 
     text-decoration: none;
 
     text-decoration: none;
 
     margin: 0px;
 
     margin: 0px;
Line 43: Line 197:
 
}
 
}
  
−
#panel-ul-logo
+
#panel-ul111 li a
 
{
 
{
−
     display: inline-block;
+
     color: #FFFFFF;
−
     margin: 0;
+
    text-decoration: none;
 +
     margin: 0px;
 +
    padding: 0px;
 
}
 
}
  
−
#panel-ul-logo img
+
#panel-ul222 li a
 
{
 
{
−
     vertical-align: middle;
+
     color: #FFFFFF;
−
     width: 112px;
+
    text-decoration: none;
−
     height: 40px;
+
    margin: 0px;
 +
    padding: 0px;
 +
}
 +
 
 +
#panel-ul333 li a
 +
{
 +
    color: #FFFFFF;
 +
    text-decoration: none;
 +
    margin: 0px;
 +
    padding: 0px;
 +
}
 +
 
 +
#panel-ul444 li a
 +
{
 +
    color: #FFFFFF;
 +
    text-decoration: none;
 +
    margin: 0px;
 +
    padding: 0px;
 +
}
 +
 
 +
#panel-ul555 li a
 +
{
 +
    color: #FFFFFF;
 +
    text-decoration: none;
 +
     margin: 0px;
 +
     padding: 0px;
 
}
 
}
  
Line 66: Line 247:
 
}
 
}
  
 +
#panel-ul111 li:hover > a, #panel-ul-logo:hover
 +
{
 +
    text-decoration: none;
 +
    transition: opacity 0.2s ease;
 +
    -webkit-transition: opacity 0.3s ease;
 +
    -moz-transition: opacity 0.3s ease;
 +
    -o-transition: opacity 0.3s ease;
 +
    opacity: 0.65;
 +
}
  
−
#panel-ul li
+
#panel-ul222 li:hover > a, #panel-ul-logo:hover
 
{
 
{
−
margin: 0;
+
    text-decoration: none;
−
padding: 0;
+
    transition: opacity 0.2s ease;
−
float: left;
+
    -webkit-transition: opacity 0.3s ease;
−
border-right: 1px solid #999;
+
    -moz-transition: opacity 0.3s ease;
 +
    -o-transition: opacity 0.3s ease;
 +
    opacity: 0.65;
 
}
 
}
 +
 +
#panel-ul333 li:hover > a, #panel-ul-logo:hover
 +
{
 +
    text-decoration: none;
 +
    transition: opacity 0.2s ease;
 +
    -webkit-transition: opacity 0.3s ease;
 +
    -moz-transition: opacity 0.3s ease;
 +
    -o-transition: opacity 0.3s ease;
 +
    opacity: 0.65;
 +
}
 +
 +
#panel-ul444 li:hover > a, #panel-ul-logo:hover
 +
{
 +
    text-decoration: none;
 +
    transition: opacity 0.2s ease;
 +
    -webkit-transition: opacity 0.3s ease;
 +
    -moz-transition: opacity 0.3s ease;
 +
    -o-transition: opacity 0.3s ease;
 +
    opacity: 0.65;
 +
}
 +
 +
#panel-ul555 li:hover > a, #panel-ul-logo:hover
 +
{
 +
    text-decoration: none;
 +
    transition: opacity 0.2s ease;
 +
    -webkit-transition: opacity 0.3s ease;
 +
    -moz-transition: opacity 0.3s ease;
 +
    -o-transition: opacity 0.3s ease;
 +
    opacity: 0.65;
 +
}
 +
 
#panel-ul li a
 
#panel-ul li a
 
{
 
{
 
padding: 10px 15px;
 
padding: 10px 15px;
 
display: block;
 
display: block;
−
color: #fff;
+
color:#000000;
 
text-decoration: none;
 
text-decoration: none;
 
}
 
}
 +
 +
#panel-ul111 li a
 +
{
 +
padding: 10px 15px;
 +
display: block;
 +
color:#000000;
 +
text-decoration: none;
 +
}
 +
 +
#panel-ul222 li a
 +
{
 +
padding: 10px 15px;
 +
display: block;
 +
color:#000000;
 +
text-decoration: none;
 +
}
 +
 +
#panel-ul333 li a
 +
{
 +
padding: 10px 15px;
 +
display: block;
 +
color:#000000;
 +
text-decoration: none;
 +
}
 +
 +
#panel-ul444 li a
 +
{
 +
padding: 10px 15px;
 +
display: block;
 +
color:#000000;
 +
text-decoration: none;
 +
}
 +
 +
 +
#panel-ul555 li a
 +
{
 +
padding: 10px 15px;
 +
display: block;
 +
color:#000000;
 +
text-decoration: none;
 +
}
 +
 
#panel-ul li:hover ul
 
#panel-ul li:hover ul
 
{
 
{
Line 88: Line 353:
 
position: absolute;
 
position: absolute;
 
width: 100px;
 
width: 100px;
−
color: #303030;
+
color:#303030;
 +
}
 +
 
 +
 
 +
#panel-ul111 li:hover ul
 +
{
 +
display: block;
 +
margin: 0;
 +
list-style: none;
 +
position: absolute;
 +
width: 100px;
 +
color:#303030;
 +
}
 +
 
 +
#panel-ul222 li:hover ul
 +
{
 +
display: block;
 +
margin: 0;
 +
list-style: none;
 +
position: absolute;
 +
width: 100px;
 +
color:#303030;
 +
}
 +
 
 +
#panel-ul333 li:hover ul
 +
{
 +
display: block;
 +
margin: 0;
 +
list-style: none;
 +
position: absolute;
 +
width: 100px;
 +
color:#303030;
 +
}
 +
 
 +
#panel-ul444 li:hover ul
 +
{
 +
display: block;
 +
margin: 0;
 +
list-style: none;
 +
position: absolute;
 +
width: 100px;
 +
color:#303030;
 +
}
 +
 
 +
#panel-ul555 li:hover ul
 +
{
 +
display: block;
 +
margin: 0;
 +
list-style: none;
 +
position: absolute;
 +
width: 100px;
 +
color:#303030;
 
}
 
}
  
 
#panel-ul li:hover
 
#panel-ul li:hover
 
{
 
{
−
color: #FFFFFF;
+
color:#CCCCCC;
−
background-color: #000000;
+
background-color:#CCCCCC;
 +
}
 +
 
 +
 
 +
#panel-ul111 li:hover
 +
{
 +
color:#CCCCCC;
 +
background-color:#CCCCCC;
 +
}
 +
 
 +
#panel-ul222 li:hover
 +
{
 +
color:#CCCCCC;
 +
background-color:#CCCCCC;
 +
}
 +
 
 +
#panel-ul333 li:hover
 +
{
 +
color:#CCCCCC;
 +
background-color:#CCCCCC;
 +
}
 +
 
 +
#panel-ul444 li:hover
 +
{
 +
color:#CCCCCC;
 +
background-color:#CCCCCC;
 +
}
 +
 
 +
#panel-ul555 li:hover
 +
{
 +
color:#CCCCCC;
 +
background-color:#CCCCCC;
 
}
 
}
  
 
/*Submenus are not displayed as default*/
 
/*Submenus are not displayed as default*/
 +
 
#panel-ul li ul
 
#panel-ul li ul
 
{
 
{
 
display: none;
 
display: none;
−
padding-top:15px;
+
padding-top: 15px;
−
margin-left: 10px;
+
margin-left: 0px;
 +
}
 +
 
 +
#panel-ul111 li ul
 +
{
 +
display: none;
 +
padding-top: 15px;
 +
margin-left: 0px;
 +
}
 +
 
 +
#panel-ul222 li ul
 +
{
 +
display: none;
 +
padding-top: 15px;
 +
margin-left: 0px;
 +
}
 +
 
 +
#panel-ul333 li ul
 +
{
 +
display: none;
 +
padding-top: 15px;
 +
margin-left: 0px;
 +
}
 +
 
 +
#panel-ul444 li ul
 +
{
 +
display: none;
 +
padding-top: 15px;
 +
margin-left: 0px;
 +
}
 +
 
 +
#panel-ul555 li ul
 +
{
 +
display: none;
 +
padding-top: 15px;
 +
margin-left: 0px;
 
}
 
}
  
 
/*Submenus are displayed when hovering the menu button */
 
/*Submenus are displayed when hovering the menu button */
 +
 
#panel-ul li:hover ul
 
#panel-ul li:hover ul
 
{
 
{
Line 115: Line 499:
 
margin-top:-11px;
 
margin-top:-11px;
 
  }
 
  }
 +
 +
#panel-ul111 li:hover ul
 +
{
 +
/*display: inline-block; */
 +
display: block;
 +
position: absolute;
 +
float:right;
 +
margin-left:0px;
 +
margin-top:-11px;
 +
}
 +
 +
#panel-ul222 li:hover ul
 +
{
 +
/*display: inline-block; */
 +
display: block;
 +
position: absolute;
 +
float:right;
 +
margin-left:-29px;
 +
margin-top:-11px;
 +
}
 +
 +
 +
#panel-ul333 li:hover ul
 +
{
 +
/*display: inline-block; */
 +
display: block;
 +
position: absolute;
 +
float:right;
 +
margin-left:-1px;
 +
margin-top:-11px;
 +
}
 +
 +
#panel-ul444 li:hover ul
 +
{
 +
/*display: inline-block; */
 +
display: block;
 +
position: absolute;
 +
float:right;
 +
margin-left:-20.4px;
 +
margin-top:-11px;
 +
}
 +
 +
#panel-ul555 li:hover ul
 +
{
 +
/*display: inline-block; */
 +
display: block;
 +
position: absolute;
 +
float:right;
 +
margin-left:-63px;
 +
margin-top:-11px;
 +
}
 +
  
 
/*Style the submenu buttons*/
 
/*Style the submenu buttons*/
 +
 
#panel-ul li ul li
 
#panel-ul li ul li
 
{
 
{
−
background-color: #303030;  
+
background-color:#FFFFFF;  
 
padding-left:2px;
 
padding-left:2px;
 
padding-right:2px;
 
padding-right:2px;
 
padding-top:1px;
 
padding-top:1px;
 
padding-bottom: 4px;
 
padding-bottom: 4px;
−
         margin-top:-4px;
+
         margin-top:-5px;
−
color: #FFFFFF;
+
color:#999999;
−
width: 200px;
+
width: 120px;
−
height:40px;
+
height:38px;
 +
border-bottom:1px solid #999;
 +
border-top:1px solid #999;
 +
border-left:1px solid #999;
 
}
 
}
  
 +
#panel-ul111 li ul li
 +
{
 +
background-color:#FFFFFF;
 +
padding-left:2px;
 +
padding-right:2px;
 +
padding-top:1px;
 +
padding-bottom: 4px;
 +
        margin-top:-5px;
 +
color:#999999;
 +
width: 120px;
 +
height:38px;
 +
border-bottom:1px solid #999;
 +
border-top:1px solid #999;
 +
border-left:1px solid #999;
 +
}
  
 +
#panel-ul222 li ul li
 +
{
 +
background-color:#FFFFFF;
 +
padding-left:2px;
 +
padding-right:2px;
 +
padding-top:1px;
 +
padding-bottom: 4px;
 +
        margin-top:-5px;
 +
color:#999999;
 +
width: 120px;
 +
height:38px;
 +
border-bottom:1px solid #999;
 +
border-top:1px solid #999;
 +
border-left:1px solid #999;
 +
}
 +
 +
#panel-ul333 li ul li
 +
{
 +
background-color:#FFFFFF;
 +
padding-left:2px;
 +
padding-right:2px;
 +
padding-top:1px;
 +
padding-bottom: 4px;
 +
        margin-top:-5px;
 +
color:#999999;
 +
width: 120px;
 +
height:38px;
 +
border-bottom:1px solid #999;
 +
border-top:1px solid #999;
 +
border-left:1px solid #999;
 +
}
 +
 +
#panel-ul444 li ul li
 +
{
 +
background-color:#FFFFFF;
 +
padding-left:2px;
 +
padding-right:2px;
 +
padding-top:1px;
 +
padding-bottom: 4px;
 +
        margin-top:-5px;
 +
color:#999999;
 +
width: 120px;
 +
height:38px;
 +
border-bottom:1px solid #999;
 +
border-top:1px solid #999;
 +
border-left:1px solid #999;
 +
}
 +
 +
#panel-ul555 li ul li
 +
{
 +
background-color:#FFFFFF;
 +
padding-left:2px;
 +
padding-right:2px;
 +
padding-top:1px;
 +
padding-bottom: 4px;
 +
        margin-top:-5px;
 +
color:#999999;
 +
width: 120px;
 +
height:38px;
 +
border-bottom:1px solid #999;
 +
border-top:1px solid #999;
 +
border-left:1px solid #999;
 +
}
  
 
/**/
 
/**/
  
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
−
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 
body {background-color:white; }
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_inside {margin-left: 20px; margin-bottom: 0px; width:100%;}#top_menu_14{height:40px;}
  
 +
/**/
 +
}
 +
 +
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
 +
 +
@media screen and (min-width: 1000px){
 +
 +
#panelsmartphone1{display:none;}
 +
#panelsmartphone2{display:none;}
 +
 +
 +
#panelcomputer
 +
{
 +
    z-index: 100;
 +
    position: fixed;
 +
    height: 38px;
 +
    width: 100%;
 +
    left: 0px;
 +
    top: 20px;
 +
    background-color: #FFFFFF;
 +
    font-family: 'Product Sans', Arial, sans-serif;
 +
    border-bottom: 1px solid #999;
 +
}
 +
 +
#centered-list
 +
{
 +
    text-align: center;
 +
    width: 100%;
 +
    margin: 0px;
 +
}
 +
 +
#panel-ul
 +
{
 +
    margin: 0px;
 +
    padding: 0px;
 +
    list-style-type: none;
 +
    display: inline-block;
 +
}
 +
 +
#panel-ul li
 +
{
 +
    display: inline-block;
 +
    top:0px;
 +
    padding: 0px 20px;
 +
    padding:0;
 +
    margin: 0;
 +
    float: left;
 +
    border-right: 1px solid #999;
 +
}
 +
 +
#panel-ul li a
 +
{
 +
    color: #FFFFFF;
 +
    text-decoration: none;
 +
    margin: 0px;
 +
    padding: 0px;
 +
}
 +
 +
#panel-ul-logo
 +
{
 +
    display: inline-block;
 +
    margin: 0;
 +
}
 +
 +
#panel-ul li:hover > a, #panel-ul-logo:hover
 +
{
 +
    text-decoration: none;
 +
    transition: opacity 0.2s ease;
 +
    -webkit-transition: opacity 0.3s ease;
 +
    -moz-transition: opacity 0.3s ease;
 +
    -o-transition: opacity 0.3s ease;
 +
    opacity: 0.65;
 +
}
 +
 +
#panel-ul li a
 +
{
 +
padding: 10px 15px;
 +
display: block;
 +
color:#000000;
 +
text-decoration: none;
 +
}
 +
 +
#panel-ul li:hover ul
 +
{
 +
display: block;
 +
margin: 0;
 +
list-style: none;
 +
position: absolute;
 +
width: 100px;
 +
color:#303030;
 +
}
 +
 +
#panel-ul li:hover
 +
{
 +
color:#CCCCCC;
 +
background-color:#CCCCCC;
 +
}
 +
 +
/*Submenus are not displayed as default*/
 +
#panel-ul li ul
 +
{
 +
display: none;
 +
padding-top: 15px;
 +
margin-left: 0px;
 +
}
 +
 +
/*Submenus are displayed when hovering the menu button */
 +
#panel-ul li:hover ul
 +
{
 +
/*display: inline-block; */
 +
display: block;
 +
position: absolute;
 +
float:right;
 +
margin-left:-1px;
 +
margin-top:-11px;
 +
}
 +
 +
/*Style the submenu buttons*/
 +
#panel-ul li ul li
 +
{
 +
background-color:#FFFFFF;
 +
padding-left:2px;
 +
padding-right:2px;
 +
padding-top:1px;
 +
padding-bottom: 4px;
 +
        margin-top:-5px;
 +
color:#999999;
 +
width: 200px;
 +
height:38px;
 +
border-bottom:1px solid #999;
 +
border-top:1px solid #999;
 +
border-left:1px solid #999;
 +
}
  
 
/**/
 
/**/
 +
 +
#sideMenu, #top_title {display:none;}
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}#top_menu_14{height:20px;}
 +
 +
/**/
 +
}
  
 
</style>
 
</style>
 +
 
</html>
 
</html>

Latest revision as of 21:12, 17 October 2016