Difference between revisions of "Css/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(...")
 
(Replaced content with "body{ margin: 0; padding: 0; height:100%; color: #6b7381; background: #f2f2f2; text-align: left; font-size: 150%; }")
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 {
 
−
color: #aaa;
 
−
text-decoration: none;
 
−
outline: none;
 
−
}
 
−
 
−
a img {
 
−
    border: none;
 
−
}
 
−
 
−
 
−
a:hover,
 
−
a:active {
 
−
color: #333;
 
−
}
 
−
 
−
 
 
body{
 
body{
 
margin: 0;
 
margin: 0;
Line 51: Line 7:
 
     text-align: left;
 
     text-align: left;
 
     font-size: 150%;
 
     font-size: 150%;
−
font-family: 'Lato', Calibri, Arial, sans-serif;
+
−
}
+
−
 
+
−
#ueberschrift
+
−
{
+
−
color: white;
+
−
padding-right: 20px;
+
−
margin-top:5px;
+
−
padding-top: 5px;
+
−
text-align: right;
+
−
    font-size: 150%;
+
−
}
+
−
 
+
−
#header{
+
−
/*margin:20px;*/
+
−
padding:0;
+
−
font-size:230%;
+
−
text-align:center;
+
−
+
−
background-color:#6599FF;
+
−
height:176px;
+
−
}
+
−
 
+
−
#teamlogo{
+
−
background-color:#6599FF;
+
−
height:156px;
+
−
width:100%;
+
−
background: url(../images/bg1.jpg);
+
−
background-repeat: repeat-x;
+
−
    background-position: center;
+
−
    background-size:13%;
+
−
}
+
−
 
+
−
#content{
+
−
-moz-border-radius: 20px;
+
−
-webkit-border-radius: 20px;
+
−
border-radius: 20px;
+
−
margin-top:10px;
+
−
margin-bottom: 2%;
+
−
margin-left: 20%;
+
−
padding: 10px 10px 10px 10px;
+
−
background: white;
+
−
    width:68%;
+
−
height:100%;
+
−
}
+
−
 
+
−
#main{
+
−
padding-left:10%;
+
−
padding-right:10%;
+
−
padding-top:5%;
+
−
padding-bottom:5%;
+
−
}
+
−
#footer{
+
−
    background: #333;
+
−
padding-bottom: 1rem;
+
−
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;
+
−
}
+
−
 
+
−
 
+
−
#global-nav{
+
−
background-color:black;
+
−
width:100%;
+
−
-moz-border-radius: 20px;
+
−
-webkit-border-radius: 20px;
+
−
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:not( :last-child ) > a
+
−
{
+
−
/*border-right: 1px solid white;*/
+
−
}
+
−
nav > ul > li:hover > a,
+
−
nav > ul:not( :hover ) > li.active > a
+
−
{
+
−
background-color: transparent;
+
−
color:yellow;
+
−
-moz-border-radius: 20px;
+
−
-webkit-border-radius: 20px;
+
−
border-radius: 20px;
+
−
}
+
−
 
+
−
 
+
−
/* second level */
+
−
 
+
−
nav li ul
+
−
{
+
−
width:200%;
+
−
-moz-border-radius: 20px;
+
−
-webkit-border-radius: 20px;
+
−
border-radius: 20px;
+
−
background-color: white;
+
−
opacity:0.8;
+
−
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:not( :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;
+
−
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 {
+
−
+
−
}
+
−
 
+
−
#membercontent{
+
−
width:100%;
+
−
}
+
−
#member{
+
−
width:47%;
+
−
float: left;
+
−
margin-left: 10px;
+
−
margin-bottom: 20px;
+
−
background-color: white;
+
−
min-height:250px;
+
−
}
+
−
 
+
−
#member1{
+
−
width:47%;
+
−
float: right;
+
−
margin-left: 10px;
+
−
margin-bottom: 20px;
+
−
background-color: #123;
+
−
min-height:250px;
+
−
}
+
−
 
+
−
#member2{
+
−
width:47%;
+
−
float: left;
+
−
margin-left: 10px;
+
−
margin-bottom: 20px;
+
−
background-color: #123;
+
−
min-height:250px;
+
−
}
+
−
 
+
−
#member3{
+
−
width:47%;
+
−
float: right;
+
−
margin-left: 10px;
+
−
margin-bottom: 20px;
+
−
background-color: white;
+
−
min-height:250px;
+
−
}
+
−
 
+
−
#wrapper {
+
−
width: 100%;
+
−
margin: 0 auto;
+
−
}
+
−
 
+
−
 
+
−
#memberfoto {
+
−
float: left;
+
−
padding: 2px 2px 2px 2px;
+
−
max-width: 200px;
+
−
margin-left: 10px;
+
−
margin-top:10px;
+
−
margin-bottom: 10px;
+
−
}
+
−
 
+
−
#memberfoto1 {
+
−
float: left;
+
−
padding: 2px 2px 2px 2px;
+
−
max-width: 200px;
+
−
margin-left: 10px;
+
−
margin-top:10px;
+
−
margin-bottom: 10px;
+
−
+
−
}
+
−
 
+
−
 
+
−
 
+
−
#membertextfieldgraz {
+
−
width: 50%;
+
−
margin-left: 210px;
+
−
margin-top:10px;
+
−
padding-left:10px;
+
−
padding-top: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 16:02, 23 June 2016

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

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

}