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

Revision as of 10:38, 15 October 2016 (view source) Jakeb (Talk | contribs) m (Fix CSS overide iGEM style.) ← Older edit		Latest revision as of 18:26, 19 October 2016 (view source) Jakeb (Talk | contribs) m
(35 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{
−	width: 17.5%;	+	border: 8px solid #EFE6C5;
−	height: 70%;	+	border-radius: 30px;
−	position: absolute;	+	display: inline-block;
−	left: 2.5%;	+	min-width: 17.5%;
−	top: 20%;	+	background-color: #EFE6C5;
−	border: 8px solid #EFE6C5;	+	float: left;
−	border-radius: 30px;	+	margin-left: 5%;
−	border-radius: 30px;	+	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 165:		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 177:		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 190:		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 199:		Line 214:
	min-height: 15%;		min-height: 15%;
	padding: 0px 50px 0px 50px;		padding: 0px 50px 0px 50px;
		+	max-width: 50%;
	}		}
	.hiddenText, .hiddenText p {		.hiddenText, .hiddenText p {
−	text-align: center;	+	text-align: center;
−	color: #EFA48B;	+	color: #EFA48B;
		+	display: block;
		+	z-index: 999;
		+	width: 90%;
		+	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; }