Team:ATOMS-Turkiye/asoImage

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{Team:ATOMS-Turkiye/asoMenu}}
+
/* General */
-
<html>
+
-
<head>
+
-
<!-- Styles -->
+
-
<link href="https://2014.igem.org/Team:ATOMS-Turkiye/asoStyles.css?action=raw&ctype=text/css" rel="stylesheet" />
+
-
</head>
+
-
<body>
+
body {
 +
  font-family: "Calibri", sans-serif;
 +
}
-
<center>
+
div.bx-wrapper {
-
<div class="asoContent">
+
  margin-bottom: 50px;
-
<h2>Genel Başlık</h2>
+
}
 +
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
 +
  text-align: center;
 +
  width: 90%;
 +
}
-
<table>
+
a:hover, a:visited, a:link, a:active {
-
<tr>
+
  color: red;
-
<td>
+
  text-decoration: underline;
-
<div class= "blueborder double">
+
}
-
<p><b>Görsel Başlığı</b></p>
+
-
<img src="http://placehold.it/400x300" />
+
-
<p>Görsel açıklaması</p>
+
-
</div>
+
-
</td>
+
-
<td>
+
div#bodyContent {
-
<div class= "blueborder double">
+
  background: rgba(21, 83, 100, 0.2);
-
<p><b>Görsel Başlığı</b></p>
+
}
-
<img src="http://placehold.it/200x200" />
+
-
<p>Görsel açıklaması</p>
+
-
</div>
+
-
</td>
+
-
</tr>
+
-
<tr>
+
div#top-section a:link{
-
<td>
+
  text-decoration: none;
-
<div class= "blueborder double">
+
}
-
<p><b>Görsel Başlığı</b></p>
+
-
<img src="http://placehold.it/200x200" />
+
-
<p>Görsel açıklaması</p>
+
-
</div>
+
-
</td>
+
-
<td>
+
div#top-section a:visited{
-
<div class= "blueborder double">
+
  text-decoration: none;
-
<p><b>Görsel Başlığı</b></p>
+
}
-
<img src="http://placehold.it/200x200" />
+
-
<p>Görsel açıklaması</p>
+
-
</div>
+
-
</td>
+
-
</tr>
+
-
</table>
+
-
<p>Genel Açıklama</p>
+
div#top-section a:hover{
-
</center>
+
  text-decoration: none;
 +
}
-
</div>
+
div#top-section a:active{
-
</body>
+
  text-decoration: none;
 +
}
-
</html>
+
div#content { margin-top: -19px !important; }
-
{{Team:ATOMS-Turkiye/asoFooter}}
+
 
 +
/* Navigation Link Bar */
 +
 
 +
div.navLR {
 +
  position: relative;
 +
  width: 100%;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-bottom: 12px;
 +
  margin-top: 12px;
 +
}
 +
 
 +
div.navLR::after {
 +
  content: " ";
 +
  display: table;
 +
  clear: both;
 +
}
 +
 
 +
a.navLinkLeft {
 +
  float: left;
 +
  text-decoration: none;
 +
  font-family: "Khmer UI", sans-serif;
 +
  color: rgb(192,0,0);
 +
  text-shadow: 1px 1px 5px #000000;
 +
  font-size: 24px; 
 +
  margin: 12px;
 +
  background: url("https://static.igem.org/mediawiki/2014/3/31/ATOMS-Turkiye_left_button.png") left center no-repeat;
 +
  background-size: auto 100%;
 +
  padding-left: 40px;
 +
 
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
 
 +
}
 +
a.navLinkDoubleLeft {
 +
  float: left;
 +
  text-decoration: none;
 +
  font-family: "Khmer UI", sans-serif;
 +
  color: rgb(192,0,0);
 +
  text-shadow: 1px 1px 5px #000000;
 +
  font-size: 24px; 
 +
  margin: 12px;
 +
  background: url("https://static.igem.org/mediawiki/2014/f/f9/ATOMS-Turkiye_double_left_button.png") left center no-repeat;
 +
  background-size: auto 100%;
 +
  padding-left: 70px;
 +
 
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
 
 +
}
 +
 
 +
a.navLinkRight {
 +
  float: right;
 +
  text-decoration: none;
 +
  font-family: "Khmer UI", sans-serif;
 +
  color: rgb(192,0,0);
 +
  text-shadow: 1px 1px 5px #000000;
 +
  font-size: 24px; 
 +
  margin: 12px;
 +
  background: url("https://static.igem.org/mediawiki/2014/4/42/ATOMS-Turkiye_right_button.png") right center no-repeat;
 +
  background-size: auto 100%;
 +
  padding-right: 40px;
 +
 
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
 
 +
 
 +
}
 +
a.navLinkDoubleRight {
 +
  float: right;
 +
  text-decoration: none;
 +
  font-family: "Khmer UI", sans-serif;
 +
  color: rgb(192,0,0);
 +
  text-shadow: 1px 1px 5px #000000;
 +
  font-size: 24px; 
 +
  margin: 12px;
 +
  background: url("https://static.igem.org/mediawiki/2014/d/d3/ATOMS-Turkiye_double_right_button.png") right center no-repeat;
 +
  background-size: auto 100%;
 +
  padding-right: 70px;
 +
 
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
}
 +
 
 +
/* Headings */
 +
 
 +
 
 +
h0, h1, h2, h3, h4, h5, h6 {
 +
  font-family: "Khmer UI", sans-serif !important;
 +
}
 +
 
 +
h0 {
 +
  font-size: 40px !important;
 +
  margin: 50px !important;
 +
  color: rgb(192,0,0) !important;
 +
  border-bottom: solid rgb(192,0,0) 4px !important;
 +
  text-shadow: 1px 1px 5px #000000 !important;
 +
  padding-bottom: 12px !important;
 +
}
 +
 
 +
h1 {
 +
  color: rgb(192,0,0) !important;
 +
  border-bottom: solid rgb(192,0,0) 4px !important;
 +
  text-shadow: 1px 1px 5px #000000 !important;
 +
  font-size: 36px !important;
 +
  padding-bottom: 12px !important;
 +
  margin-top: 12px !important;
 +
  margin: 18px !important;
 +
}
 +
 
 +
h2 {
 +
  color: rgb(192,0,0) !important;
 +
  text-shadow: 1px 1px 5px #000000 !important;
 +
  font-size: 24px !important; 
 +
  margin: 12px !important;
 +
}
 +
 
 +
 
 +
h3 {
 +
  color: rgb(192,0,0) !important;
 +
  font-size: 18px !important; 
 +
  margin: 9px !important;
 +
}
 +
 
 +
 
 +
h4 {
 +
  color: rgb(192,0,0);
 +
  font-size: 14px; 
 +
}
 +
 
 +
 
 +
h5 {
 +
  color: rgb(192,0,0);
 +
  font-size: 14px; 
 +
}
 +
 
 +
 
 +
h6 {
 +
  color: rgb(192,0,0);
 +
  font-size: 14px; 
 +
}
 +
 
 +
 
 +
/* Main content of pages */
 +
 
 +
div.asoContent {
 +
  padding: 20px;
 +
  z-index: 1;
 +
  background: white;
 +
  position: relative;
 +
  margin-right: auto;
 +
  margin-left: auto;
 +
  margin-top: 12px;
 +
  margin-bottom: 12px;
 +
  width: 1000px;
 +
  -webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.75);
 +
  -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.75);
 +
  box-shadow: 0px 0px 12px 2px rgba(30,123,148,0.75);
 +
}
 +
 
 +
 
 +
/* Red bordered*/
 +
 
 +
.highlight {
 +
  border: solid rgb(192,80,80) 3px;
 +
  border-radius: 20px;
 +
  padding: 20px;
 +
}
 +
 
 +
div.withImage2 {
 +
 +
  float: none;
 +
  margin-top:30px
 +
  border-radius: 3px;
 +
  padding: 8px;
 +
  margin: 14px;
 +
  width: 800px;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
 
 +
}
 +
 
 +
div.withImage2 img {
 +
  width: 100%;
 +
  border: solid rgb(30,123,148) 4px;
 +
  height: 100%;
 +
  margin-bottom: 4px;
 +
  display: block;
 +
}
 +
 
 +
 
 +
div.withImage {
 +
 +
  float: right;
 +
  border: solid rgb(30,123,148) 4px;
 +
  border-radius: 3px;
 +
  padding: 8px;
 +
  margin: 14px;
 +
}
 +
 
 +
div.withImage img {
 +
  width: 400px;
 +
  height: auto;
 +
  margin-bottom: 4px;
 +
  margin-right: auto;
 +
  margin-left: auto;
 +
}
 +
 
 +
 
 +
 
 +
div.withImageCentered {
 +
  float: none;
 +
  border: solid rgb(30,123,148) 4px;
 +
  border-radius: 3px;
 +
  padding: 8px;
 +
  margin: 14px;
 +
  width: 800px;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
}
 +
 
 +
div.withImageCentered img {
 +
  width: 100%;
 +
  height: 100%;
 +
  margin-bottom: 4px;
 +
  display: block;
 +
}
 +
 
 +
 
 +
 
 +
div.justImage {
 +
 +
  float: center; 
 +
  width: 750px;
 +
  height: auto;
 +
  margin-bottom: 4px;
 +
  margin-right: auto;
 +
  margin-left: auto;
 +
  margin-top:20px;
 +
  margin-bottom: 50px;
 +
  text-decoration: none;
 +
  -webkit-text-fill-color: #002bb8;
 +
  text-align:center
 +
 
 +
}
 +
div.justImage img {
 +
width:inherit;
 +
padding: 3px;
 +
height: auto;
 +
margin-right: auto;
 +
margin-left: auto;
 +
border: solid rgb(30,123,148) 4px;
 +
border-radius: 3px;
 +
}
 +
 
 +
/* Three columns */
 +
 
 +
.col-header {
 +
  color: rgb(192,0,0);
 +
  font-size: 24px;
 +
}
 +
.three-col {
 +
  position: relative;
 +
  width: 100%;
 +
  padding: 40px;
 +
 
 +
}
 +
.three-col .col1 {
 +
  float: left;
 +
  width: 33%;
 +
  padding: 24px;
 +
  background: #fff;
 +
}
 +
 
 +
.three-col .col2 {
 +
  width: 34%;
 +
  margin-right: 33%;
 +
  margin-left: 33%;
 +
  padding: 24px;
 +
  background: #fff;
 +
  border-style: solid;
 +
  border-width: 4px;
 +
  -moz-border-image: url(https://static.igem.org/mediawiki/2014/9/93/ATOMS-Turkiye_column_seperator.png) 7 8 8 repeat stretch;
 +
  -webkit-border-image: url(https://static.igem.org/mediawiki/2014/9/93/ATOMS-Turkiye_column_seperator.png) 7 8 8 repeat stretch;
 +
  -o-border-image: url(https://static.igem.org/mediawiki/2014/9/93/ATOMS-Turkiye_column_seperator.png) 7 8 8 repeat stretch;
 +
  border-image: url(https://static.igem.org/mediawiki/2014/9/93/ATOMS-Turkiye_column_seperator.png) 7 8 8 fill repeat stretch;
 +
  border-top: 0;
 +
  border-bottom: 0;
 +
  font-size: 12px !important;
 +
  max-height: 999999px;
 +
 
 +
}
 +
 
 +
.three-col .col3 {
 +
  float: right;
 +
  width: 33%;
 +
  padding: 24px;
 +
  background: #fff;
 +
}
 +
 
 +
 
 +
/*BX Slider*/
 +
 
 +
.bxslider span {
 +
    cursor: pointer;
 +
}
 +
 
 +
.bx-wrapper {
 +
    margin-bottom: 10px;
 +
    margin-top: 0px;
 +
}
 +
 
 +
.bx-wrapper .bx-viewport {
 +
  left: 0;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/*Right menu*/
 +
 
 +
#rightmenu
 +
{
 +
  list-style: none;
 +
  float: right;
 +
  width: 240px;
 +
  margin: 0px;
 +
  padding: 0;
 +
  display: inline-block;
 +
  -webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.75);
 +
  -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.75);
 +
  box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.75);
 +
}
 +
 
 +
#rightmenu li {
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  background: rgb(164,0,0);
 +
  line-height: 50px;
 +
  border-style: solid;
 +
  border-width: 0px 0px 3px;
 +
  -moz-border-image: url(https://static.igem.org/mediawiki/2014/c/cc/ATOMS-Turkiye_separator_right.png) 3 26 3 27 stretch repeat;
 +
  -webkit-border-image: url(https://static.igem.org/mediawiki/2014/c/cc/ATOMS-Turkiye_separator_right.png) 3 26 3 27 stretch repeat;
 +
  -o-border-image: url(https://static.igem.org/mediawiki/2014/c/cc/ATOMS-Turkiye_separator_right.png) 3 26 3 27 stretch repeat;
 +
  border-image: url(https://static.igem.org/mediawiki/2014/c/cc/ATOMS-Turkiye_separator_right.png) 3 26 3 27 stretch repeat;
 +
}
 +
 
 +
#rightmenu li:last-child {
 +
  border-bottom: 0;
 +
}
 +
 
 +
#rightmenu a {
 +
  font-weight: bold;
 +
  font-family: "Khmer UI", sans-serif;
 +
  color: #ffffff;
 +
  display: block;
 +
  text-align: center;
 +
  text-decoration: none;
 +
  margin: 0;
 +
  padding-top: 0px;
 +
  height: 50px;
 +
  background: rgb(164,0,0);
 +
}
 +
 
 +
#rightmenu a:hover {
 +
  background: rgb(160,40,40);
 +
}
 +
 
 +
/* new right menu */
 +
 
 +
#rightmenunew
 +
{
 +
  background: #ffffff;
 +
  list-style: none;
 +
  float: right;
 +
  width: 240px;
 +
  margin: 0px;
 +
  padding: 0;
 +
}
 +
 
 +
#rightmenunew img
 +
{
 +
  width: 240px;
 +
  height: auto;
 +
}
 +
 
 +
#rightmenunew li {
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
 
 +
#rightmenunew li a {
 +
  display: block;
 +
  margin: 0;
 +
  padding-top: 0px;
 +
}
 +
 
 +
#rightmenunew li a:hover {
 +
  background: url("https://2014.igem.org/File:ATOMS-Turkiye_right_1_mouse.png");
 +
  opacity: 0.75;
 +
}
 +
 
 +
 
 +
/*
 +
 
 +
3column news
 +
 
 +
*/
 +
 
 +
#cont .shwnews {
 +
    width: 1000px;
 +
    margin: 0 auto;
 +
    overflow: hidden;
 +
}
 +
#cont .shwnews a {
 +
    text-decoration: none;
 +
    outline: 0;
 +
}
 +
#cont .shwnews ul {
 +
    display: block;
 +
    width: 1000px;
 +
    padding: 0 0 0 0;
 +
    color: #fff;
 +
}
 +
#cont .shwnews ul li {
 +
    width: 300px;
 +
    height: 300px;
 +
    margin: 10px 20px 0px 5px;
 +
    padding: 5px;
 +
    background: #fff;
 +
    border: 1px solid #ccc;
 +
    float: left;
 +
}
 +
#cont .shwnews ul li div {
 +
    width: 288px;
 +
    height: 288px;
 +
    position: relative;
 +
}
 +
#cont .shwnews ul li img {
 +
    width: 288px;
 +
    height: 288px;
 +
}
 +
#cont .shwnews ul li b {
 +
    width: 288px;
 +
    height: 60px;
 +
    padding: 10px 6px;
 +
    font-size: 14px;
 +
    /* background: url(op5.png) repeat; */
 +
    background-color: #000;
 +
    position: absolute;
 +
    left: 0;
 +
    bottom: 0px;
 +
    z-index: 3;
 +
    font-size: 12pt;
 +
    opacity:0.7;
 +
    line-height:22px;
 +
}
 +
#cont .shwnews ul li a {
 +
    background: url(fix.gif) repeat;
 +
    position: absolute;
 +
    z-index: 4;
 +
}
 +
#cont .shwnews ul li a.lnk {
 +
    width: 288px;
 +
    height: 288px;
 +
    padding: 37px 5px 10px 10px;
 +
    line-height: 17px;
 +
    color: #fff;
 +
    position: absolute;
 +
    left: 0;
 +
    top: 0;
 +
    z-index: 4;
 +
    transition: background-color .2s ease-out 0s;
 +
}
 +
#cont .shwnews ul li a.lnk strong {
 +
    display: block;
 +
    margin-bottom: 20px;
 +
    line-height: 20px;
 +
    font-size: 18px;
 +
}
 +
#cont .shwnews ul li a.lnk span {
 +
    display: none;
 +
    width: 288px;
 +
    height: 288px;
 +
    line-height: 18px;
 +
}
 +
#cont .shwnews ul li a.tit {
 +
    height: 18px;
 +
    line-height: 20px;
 +
    padding: 0 8px;
 +
    color: #fff;
 +
    font-size: 12px;
 +
    font-weight: 700;
 +
    right: 0;
 +
    top: 0;
 +
    z-index: 5;
 +
}
 +
#cont .shwnews ul li.one a.tit {
 +
    background: #9e1d0a;
 +
}
 +
#cont .shwnews ul li.two a.tit {
 +
    background: #264ea0;
 +
}
 +
#cont .shwnews ul li.thr a.tit {
 +
    background: #1877b6;
 +
}
 +
#cont .shwnews ul li.one a.lnk:hover {
 +
    background: #9e1d0a;
 +
}
 +
#cont .shwnews ul li.two a.lnk:hover {
 +
    background: #264ea0;
 +
}
 +
#cont .shwnews ul li.thr a.lnk:hover {
 +
    background: #1877b6;
 +
}
 +
#cont .shwnews ul li a.lnk:hover span {
 +
    display: block;
 +
}
 +
 
 +
/* FourImg */
 +
 
 +
#fourimg {
 +
  width: 800px;
 +
  margin-right: auto;
 +
  margin-left: auto;
 +
  margin-top: 16px;
 +
  margin-bottom: 16px;
 +
}
 +
 
 +
#fourimg a {
 +
  background: black;
 +
  display: block;
 +
}
 +
 
 +
#fourimg img {
 +
  width: 200px;
 +
  height: 225px;
 +
}
 +
 
 +
#fourimg img:hover {
 +
  opacity: 0.6;
 +
}
 +
 
 +
/* Auxin */
 +
 
 +
.technology{ /*header of 2nd demo*/
 +
  cursor: pointer;
 +
  color: rgb(192,0,0) !important;
 +
  border-bottom: solid rgb(192,0,0) 2px !important;
 +
  text-shadow: 0px 0px 1px #000000 !important;
 +
  font-size: 24px !important;
 +
  padding-bottom: 6px !important;
 +
  margin-top: 12px !important;
 +
  margin: 18px ;
 +
  margin-left: 70px !important;
 +
}
 +
div.thelanguage {
 +
  float: none;
 +
  margin-top:30px
 +
  border-radius: 3px;
 +
  padding: 8px;
 +
  margin: 14px;
 +
  width: 800px;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
 
 +
}
 +
}
 +
 
 +
div.thelanguage img {
 +
  width: 50%;
 +
  border: solid rgb(30,123,148) 4px;
 +
  height: 50%;
 +
  margin-bottom: 4px;
 +
  display: block;
 +
}
 +
 
 +
 
 +
 
 +
.openlanguage{ /*class added to contents of 2nd demo when they are open*/
 +
color: #225323;
 +
}
 +
 
 +
.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
 +
color: #4E754F;
 +
}
 +
a.collapseLink {
 +
  color: rgb(192,0,0) !important;
 +
  text-shadow: 0px 0px 1px #000000 !important;
 +
  margin: 12px !important; 
 +
  font-size: 18px !important; 
 +
  text-decoration:none
 +
}
 +
 
 +
/* Figures */
 +
 
 +
/* Blue Border */
 +
 
 +
.blueborder td {
 +
  border: solid rgb(30,123,148) 4px;
 +
  border-radius: 3px;
 +
  padding: 20px;
 +
  text-align: center;
 +
  margin: 1px;
 +
  height: 100%;
 +
}
 +
 
 +
.blueborder img {
 +
  width: 100%;
 +
}

Revision as of 18:57, 17 October 2014

/* General */

body { 

 font-family: "Calibri", sans-serif;

}

div.bx-wrapper { 

 margin-bottom: 50px;

}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { 

 text-align: center;
 width: 90%;

}

a:hover, a:visited, a:link, a:active { 

 color: red;
 text-decoration: underline;

}

div#bodyContent { 

 background: rgba(21, 83, 100, 0.2);

}

div#top-section a:link{ 

 text-decoration: none;

}

div#top-section a:visited{ 

 text-decoration: none;

}

div#top-section a:hover{ 

 text-decoration: none;

}

div#top-section a:active{ 

 text-decoration: none;

}

div#content { margin-top: -19px !important; }

/* Navigation Link Bar */

div.navLR { 

 position: relative;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 12px;
 margin-top: 12px;

}

div.navLR::after { 

 content: " ";
 display: table;
 clear: both;

}

a.navLinkLeft { 

 float: left;
 text-decoration: none;
 font-family: "Khmer UI", sans-serif;
 color: rgb(192,0,0);
 text-shadow: 1px 1px 5px #000000;
 font-size: 24px;  
 margin: 12px;
 background: url("ATOMS-Turkiye_left_button.png") left center no-repeat;
 background-size: auto 100%;
 padding-left: 40px;

   padding-top: 10px;
   padding-bottom: 10px;

} a.navLinkDoubleLeft { 

 float: left;
 text-decoration: none;
 font-family: "Khmer UI", sans-serif;
 color: rgb(192,0,0);
 text-shadow: 1px 1px 5px #000000;
 font-size: 24px;  
 margin: 12px;
 background: url("ATOMS-Turkiye_double_left_button.png") left center no-repeat;
 background-size: auto 100%;
 padding-left: 70px;

   padding-top: 10px;
   padding-bottom: 10px;

}

a.navLinkRight { 

 float: right;
 text-decoration: none;
 font-family: "Khmer UI", sans-serif;
 color: rgb(192,0,0);
 text-shadow: 1px 1px 5px #000000;
 font-size: 24px;  
 margin: 12px;
 background: url("ATOMS-Turkiye_right_button.png") right center no-repeat;
 background-size: auto 100%;
 padding-right: 40px;

   padding-top: 10px;
   padding-bottom: 10px;


} a.navLinkDoubleRight { 

 float: right;
 text-decoration: none;
 font-family: "Khmer UI", sans-serif;
 color: rgb(192,0,0);
 text-shadow: 1px 1px 5px #000000;
 font-size: 24px;  
 margin: 12px;
 background: url("ATOMS-Turkiye_double_right_button.png") right center no-repeat;
 background-size: auto 100%;
 padding-right: 70px;

   padding-top: 10px;
   padding-bottom: 10px;

}

/* Headings */ 


h0, h1, h2, h3, h4, h5, h6 {
 font-family: "Khmer UI", sans-serif !important;

}

h0 { 

 font-size: 40px !important;
 margin: 50px !important;
 color: rgb(192,0,0) !important;
 border-bottom: solid rgb(192,0,0) 4px !important;
 text-shadow: 1px 1px 5px #000000 !important;
 padding-bottom: 12px !important;

}

h1 { 

 color: rgb(192,0,0) !important;
 border-bottom: solid rgb(192,0,0) 4px !important;
 text-shadow: 1px 1px 5px #000000 !important;
 font-size: 36px !important;
 padding-bottom: 12px !important;
 margin-top: 12px !important; 
 margin: 18px !important;

}

h2 { 

 color: rgb(192,0,0) !important;
 text-shadow: 1px 1px 5px #000000 !important;
 font-size: 24px !important;  
 margin: 12px !important;

}


h3 { 

 color: rgb(192,0,0) !important;
 font-size: 18px !important;  
 margin: 9px !important;

}


h4 { 

 color: rgb(192,0,0);
 font-size: 14px;

}


h5 { 

 color: rgb(192,0,0);
 font-size: 14px;

}


h6 { 

 color: rgb(192,0,0);
 font-size: 14px;

}


/* Main content of pages */

div.asoContent { 

 padding: 20px;
 z-index: 1;
 background: white;
 position: relative;
 margin-right: auto;
 margin-left: auto;
 margin-top: 12px;
 margin-bottom: 12px;
 width: 1000px;
 -webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.75);
 -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.75);
 box-shadow: 0px 0px 12px 2px rgba(30,123,148,0.75);

}


/* Red bordered*/

.highlight { 

 border: solid rgb(192,80,80) 3px;
 border-radius: 20px;
 padding: 20px;

}

div.withImage2 { 

 float: none;
 margin-top:30px
 border-radius: 3px;
 padding: 8px;
 margin: 14px;
 width: 800px;
 margin-left: auto;
 margin-right: auto;

}

div.withImage2 img { 

  width: 100%;
  border: solid rgb(30,123,148) 4px;
  height: 100%;
  margin-bottom: 4px;
  display: block;

}


div.withImage { 

 float: right;
 border: solid rgb(30,123,148) 4px;
 border-radius: 3px;
 padding: 8px;
 margin: 14px;

}

div.withImage img { 

 width: 400px;
 height: auto;
 margin-bottom: 4px;
 margin-right: auto;
 margin-left: auto;

}


div.withImageCentered { 

 float: none;
 border: solid rgb(30,123,148) 4px;
 border-radius: 3px;
 padding: 8px;
 margin: 14px;
 width: 800px;
 margin-left: auto;
 margin-right: auto;

}

div.withImageCentered img { 

 width: 100%;
 height: 100%;
 margin-bottom: 4px;
 display: block;

}


div.justImage { 

 float: center;  
 width: 750px;
 height: auto;
 margin-bottom: 4px;
 margin-right: auto;
 margin-left: auto;
 margin-top:20px;
 margin-bottom: 50px;
 text-decoration: none;
 -webkit-text-fill-color: #002bb8;
 text-align:center

} 

div.justImage img {
width:inherit;
padding: 3px;
height: auto;
margin-right: auto;
margin-left: auto;
border: solid rgb(30,123,148) 4px;
border-radius: 3px;

}

/* Three columns */

.col-header { 

 color: rgb(192,0,0);
 font-size: 24px;

} .three-col { 

 position: relative;
 width: 100%;
 padding: 40px;

} .three-col .col1 { 

 float: left;
 width: 33%;
 padding: 24px;
 background: #fff;

}

.three-col .col2 { 

 width: 34%;
 margin-right: 33%;
 margin-left: 33%;
 padding: 24px;
 background: #fff;
 border-style: solid;
 border-width: 4px;
 -moz-border-image: url(ATOMS-Turkiye_column_seperator.png) 7 8 8 repeat stretch;
 -webkit-border-image: url(ATOMS-Turkiye_column_seperator.png) 7 8 8 repeat stretch;
 -o-border-image: url(ATOMS-Turkiye_column_seperator.png) 7 8 8 repeat stretch;
 border-image: url(ATOMS-Turkiye_column_seperator.png) 7 8 8 fill repeat stretch;
 border-top: 0;
 border-bottom: 0;
 font-size: 12px !important;
 max-height: 999999px;

}

.three-col .col3 { 

 float: right;
 width: 33%;
 padding: 24px;
 background: #fff;

}


/*BX Slider*/

.bxslider span { 

    cursor: pointer;

}

.bx-wrapper { 

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

}

.bx-wrapper .bx-viewport { 

 left: 0;

}



/*Right menu*/

  1. rightmenu

{ 

 list-style: none;
 float: right;
 width: 240px;
 margin: 0px;
 padding: 0;
 display: inline-block;
 -webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.75);
 -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.75);
 box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.75);

}

  1. rightmenu li { 
 list-style: none;
 margin: 0;
 padding: 0;
 background: rgb(164,0,0);
 line-height: 50px;
 border-style: solid;
 border-width: 0px 0px 3px;
 -moz-border-image: url(ATOMS-Turkiye_separator_right.png) 3 26 3 27 stretch repeat;
 -webkit-border-image: url(ATOMS-Turkiye_separator_right.png) 3 26 3 27 stretch repeat;
 -o-border-image: url(ATOMS-Turkiye_separator_right.png) 3 26 3 27 stretch repeat;
 border-image: url(ATOMS-Turkiye_separator_right.png) 3 26 3 27 stretch repeat;

}

  1. rightmenu li:last-child { 
 border-bottom: 0;

}

  1. rightmenu a { 
 font-weight: bold;
 font-family: "Khmer UI", sans-serif;
 color: #ffffff;
 display: block;
 text-align: center;
 text-decoration: none;
 margin: 0;
 padding-top: 0px;
 height: 50px;
 background: rgb(164,0,0);

}

  1. rightmenu a:hover { 
 background: rgb(160,40,40);

}

/* new right menu */

  1. rightmenunew

{ 

 background: #ffffff;
 list-style: none;
 float: right;
 width: 240px;
 margin: 0px;
 padding: 0;

}

  1. rightmenunew img

{ 

 width: 240px;
 height: auto;

}

  1. rightmenunew li { 
 list-style: none;
 margin: 0;
 padding: 0;

}

  1. rightmenunew li a { 
 display: block; 
 margin: 0;
 padding-top: 0px;

}

  1. rightmenunew li a:hover { 
 background: url("https://2014.igem.org/File:ATOMS-Turkiye_right_1_mouse.png");
 opacity: 0.75;

}


/*

3column news

  • /
  1. cont .shwnews { 
   width: 1000px;
   margin: 0 auto;
   overflow: hidden;

}

  1. cont .shwnews a { 
   text-decoration: none;
   outline: 0;

}

  1. cont .shwnews ul { 
   display: block;
   width: 1000px;
   padding: 0 0 0 0;
   color: #fff;

}

  1. cont .shwnews ul li { 
   width: 300px;
   height: 300px;
   margin: 10px 20px 0px 5px;
   padding: 5px;
   background: #fff;
   border: 1px solid #ccc;
   float: left;

}

  1. cont .shwnews ul li div { 
   width: 288px;
   height: 288px;
   position: relative;

}

  1. cont .shwnews ul li img { 
   width: 288px;
   height: 288px;

}

  1. cont .shwnews ul li b { 
   width: 288px;
   height: 60px;
   padding: 10px 6px;
   font-size: 14px;
   /* background: url(op5.png) repeat; */
   background-color: #000;
   position: absolute;
   left: 0;
   bottom: 0px;
   z-index: 3;
   font-size: 12pt;
   opacity:0.7;
   line-height:22px;

}

  1. cont .shwnews ul li a { 
   background: url(fix.gif) repeat;
   position: absolute;
   z-index: 4;

}

  1. cont .shwnews ul li a.lnk { 
   width: 288px;
   height: 288px;
   padding: 37px 5px 10px 10px;
   line-height: 17px;
   color: #fff;
   position: absolute;
   left: 0;
   top: 0;
   z-index: 4;
   transition: background-color .2s ease-out 0s;

}

  1. cont .shwnews ul li a.lnk strong { 
   display: block;
   margin-bottom: 20px;
   line-height: 20px;
   font-size: 18px;

}

  1. cont .shwnews ul li a.lnk span { 
   display: none;
   width: 288px;
   height: 288px;
   line-height: 18px;

}

  1. cont .shwnews ul li a.tit { 
   height: 18px;
   line-height: 20px;
   padding: 0 8px;
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   right: 0;
   top: 0;
   z-index: 5;

}

  1. cont .shwnews ul li.one a.tit { 
   background: #9e1d0a;

}

  1. cont .shwnews ul li.two a.tit { 
   background: #264ea0;

}

  1. cont .shwnews ul li.thr a.tit { 
   background: #1877b6;

}

  1. cont .shwnews ul li.one a.lnk:hover { 
   background: #9e1d0a;

}

  1. cont .shwnews ul li.two a.lnk:hover { 
   background: #264ea0;

}

  1. cont .shwnews ul li.thr a.lnk:hover { 
   background: #1877b6;

}

  1. cont .shwnews ul li a.lnk:hover span { 
   display: block;

}

/* FourImg */

  1. fourimg { 
 width: 800px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 16px;
 margin-bottom: 16px;

}

  1. fourimg a { 
 background: black;
 display: block;

}

  1. fourimg img { 
 width: 200px;
 height: 225px;

}

  1. fourimg img:hover { 
 opacity: 0.6;

}

/* Auxin */

.technology{ /*header of 2nd demo*/ 

 cursor: pointer;
 color: rgb(192,0,0) !important;
 border-bottom: solid rgb(192,0,0) 2px !important;
 text-shadow: 0px 0px 1px #000000 !important;
 font-size: 24px !important;
 padding-bottom: 6px !important;
 margin-top: 12px !important;
 margin: 18px ;
 margin-left: 70px !important;

} div.thelanguage { 

 float: none;
 margin-top:30px
 border-radius: 3px;
 padding: 8px;
 margin: 14px;
 width: 800px;
 margin-left: auto;
 margin-right: auto;

} }

div.thelanguage img { 

  width: 50%;
  border: solid rgb(30,123,148) 4px;
  height: 50%;
  margin-bottom: 4px;
  display: block;

}


.openlanguage{ /*class added to contents of 2nd demo when they are open*/ color: #225323; }

.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/ color: #4E754F; } a.collapseLink { 

 color: rgb(192,0,0) !important;
 text-shadow: 0px 0px 1px #000000 !important;
 margin: 12px !important;  
 font-size: 18px !important;  
 text-decoration:none

}

/* Figures */

/* Blue Border */

.blueborder td { 

 border: solid rgb(30,123,148) 4px;
 border-radius: 3px;
 padding: 20px;
 text-align: center;
 margin: 1px;
 height: 100%;

}

.blueborder img { 

 width: 100%;

}

Retrieved from "http://2014.igem.org/Team:ATOMS-Turkiye/asoImage"