Difference between revisions of "Team:Newcastle/libs/HP/Simulator-css"

m (Fix links side)
m
 
(30 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
 +
img#eca
 +
{
 +
max-height: 52%;
 +
position: absolute;
 +
bottom: -40px;
 +
right: 20px;
 +
}
 +
 
body
 
body
 
{
 
{
background-color: #EFA48B;  
+
background-color: #FFBDA9;
 
}
 
}
 +
 +
.minwidth { min-width:100px; width: auto !important; width: 100px; }
 +
 +
.circuit img
 +
{
 +
    max-width: 100%;
 +
    width: auto;
 +
}
 +
 +
.circuit
 +
{
 +
    position: relative;
 +
}
 +
 
.componentbox{
 
.componentbox{
 
background-color: #EFE6C5;
 
background-color: #EFE6C5;
width: 17.5%;
+
        float: left;
height: 70%;
+
position: absolute;
+
right: 2.5%;
+
top: 20%;
+
 
list-style: none;
 
list-style: none;
 
border: 8px solid #EFE6C5;
 
border: 8px solid #EFE6C5;
 
border-radius: 30px;
 
border-radius: 30px;
border-radius: 30px;
+
        min-width: 17%;
 
}
 
}
#batterydrop{
+
 
height: 26%;
+
#batterydrop {
width: 30%;
+
    min-width: 29.5%;
position: relative;
+
    min-height: 26%;
top: 5%;
+
    position: absolute;
left: 34%;
+
    z-index: 99999;
background-position: 55% 30%;
+
    background-position: 55% 30%;
background-size: 75% 115%;
+
    background-size: 75% 115%;
background-repeat: no-repeat;
+
    background-repeat: no-repeat;
 +
    top: 2%;
 +
    left: 34.5%;
 
}
 
}
  
 
#components
 
#components
 
{
 
{
list-style: none;
+
    list-style: none;
 +
    margin-left: 0;
 +
    padding: 10px;
 
}
 
}
#bulbdrop{
+
 
height: 26%;
+
#bulbdrop {
width: 30%;
+
    min-width: 29.5%;
position: relative;
+
    min-height: 24%;
top: 45%;
+
    position: absolute;
left: 34%;
+
    z-index: 9999999999999;
background-position: 47.5% 30%;
+
    background-position: 55% 30%;
background-size: 45% 80%;
+
    background-size: 75% 115%;
background-repeat: no-repeat;
+
    background-repeat: no-repeat;
 +
    bottom: 7%;
 +
    left: 34%;
 
}
 
}
  
 
#wiredrop{
 
#wiredrop{
 
height: 25%;
 
height: 25%;
width: 25%;
+
width: 25%;
position: relative;
+
position: absolute;
top: 38%;
+
top: 38%;
left: 36%;
+
left: 36%;
background-position: 47.5% 30%;
+
background-position: 47.5% 30%;
background-size: 45% 80%;
+
background-size: 45% 80%;
background-repeat: no-repeat;
+
background-repeat: no-repeat;
 
}
 
}
  
 
#turbinedrop{
 
#turbinedrop{
height: 26%;
+
height: 25%;
width: 30%;
+
width: 30%;
position: relative;
+
position: absolute;
top: 5%;
+
top: 3%;
left: 34%;
+
left: 34%;
background-position: 55% 30%;
+
background-position: 55% 30%;
background-size: 75% 115%;
+
background-size: 75% 115%;
background-repeat: no-repeat;
+
background-repeat: no-repeat;
 
}
 
}
  
Line 96: Line 121:
 
}
 
}
 
.circuit{
 
.circuit{
position:absolute;
 
top: 3%;
 
right:0%;
 
left:0%;
 
 
}
 
}
.interactiveLinks{
+
 
background-color: #EFE6C5;
+
.InteractiveLinks{
border: 8px solid #EFE6C5;
+
    border: 8px solid #EFE6C5;
border-radius: 30px;
+
    border-radius: 30px;
display: inline-block;
+
    display: inline-block;
min-width: 250px;
+
    min-width: 17.5%;
 +
    background-color: #EFE6C5;
 +
    float: left;
 +
    margin-left: 5%;
 +
    margin-right: 10px;
 
}
 
}
  
 
.toolbox{
 
.toolbox{
background-color: #EFE6C5;
+
background-color: #EFE6C5;
width: 6%;
+
position: absolute;
height: 10%;
+
margin: auto;
position: absolute;
+
left: 34%;
left: 47%;
+
top: 40%;
top: 50%;
+
 
}
 
}
  
 
.gamebox{
 
.gamebox{
 
background-color: #EFE6C5;
 
background-color: #EFE6C5;
width: 55%;
 
height: 70%;
 
position: absolute;
 
left: 22.5%;
 
top: 20%;
 
 
border: 8px solid #EFE6C5;
 
border: 8px solid #EFE6C5;
 
border-radius: 30px;
 
border-radius: 30px;
border-radius: 30px;
+
        float: left;
 +
        max-width: 55%;
 +
        max-width: 50%;
 +
        margin-right: 10px;
 
}
 
}
  
 
#onebutton{
 
#onebutton{
 
background-color: #EFA48B;
 
background-color: #EFA48B;
padding: 8px 8px;
+
padding: 8px 8px;
text-decoration: none;
+
text-decoration: none;
font-size: 18px;
+
font-size: 18px;
color: EFE6C5;  
+
color: #EFE6C5;
font-family: 'Kaushan Script', cursive;
+
font-family: 'Kaushan Script', cursive;
left: 90%;
+
left: 80%;
top:11%;
+
top: 1%;
position:absolute;
+
position: absolute;
outline: none;
+
outline: none;
z-index: 10;
+
z-index: 999999;
 
}
 
}
  
Line 161: Line 183:
 
#email, #baseTable, #unopened{
 
#email, #baseTable, #unopened{
 
display:none;
 
display:none;
position: relative;
 
 
top: 90;
 
top: 90;
 
left: 85px;
 
left: 85px;
 +
        max-width: 100%;
 
}
 
}
  
.interactivedemo {
+
.InteractiveDemo {
 
color: #000;
 
color: #000;
 
padding: 8px 16px;
 
padding: 8px 16px;
Line 173: Line 195:
 
color: #EFA48B;  
 
color: #EFA48B;  
 
font-family: 'Kaushan Script', cursive;
 
font-family: 'Kaushan Script', cursive;
list-style-type: none;
+
list-style: none;
 +
        margin-left: 0 !important;
 
}
 
}
  
Line 186: Line 209:
 
text-align: center;
 
text-align: center;
 
line-height: 130px;
 
line-height: 130px;
background-color: #EFE6C5;
 
border: 8px solid #EFE6C5;
 
border-radius: 30px;
 
border-radius: 30px;
 
 
margin-left: 42;
 
margin-left: 42;
 
margin-right: 42;
 
margin-right: 42;
Line 195: Line 214:
 
min-height: 15%;   
 
min-height: 15%;   
 
padding: 0px 50px 0px 50px;
 
padding: 0px 50px 0px 50px;
 +
        max-width: 50%;
 
}
 
}
  
Line 205: Line 225:
 
     width: 90%;
 
     width: 90%;
 
     margin: auto auto 25px auto;
 
     margin: auto auto 25px auto;
 +
    background-color: #EFE6C5;
 +
    border: 8px solid #EFE6C5;
 +
    border-radius: 30px;
 
}
 
}
  

Latest revision as of 18:26, 19 October 2016

img#eca { max-height: 52%; position: absolute; bottom: -40px; right: 20px; }

body { background-color: #FFBDA9; }

.minwidth { min-width:100px; width: auto !important; width: 100px; }

.circuit img {

   max-width: 100%;
   width: auto;

}

.circuit {

   position: relative;

}

.componentbox{ background-color: #EFE6C5;

       float: left;

list-style: none; border: 8px solid #EFE6C5; border-radius: 30px;

       min-width: 17%;

}

  1. batterydrop {
   min-width: 29.5%;
   min-height: 26%;
   position: absolute;
   z-index: 99999;
   background-position: 55% 30%;
   background-size: 75% 115%;
   background-repeat: no-repeat;
   top: 2%;
   left: 34.5%;

}

  1. components

{

   list-style: none;
   margin-left: 0;
   padding: 10px;

}

  1. bulbdrop {
   min-width: 29.5%;
   min-height: 24%;
   position: absolute;
   z-index: 9999999999999;
   background-position: 55% 30%;
   background-size: 75% 115%;
   background-repeat: no-repeat;
   bottom: 7%;
   left: 34%;

}

  1. wiredrop{

height: 25%; width: 25%; position: absolute; top: 38%; left: 36%; background-position: 47.5% 30%; background-size: 45% 80%; background-repeat: no-repeat; }

  1. turbinedrop{

height: 25%; width: 30%; position: absolute; top: 3%; left: 34%; background-position: 55% 30%; background-size: 75% 115%; background-repeat: no-repeat; }

  1. applicationsdrop{

height: 25%; width: 29%; position: relative; top: 40%; left: 11%; background-position: 47.5% 30%; background-size: 45% 80%; background-repeat: no-repeat; }

  1. babbleddrop{

height: 25%; width: 29%; position: relative; top: 39%; left: 7%; background-position: 47.5% 30%; background-size: 45% 80%; background-repeat: no-repeat; }

.components{ list-style-type: none; width:100%; height:100%;

} .component{ position:relative; margin-left: 10%; } .circuit{ }

.InteractiveLinks{

   border: 8px solid #EFE6C5;
   border-radius: 30px;
   display: inline-block;
   min-width: 17.5%;
   background-color: #EFE6C5;
   float: left;
   margin-left: 5%;
   margin-right: 10px;

}

.toolbox{ background-color: #EFE6C5; position: absolute; margin: auto; left: 34%; top: 40%; }

.gamebox{ background-color: #EFE6C5; border: 8px solid #EFE6C5; border-radius: 30px;

       float: left;
       max-width: 55%;
       max-width: 50%;
       margin-right: 10px;

}

  1. onebutton{

background-color: #EFA48B; padding: 8px 8px; text-decoration: none; font-size: 18px; color: #EFE6C5; font-family: 'Kaushan Script', cursive; left: 80%; top: 1%; position: absolute; outline: none; z-index: 999999; }

  1. button1, #button2, #button3, #button4, #button5{

background-color: #EFE6C5; text-decoration: none; font-size: 18px; padding: 2%; color: #EFA48B; font-family: 'Kaushan Script', cursive; left: 85%; bottom:5%; position:absolute; outline: none; z-index: 10;

}

  1. email, #baseTable, #unopened{

display:none; top: 90; left: 85px;

       max-width: 100%;

}

.InteractiveDemo { color: #000; padding: 8px 16px; text-decoration: none; font-size: 20px; color: #EFA48B; font-family: 'Kaushan Script', cursive; list-style: none;

       margin-left: 0 !important;

}


/* Controls appearance of javascript feature used to show HTTP request structure*/

  1. levelOneAppear, div p#levelOneAppear{

display: none; position: relative; font-size: 26px; color: #EFA48B; font-family: 'Kaushan Script', cursive; text-align: center; line-height: 130px; margin-left: 42; margin-right: 42; line-height: 40px; min-height: 15%; padding: 0px 50px 0px 50px;

       max-width: 50%;

}


.hiddenText, .hiddenText p {

   text-align: center;
   color: #EFA48B;
   display: block;
   z-index: 999;
   width: 90%;
   margin: auto auto 25px auto;
   background-color: #EFE6C5;
   border: 8px solid #EFE6C5;
   border-radius: 30px;

}

  1. voltspinner::-webkit-inner-spin-button {

size: 30px; color: #EFA48B; font-family: 'Kaushan Script', cursive; background-color: #EFE6C5; outline:none; }

  1. vtag{

font-size: 30px; color: #EFA48B; font-family: 'Kaushan Script', cursive; }

  1. voltspinner

{ font-size: 30px; color: #EFA48B; font-family: 'Kaushan Script', cursive; background-color: #EFE6C5; text-align: center; outline:none; margin-left: 10px; margin-right: 10px;

}

  1. page-cover {

display: none; position: fixed; width: 100%; height: 100%; background-color: #000; z-index: 998; top: 0; left: 0; }

  1. level1popup, #level2popup, #level3popup, #level4popup, #level5popup{

background-color: #EFA48B; width: 100px; height: 100px; position: absolute; right: 27.5%; top: 12.5%; z-index: 9999; width: 45%; height: 75%; border: 8px solid #EFA48B; border-radius: 30px; border-radius: 30px; }

  1. popuptext {

width: 80%; height: 80%; position:absolute; right: 10%; top: 10%; font-size: 26px; color: #EFE6C5; font-family: 'Kaushan Script', cursive; }