Difference between revisions of "Common/design.css"

(Created page with "@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); @font-face { font-family: 'codropsicons'; src:url('../fonts/codropsicons/codropsicons.eot'); src:url(...")
 
Line 1: Line 1:
−
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
 
−
 
−
@font-face {
 
−
font-family: 'codropsicons';
 
−
src:url('../fonts/codropsicons/codropsicons.eot');
 
−
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
 
−
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
 
−
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
 
−
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
 
−
font-weight: normal;
 
−
font-style: normal;
 
−
}
 
−
 
−
 
−
html {
 
−
  box-sizing: border-box;
 
−
}
 
−
*, ::before, ::after {
 
−
  box-sizing: inherit;
 
−
}
 
−
 
−
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 
−
body, html { font-size: 100%; padding: 0; margin: 0;}
 
−
 
−
 
−
 
−
 
 
a {
 
a {
 
color: #aaa;
 
color: #aaa;
Line 81: Line 54:
 
background-repeat: repeat-x;
 
background-repeat: repeat-x;
 
     background-position: center;
 
     background-position: center;
−
    background-size:13%;
 
 
}
 
}
  
Line 87: Line 59:
 
-moz-border-radius: 20px;
 
-moz-border-radius: 20px;
 
-webkit-border-radius: 20px;
 
-webkit-border-radius: 20px;
−
border-radius: 20px;
 
 
margin-top:10px;
 
margin-top:10px;
 
margin-bottom: 2%;
 
margin-bottom: 2%;
Line 105: Line 76:
 
#footer{
 
#footer{
 
     background: #333;
 
     background: #333;
−
padding-bottom: 1rem;
+
padding-bottom: 5%;
 
color:white;
 
color:white;
 
text-align:center;
 
text-align:center;
Line 134: Line 105:
 
-moz-border-radius: 20px;
 
-moz-border-radius: 20px;
 
-webkit-border-radius: 20px;
 
-webkit-border-radius: 20px;
−
border-radius: 20px;
 
 
margin:0 auto;
 
margin:0 auto;
 
}
 
}
Line 211: Line 181:
 
text-align: center;
 
text-align: center;
 
}
 
}
−
nav > ul > li:not( :last-child ) > a
 
−
{
 
−
/*border-right: 1px solid white;*/
 
−
}
 
 
nav > ul > li:hover > a,
 
nav > ul > li:hover > a,
−
nav > ul:not( :hover ) > li.active > a
+
nav > ul > li.active > a
 
{
 
{
 
background-color: transparent;
 
background-color: transparent;
Line 222: Line 188:
 
-moz-border-radius: 20px;
 
-moz-border-radius: 20px;
 
-webkit-border-radius: 20px;
 
-webkit-border-radius: 20px;
−
border-radius: 20px;
 
 
}
 
}
  
Line 233: Line 198:
 
-moz-border-radius: 20px;
 
-moz-border-radius: 20px;
 
-webkit-border-radius: 20px;
 
-webkit-border-radius: 20px;
−
border-radius: 20px;
 
 
background-color: white;
 
background-color: white;
−
opacity:0.8;
 
 
display: none;
 
display: none;
 
font-size:40%;
 
font-size:40%;
Line 249: Line 212:
 
right: 0;
 
right: 0;
 
}
 
}
−
nav li:not( :first-child ):hover ul
+
nav li:first-child:hover ul
 
{
 
{
 
left: -1px;
 
left: -1px;
Line 262: Line 225:
 
}
 
}
 
nav li ul li a:hover,
 
nav li ul li a:hover,
−
nav li ul:not( :hover ) li.active a
+
nav li ul:not:hover li.active a
 
{
 
{
 
background-color: yellow;
 
background-color: yellow;
 
-moz-border-radius: 20px;
 
-moz-border-radius: 20px;
 
-webkit-border-radius: 20px;
 
-webkit-border-radius: 20px;
−
border-radius: 20px;
 
 
}
 
}
 
 
Line 362: Line 324:
 
margin-bottom: 10px;
 
margin-bottom: 10px;
 
}
 
}
−
 
−
 
−
 
−
@media only screen and (max-width: 70rem),
 
−
only screen and (max-device-width: 40rem) {
 
−
#footer{
 
−
display:none;
 
−
}
 
−
 
−
#global-nav{
 
−
background-color:black;
 
−
width:100%;
 
−
position: fixed;
 
−
 
−
}
 
−
#header{
 
−
/*font-size:200%;
 
−
text-align:center;
 
−
    padding-top: 5px;
 
−
    background-size: 60% 100%;
 
−
height:140px;
 
−
background-repeat: no-repeat;*/
 
−
display:none;
 
−
}
 
−
 
−
#content{
 
−
margin:2px 2px 2px 2px;
 
−
width:100%;
 
−
padding:0em;
 
−
}
 
−
 
−
#member{
 
−
background-color: white;
 
−
width:95%;
 
−
float:none;
 
−
padding-bottom:10px;
 
−
}
 
−
#member1{
 
−
background-color: #123;
 
−
float:none;
 
−
width:95%;
 
−
padding-bottom:10px;
 
−
}
 
−
#member2{
 
−
background-color: white;
 
−
width:95%;
 
−
float:none;
 
−
padding-bottom:10px;
 
−
}
 
−
#member3{
 
−
float:none;
 
−
background-color: #123;
 
−
width:95%;
 
−
padding-bottom:10px;
 
−
}
 
−
 
−
 
−
#wrapper {
 
−
width: 100%;
 
−
margin: 0 auto;
 
−
background-color: #D2D2EF;
 
−
 
−
}
 
−
 
−
#memberfoto {
 
−
float:left;
 
−
width:90%;
 
−
 
−
margin-left: 10px;
 
−
margin-top:10px;
 
−
margin-bottom: 10px;
 
−
padding-right:10px;
 
−
padding-top:10px;
 
−
 
−
}
 
−
#memberfoto img {
 
−
width: 100%;
 
−
 
−
}
 
−
 
−
 
−
#memberfoto1 {
 
−
float: right;
 
−
padding: 2px 2px 2px 2px;
 
−
max-width: 200px;
 
−
margin-left: 10px;
 
−
margin-top:10px;
 
−
margin-bottom: 10px;
 
−
 
−
}
 
−
 
−
#membertextfieldgraz {
 
−
width:80%;
 
−
margin-left: 10px;
 
−
margin-top:10px;
 
−
padding-left:10px;
 
−
padding-top:10px;
 
−
margin-bottom: 10px;
 
−
}
 
−
 
−
#teamlogo{
 
−
display:none;
 
−
}
 
−
 
−
    html
 
−
{
 
−
font-size: 55%; /* 12 */
 
−
}
 
−
 
−
nav
 
−
{
 
−
position: relative;
 
−
top: 0;
 
−
left: 0px;
 
−
}
 
−
nav > a
 
−
{
 
−
width: 1.125em; /* 50 */
 
−
height: 1.125em; /* 50 */
 
−
text-align: left;
 
−
text-indent: -9999px;
 
−
background-color: black;
 
−
 
−
}
 
−
nav > a:before,
 
−
nav > a:after
 
−
{
 
−
position: absolute;
 
−
border: 2px solid #fff;
 
−
top: 35%;
 
−
left: 25%;
 
−
right: 25%;
 
−
content: '';
 
−
 
−
}
 
−
nav > a:after
 
−
{
 
−
top: 60%;
 
−
}
 
−
 
−
nav:not( :target ) > a:first-of-type,
 
−
nav:target > a:last-of-type
 
−
{
 
−
display: block;
 
−
}
 
−
 
−
 
−
/* first level */
 
−
 
−
nav > ul
 
−
{
 
−
 
−
height: auto;
 
−
display: none;
 
−
position: absolute;
 
−
left: 0;
 
−
right: 0;
 
−
background-color:#6599FF;
 
−
 
−
 
−
}
 
−
nav:target > ul
 
−
{
 
−
 
−
width: 100%;
 
−
display: block;
 
−
}
 
−
nav > ul > li
 
−
{
 
−
text-align:center;
 
−
/*background: url("../images/8.jpg");*/
 
−
background-size:100% 100%;
 
−
width: 100%;
 
−
float: none;
 
−
}
 
−
nav > ul > li > a
 
−
{
 
−
font-size:20px;
 
−
height: left;
 
−
padding-left: 30%;
 
−
text-align: left;
 
−
}
 
−
nav > ul > li:not( :last-child ) > a
 
−
{
 
−
 
−
border-right: none;
 
−
width:100%;
 
−
border-bottom: 1px solid white;
 
−
}
 
−
 
−
nav > ul > li > a > img
 
−
{
 
−
height: 20%;
 
−
max-width:30px;
 
−
width: 20%;
 
−
max-height:30px;
 
−
text-align: left;
 
−
padding: 0 0.633em; /* 20 (24) */
 
−
}
 
−
 
−
 
−
/* second level */
 
−
 
−
nav li ul
 
−
{
 
−
position: static;
 
−
padding: 0.25em;
 
−
padding-top: 0;
 
−
height:100%;
 
−
width:98%;
 
−
-moz-border-radius: 20px;
 
−
-webkit-border-radius: 20px;
 
−
border-radius: 20px;
 
−
background-color: #124;
 
−
opacity:0.70;
 
−
display: none;
 
−
font-size:80%;
 
−
 
−
list-style: none;
 
−
top: 100%;
 
−
}
 
−
nav li:hover ul
 
−
{
 
−
display: none;
 
−
left: 0;
 
−
right: 0;
 
−
}
 
−
nav li:not( :first-child ):hover ul
 
−
{
 
−
left: -1px;
 
−
}
 
−
nav li ul a
 
−
{
 
−
font-size: 1.15em;
 
−
border-top: 1px solid white;
 
−
padding: 0.3em;
 
−
}
 
−
nav li ul li a:hover,
 
−
nav li ul:not( :hover ) li.active a
 
−
{
 
−
background-color: #eee;
 
−
-moz-border-radius: 7px;
 
−
-webkit-border-radius: 7px;
 
−
border-radius: 7px;
 
−
}
 
−
 
−
 
−
}
 

Revision as of 17:22, 23 June 2016

a { color: #aaa; text-decoration: none; outline: none; }

a img { 

   border: none;

}


a:hover, a:active { color: #333; }


body{ margin: 0; padding: 0; height:100%; color: #6b7381; background: #f2f2f2; 

   text-align: left;
   font-size: 150%;

font-family: 'Lato', Calibri, Arial, sans-serif; }

  1. ueberschrift

{ color: white; padding-right: 20px; margin-top:5px; padding-top: 5px; text-align: right; 

   font-size: 150%;

}

  1. header{

/*margin:20px;*/ padding:0; font-size:230%; text-align:center;

background-color:#6599FF; height:176px; }

  1. teamlogo{

background-color:#6599FF; height:156px; width:100%; background: url(../images/bg1.jpg); background-repeat: repeat-x; 

   background-position: center;

}

  1. content{

-moz-border-radius: 20px; -webkit-border-radius: 20px; margin-top:10px; margin-bottom: 2%; margin-left: 20%; padding: 10px 10px 10px 10px; background: white; 

   width:68%;

height:100%; }

  1. main{

padding-left:10%; padding-right:10%; padding-top:5%; padding-bottom:5%; }

  1. footer{
   background: #333;

padding-bottom: 5%; color:white; text-align:center; 

   clear:left;

} .floatLeft{ background: url(../images/bg.jpg); 

   float:left;

} .sidebar-left{ 

   background: url(../images/bg.jpg);
   width: 20%;
}

.copyright {font-size : 9px; font-family : courier new;} p {font-size : 20px}


img { 

   max-width: 100%;
   height: auto;

}


  1. global-nav{

background-color:black; width:100%; -moz-border-radius: 20px; -webkit-border-radius: 20px; margin:0 auto; }


nav {

margin: 0 auto; width: 100%; /* 1000 */ font-family: 'Open Sans', sans-serif; font-weight: 100;

}

nav > a { display: none; }

nav li {

position: relative; } nav li a { color: white; display: block; } nav li a:active { background-color: yellow !important; }

nav span:after { width: 0; height: 0; border: 0.313em solid transparent; /* 5 */ border-bottom: none; border-top-color: white; content: ; vertical-align: middle; display: inline-block; position: relative; right: -0.313em; /* 5 */ }

/* first level */

nav > ul {

margin:0 auto; padding:0px; height: 2.65em; /* 60 */ background-color: transparent; } nav > ul > li { width: 11%; height: 100%; float: left; list-style:none;

} nav > ul > li > a { text-decoration: none; display:block; height: 100%;

font-size: 0.8em; /* 24 */ line-height: 1.8em; /* 60 (24) */ text-align: center; } nav > ul > li:hover > a, nav > ul > li.active > a { background-color: transparent; color:yellow; -moz-border-radius: 20px; -webkit-border-radius: 20px; }


/* second level */

nav li ul { width:200%; -moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: white; display: none; font-size:40%; color: black; list-style: none; position: absolute; top: 100%; } nav li:hover ul { display: block; left: 0; right: 0; } nav li:first-child:hover ul { left: -1px; } nav li ul a { height:80%; font-size: 1.25em; /* 20 */ border-top: 1px solid white; color:black; padding: 0.3em; /* 15 (20) */ } nav li ul li a:hover, nav li ul:not:hover li.active a { background-color: yellow; -moz-border-radius: 20px; -webkit-border-radius: 20px; }

nav > ul > li > a > img { height: auto; width: auto; max-height:500px; max-width:200px; padding: 0 0.633em; /* 20 (24) */ } /* Team */

.teamfoto {

}

.teamtext {

}

  1. membercontent{

width:100%; }

  1. member{

width:47%; float: left; margin-left: 10px; margin-bottom: 20px; background-color: white; min-height:250px; }

  1. member1{

width:47%; float: right; margin-left: 10px; margin-bottom: 20px; background-color: #123; min-height:250px; }

  1. member2{

width:47%; float: left; margin-left: 10px; margin-bottom: 20px; background-color: #123; min-height:250px; }

  1. member3{

width:47%; float: right; margin-left: 10px; margin-bottom: 20px; background-color: white; min-height:250px; }

  1. wrapper {

width: 100%; margin: 0 auto; }


  1. memberfoto {

float: left; padding: 2px 2px 2px 2px; max-width: 200px; margin-left: 10px; margin-top:10px; margin-bottom: 10px; }

  1. memberfoto1 {

float: left; padding: 2px 2px 2px 2px; max-width: 200px; margin-left: 10px; margin-top:10px; margin-bottom: 10px;

}


  1. membertextfieldgraz {

width: 50%; margin-left: 210px; margin-top:10px; padding-left:10px; padding-top:10px; margin-bottom: 10px; }