Team:UNITN-Trento/CSS/Parts

From 2013.igem.org

(Difference between revisions)
 
(24 intermediate revisions not shown)
Line 3: Line 3:
margin: 0 auto;
margin: 0 auto;
padding: 0;
padding: 0;
-
vertical-align: top;
 
-
}
 
-
 
-
.tn-parts-container .menu {
 
-
display: inline-block;
 
-
 
-
height: 300px;
 
-
width: 200px;
 
-
 
-
margin: 10px;
 
-
 
-
/*background-color: #989898;*/
 
-
 
vertical-align: top;
vertical-align: top;
}
}
Line 22: Line 9:
display: inline-block;
display: inline-block;
-
width: 725px;
+
width: 715px;
margin: 0 10px 10px 10px;
margin: 0 10px 10px 10px;
Line 34: Line 21:
display: block;
display: block;
 +
    margin-left: 10px;
margin-top: 0;
margin-top: 0;
margin-bottom: 30px;
margin-bottom: 30px;
-
width: 615px;
+
    min-height: 300px;
 +
width: 830px;
-
/*background: #323232;*/
 
vertical-align: top;
vertical-align: top;
-
background-color: rgba(84,168,77,.8);
+
background-color: rgb(32,86,54);
 +
    background-image: url( https://static.igem.org/mediawiki/2013/9/91/Tn-2013-boxbg-Onda-Watermelon.png);
border: 5px solid white;
border: 5px solid white;
-
border-radius: 1em;
 
box-shadow: 2px 2px 4px #323232;
box-shadow: 2px 2px 4px #323232;
 +
color: white;
}
}
.tn-parts-container .content .box .label {
.tn-parts-container .content .box .label {
position: absolute;
position: absolute;
-
top: 0;
+
top: 10px;
-
right: -100px;
+
right: -85px;
-
height: 200px;
+
height: 100px;
-
width: 100px;
+
width: 75px;
 +
 
 +
    background: rgb(130, 20, 16);
 +
    border: 5px solid white;
 +
    border-left: 0;
 +
    border-top-right-radius: 1em;
 +
    border-bottom-right-radius: 1em;
 +
    box-shadow: 2px 2px 4px #323232;
 +
}
 +
 
 +
.tn-parts-container .content .box #label1 {
 +
background-image: url(https://static.igem.org/mediawiki/2013/9/9b/Tn-2013-parts-Eth-label.png);
 +
}
 +
 
 +
.tn-parts-container .content .box #label2 {
 +
background-image: url(https://static.igem.org/mediawiki/2013/5/52/Tn-2013-partsMesa-label.png);
 +
}
 +
 
 +
.tn-parts-container .content .box #label3 {
 +
background-image: url(https://static.igem.org/mediawiki/2013/0/0d/Tn-2013-parts-Blue-label.png);
 +
}
-
/*background: #545454;*/
+
.tn-parts-container .content .box #label4 {
 +
background-image: url(https://static.igem.org/mediawiki/2013/8/8a/Tn-2013-parts-Bacillus-label.png);
}
}
Line 62: Line 72:
display: block;
display: block;
-
margin: 10px;
+
margin: 0 13px;
-
margin-left: 0.5em;
+
 
 +
    border-bottom: 3px solid white;
font-family: "Boogaloo",sans-serif;
font-family: "Boogaloo",sans-serif;
font-size: 3em;
font-size: 3em;
 +
}
 +
 +
.tn-parts-container .content .box .title a {
 +
    color: white;
 +
}
 +
 +
.tn-parts-container .content .box .title a:hover {
 +
    text-decoration: none;
}
}
Line 80: Line 99:
.part-box table {
.part-box table {
     width: 100% !important;
     width: 100% !important;
-
margin: 10px !important;
+
margin: 0 auto !important;
background: transparent;
background: transparent;
border-radius: 1em;
border-radius: 1em;
Line 86: Line 105:
.part-box td {
.part-box td {
-
     background-color: rgba(50,50,50,.1);
+
    padding: 0.4em;
 +
     background-color: rgba(100,100,100,.5);
     border-radius: 0.3em;
     border-radius: 0.3em;
vertical-align: top;
vertical-align: top;
 +
color: white;
 +
box-shadow: 0 0 2px rgba(250,250,250,1);
}
}
.part-box table .grade {
.part-box table .grade {
width: 100px;
width: 100px;
 +
text-align: center;
 +
vertical-align: top !important;
 +
}
 +
 +
.part-box table .grade img {
 +
    display: inline-block !important;
 +
    margin: 0 !important;
 +
width: 25px;
 +
vertical-align: top !important;
}
}
Line 98: Line 129:
width: 100px;
width: 100px;
font-weight: bold;
font-weight: bold;
 +
}
 +
 +
.part-box table .code a {
 +
color: white;
 +
text-decoration: none;
 +
}
 +
 +
.part-box table .code a:hover {
 +
color: #a9a9a9;
}
}
Line 107: Line 147:
     font-size: 0.9em;
     font-size: 0.9em;
text-align: justify;
text-align: justify;
 +
}
 +
 +
.tn-parts-container .legend {
 +
    width: 910px;
 +
 +
    margin: 1em auto;
 +
    margin-left: 10px;
 +
 +
    background-color:  rgb(143,11,25);
 +
    background-image: url( https://static.igem.org/mediawiki/2013/d/de/Tn-2013-boxbg-Onda-GrapeRed.png);
 +
    border: 5px solid white;
 +
    box-shadow: 2px 2px 4px #323232;
 +
}
 +
 +
.tn-parts-container .legend .sheet {
 +
    margin: 10px;
 +
    padding: 10px;
 +
   
 +
    background-color: rgba(250,250,250,.6);
 +
    border-radius: 10px;
 +
   
 +
    font-family: "Cabin", sans-serif;
 +
    text-align: justify;
 +
}
 +
 +
.tn-parts-container .legend .sheet img {
 +
    display: inline !important;
 +
    height: 2em;
 +
}
 +
 +
.tn-parts-container .legend .sheet ul {
 +
    list-style: none;
 +
}
 +
 +
.tn-parts-container .legend .sheet ul {
 +
    margin-left: 0;
 +
}
 +
 +
/*Navigation arrows*/
 +
 +
#tn-central-container #tn-content-wrap #tn-content .container .sheet-2 {
 +
    position: relative;
 +
   
 +
    margin: 1em 0 1em 0;
 +
    padding: 0.5em;
 +
   
 +
    background-color: rgba(255,255,255,.6);
 +
   
 +
    text-align: center;
 +
}
 +
 +
#tn-central-container #tn-content-wrap #tn-content .container .sheet-2 .tn-arr-prev,
 +
#tn-central-container #tn-content-wrap #tn-content .container .sheet-2 .tn-arr-next {
 +
    position: absolute;
 +
    bottom: 0.8em;
 +
 +
    width: 174px;
 +
   
 +
    border: none;
 +
    box-shadow: none;
 +
}
 +
 +
.container .sheet-2 .tn-arr-prev {
 +
    left: 2em;
 +
}
 +
 +
.container .sheet-2 .tn-arr-next {
 +
    right: 2em;
 +
}
 +
 +
.container {
 +
background-color:  rgb(143,11,25);
 +
    background-image: url( https://static.igem.org/mediawiki/2013/d/de/Tn-2013-boxbg-Onda-GrapeRed.png);
 +
}
 +
 +
 +
.part-box table .code a {
 +
color:rgb(255, 255, 102);
}
}

Latest revision as of 12:41, 29 September 2013

.tn-parts-container { width: 960px; margin: 0 auto; padding: 0; vertical-align: top; }

.tn-parts-container .content { display: inline-block;

width: 715px;

margin: 0 10px 10px 10px; margin-left: 0;

vertical-align: top; }

.tn-parts-container .content .box { position: relative; display: block; 

   margin-left: 10px;

margin-top: 0; margin-bottom: 30px; 

   min-height: 300px;

width: 830px;

vertical-align: top;

background-color: rgb(32,86,54); 

   background-image: url( Tn-2013-boxbg-Onda-Watermelon.png);

border: 5px solid white; box-shadow: 2px 2px 4px #323232; color: white; }

.tn-parts-container .content .box .label { position: absolute; top: 10px; right: -85px;

height: 100px; width: 75px; 

   background: rgb(130, 20, 16);
   border: 5px solid white;
   border-left: 0;
   border-top-right-radius: 1em;
   border-bottom-right-radius: 1em;
   box-shadow: 2px 2px 4px #323232;

}

.tn-parts-container .content .box #label1 { background-image: url(Tn-2013-parts-Eth-label.png); }

.tn-parts-container .content .box #label2 { background-image: url(Tn-2013-partsMesa-label.png); }

.tn-parts-container .content .box #label3 { background-image: url(Tn-2013-parts-Blue-label.png); }

.tn-parts-container .content .box #label4 { background-image: url(Tn-2013-parts-Bacillus-label.png); }

.tn-parts-container .content .box .title { display: block;

margin: 0 13px; 

   border-bottom: 3px solid white;

font-family: "Boogaloo",sans-serif; font-size: 3em; }

.tn-parts-container .content .box .title a { 

   color: white;

}

.tn-parts-container .content .box .title a:hover { 

   text-decoration: none;

}

.tn-parts-container .content .box .part-box { /*background-color: #f0f0f0;*/ font-family: "Cabin"; }

.part-box { padding: 10px; }

.part-box table { 

   width: 100% !important;

margin: 0 auto !important; background: transparent; border-radius: 1em; }

.part-box td { 

   padding: 0.4em;
   background-color: rgba(100,100,100,.5);
   border-radius: 0.3em;

vertical-align: top; color: white; box-shadow: 0 0 2px rgba(250,250,250,1); }

.part-box table .grade { width: 100px; text-align: center; vertical-align: top !important; }

.part-box table .grade img { 

   display: inline-block !important;
   margin: 0 !important;

width: 25px; vertical-align: top !important; }

.part-box table .code { width: 100px; font-weight: bold; }

.part-box table .code a { color: white; text-decoration: none; }

.part-box table .code a:hover { color: #a9a9a9; }

.part-box table .name { 

   font-style: italic;

}

.part-box table .descr { 

   font-size: 0.9em;

text-align: justify; }

.tn-parts-container .legend { 

   width: 910px;

   margin: 1em auto;
   margin-left: 10px;

   background-color:  rgb(143,11,25);
   background-image: url( Tn-2013-boxbg-Onda-GrapeRed.png);
   border: 5px solid white;
   box-shadow: 2px 2px 4px #323232;

}

.tn-parts-container .legend .sheet { 

   margin: 10px;
   padding: 10px;
   
   background-color: rgba(250,250,250,.6);
   border-radius: 10px;
   
   font-family: "Cabin", sans-serif;
   text-align: justify;

}

.tn-parts-container .legend .sheet img { 

   display: inline !important;
   height: 2em;

}

.tn-parts-container .legend .sheet ul { 

   list-style: none;

}

.tn-parts-container .legend .sheet ul { 

   margin-left: 0;

}

/*Navigation arrows*/

  1. tn-central-container #tn-content-wrap #tn-content .container .sheet-2 { 
   position: relative;
   
   margin: 1em 0 1em 0;
   padding: 0.5em;
   
   background-color: rgba(255,255,255,.6);
   
   text-align: center;

}

  1. tn-central-container #tn-content-wrap #tn-content .container .sheet-2 .tn-arr-prev,
  2. tn-central-container #tn-content-wrap #tn-content .container .sheet-2 .tn-arr-next { 
   position: absolute;
   bottom: 0.8em;

   width: 174px;
   
   border: none;
   box-shadow: none;

}

.container .sheet-2 .tn-arr-prev { 

   left: 2em;

}

.container .sheet-2 .tn-arr-next { 

   right: 2em;

}

.container { background-color: rgb(143,11,25); 

   background-image: url( Tn-2013-boxbg-Onda-GrapeRed.png);

}


.part-box table .code a { color:rgb(255, 255, 102); }

Retrieved from "http://2013.igem.org/Team:UNITN-Trento/CSS/Parts"