Difference between revisions of "Css/design.css"

(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 7: Line 51:
 
     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;
 +
}
 +
 +
 +
}

Latest revision as of 16:21, 23 June 2016

@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{ 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;
   background-size:13%;

}

  1. 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%; }

  1. main{

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

  1. 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;

}


  1. 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 {

}

  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; }


@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;

}

  1. 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; }


  1. 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%;

}


  1. 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; }


}