/* Common style settings for Zynaptic Limited website */

body {
  font-family : "Liberation Sans", "Arial", "Geneva", sans-serif;
  font-size : 11pt;
  text-align : center;
  min-width : 320px;
  background : white;
}

h1 { text-align : left; font-size : 1.5em; }
h2 { text-align : left; font-size : 1.25em; }
h3 { text-align : left; font-size : 1.1em; }
h4 { text-align : left; font-size : 1.0em; }
h5 { text-align : left; font-size : 1.0em; }

img {
  max-width : 100%;
  width : auto;
  height : auto;
}

a[href] {
  color : black;
}

a:hover[href], a:active[href] {
  background-color : #D8D8D8;
}

#panel {
  max-width : 760px;
  min-width : 300px;
  margin : 20px auto;
  padding : 0;
  border : 2px solid black;
}

#text {
  padding : 20px 5%;
  text-align : justify;
}

.textbox {
  margin : auto 40px;
  text-align : left;
}

#footer {
  margin-top : 20px;
  padding : 10px;
  border-top : 1px solid #000000;
  text-align : center;
  font-size : 0.8em; 
} 

#banner {
  position : relative;
  height : 180px;
  background-color : white;
}

#body-default #banner {
  background : url(../images/banners/default.jpg) no-repeat top center;
}
#body-contact #banner {
  background : url(../images/banners/contact.jpg) no-repeat top center;
}
#body-reaction #banner {
  background : url(../images/banners/reaction.jpg) no-repeat top center;
}
#body-bluesky #banner {
  background : url(../images/banners/bluesky.jpg) no-repeat top center;
}
#body-updates #banner {
  background : url(../images/banners/updates.jpg) no-repeat top center;
}
#body-about #banner {
  background : url(../images/banners/about.jpg) no-repeat top center;
}

#banner ul {
  position : absolute;
  right : 0;
  bottom : 0;
  padding : 0;
  margin : 0;
  border : 0;
  list-style : none;
  float : left;
}

#banner li {
  margin : 0 8px 0 0;
  padding : 4px 8px 4px 8px;
  border : 0;
  background : url(../images/common/navtab-alpha.png) no-repeat top left;
  float : left;
}

#body-default #banner .index,
#body-contact #banner .contact,
#body-reaction #banner .reaction,
#body-bluesky #banner .bluesky,
#body-updates #banner .updates {
  background : url(../images/common/navtab-white.png) no-repeat top left;
}

#banner a {
  color : black;
  font-size : 12pt;
  font-weight : bold;
  text-decoration : none;
  background : none;
}

#banner a:hover, #banner a:active {
  text-decoration : underline;
}

#logotab {
  position : absolute;
  left : 0;
  top : 0;
  margin : 0;
  padding : 8px;
  border : 0;
  background : url(../images/common/logotab-alpha.png) no-repeat bottom right;
}

#logotab img {
  border : 0;
  padding : 0;
  margin : 0;
}

.index-table {
  max-width : 640px;
  min-width : 200px;
  padding : 0;
  border : 0;
  margin : 8px auto;
}

.index-table table {
  border-collapse : collapse;
  padding : 0;
  border : hidden;
  margin : 0 auto;
}

.index-table tr {
  padding : 0;
  border : 0;
  margin : 0;  
  background-color : #F0F0F0;
}

.index-table tr.highlight {
  background-color : #D8D8D8;
  cursor : pointer;
}

.index-table td {
  vertical-align : middle;
  text-align : left;
  padding : 8px;
  border : 0;
  margin : 2px;
}

.index-table a {
  display : block;
  text-align : center;
  text-decoration : none;
  color : black;
  padding : 0;
  border : 0;
  margin : 0;
}

.index-table a:hover,
.index-table a:active {
  background-color : #D8D8D8;
}

.index-table img {
  padding : 2px;
  border : solid 1px black;
  margin : 0;
  background-color : white;
  max-width : none;
  width : 64px;
  height : 64px;
}

.code-block {
  font-family : "Lucida Sans Typewriter", Consolas, Monaco, monospace;
  font-size : 10pt;
  margin-left : 5%;  
}

.updates-title {
  vertical-align : middle;
  float : left;
}

.updates-label {
  vertical-align : middle;
  float : right;
}

.updates-image {
  text-align : center;
}

.clear {
  clear : both;
}

.main-wrapper {
  padding : 8px 4px;
  text-align : center;
}

.topic-wrapper {
  text-align : center;
  max-width : 360px;
  margin : 8px 8px;
  display : inline-block;  
  vertical-align : top;
}

.topic-box {
  background-color : #D8D8D8;
  padding : 8px;
  margin : 8px 0px;
  min-width : 284px;
  display : inline-block;  
  vertical-align : top;
}

.topic-text {
  background-color : white;
  padding : 8px;
  height : 100%;
}

.twitter-wrapper {
  background-color : #D8D8D8;
  padding : 8px;
  margin : 16px 0px;
  width : 284px;
  display : inline-block;  
  vertical-align : top;
}