/*------------------------------*\
    Grid System
\*------------------------------*/

.row, 
.column {
    box-sizing: border-box;
}

.row:before,
.row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}

.column {
    position: relative;
    float: left;
    display: block;
}

.column + .column {
    margin-left: 1.6%;
}

.column-1 {
    width: 6.86666666667%;
}

.column-2 {
    width: 15.3333333333%;
}

.column-3 {
    width: 23.8%;
}

.column-4 {
    width: 32.2666666667%;
}

.column-5 {
    width: 40.7333333333%;
}

.column-6 {
    width: 49.2%;
}

.column-7 {
    width: 57.6666666667%;
}

.column-8 {
    width: 66.1333333333%;
}

.column-9 {
    width: 74.6%;
}

.column-10 {
    width: 83.0666666667%;
}

.column-11 {
    width: 91.5333333333%;
}

.column-12 {
    width: 100%;
    margin-left: 0;
}

@media only screen and (max-width: 700px) {
    .column-1, 
    .column-2, 
    .column-3, 
    .column-4, 
    .column-5, 
    .column-6, 
    .column-7, 
    .column-8, 
    .column-9, 
    .column-10, 
    .column-11, 
    .column-12 {
        float: none;
        width: auto;
    }
  
    .column + .column {
        margin-left: 0;
    }
}

/*------------------------------*\
    Styling
\*------------------------------*/

html {
         height:100%; /* fix height to 100% for IE */
         max-height:100%; /* fix height for other browsers */
         padding:0; /*remove padding */
         margin:0; /* remove margins */

}

body {
         height:100%;
         max-height:100%;
         min-width:400px;
         overflow:auto;
         padding:0px;
         margin:0;
         background:#000000;
}

.column {
    background: none;
    min-height: 20px;
    min-width:80px;
    text-align: center;

}

.column-block {
    background: #00E000;
    border: 3px double black;
    padding: 3px;
    border-radius: 3px;
}

.column-pod {
    background: #FAF4E6;
    border: 1px solid black;
    padding:3px;
    border-radius: 3px;
}

.column-part {
    background: none;
    border: none;
}

.column-strong {
    font-weight:bold;
}

.column-italic {
    font-style:italic;
}

.column-text {

    background: #FAF4E6;
}

.column-title {
   font-size: 20px;
   font-weight:bold;
   background: #FAF4E6;
}

.column-border {
   border:1px solid black;
}

.column-double {
    border: 3px double black;
    padding: 3px;
    border-radius: 3px;
}

.row {
    margin-bottom: 3px;
    width:100%;
}

.row:last-child {
    margin-bottom: 0;
}

.p {
  font-size: 14px;
  text-align: center;
  padding-top: 100px;
}

/*How "a href" links are formatted*/
a:link {color:#770000; text-decoration: underline; font-weight:bold;}
a:active {color:#AA3333; text-decoration: underline; font-weight:bold;}
a:visited {color:#AA3333; text-decoration: underline; font-weight:bold;}
a:hover {color:#FF7777; text-decoration: none; font-weight:bold;}

/*Image scaling*/
img {
	max-width: 100%;
	height: auto;
	}


/*------------------------------*\
    Old Webplex
\*------------------------------*/



body.hs
/*The background of the hub pages*/
{
background-color:#000000;
background-image:url('BackBlack.jpg');
font-size:100%;
}

body.pointand
/*Point and click*/
{
background-color:#ffffff;
background-image:url('BackWhite.jpg');
font-size:100%;
}

table.main
/*The main table in which everything takes place*/
{
background-color:#ffffff;
background-image:url('BackWhite.jpg');
width:95%;
border:0;
margin-left:2%;
margin-right:2%;
}

table.menu
/*Table containing links to various components of the 'plex*/
{
background-color:#ffffff;
background-image:url('BackRed.jpg');
width:80%;
border:1px solid black;
margin-left:10%;
margin-right:10%;
height:100px;
text-align:center;
vertical-align:center;
}

table.link
/*Internal table for linking within the above*/
{
background-color:#ffffff;
background-image:url('BackWhite.jpg');
width:100%;
border:1px solid black;
text-align:center;
vertical-align:center;
horizontal-align:center;
padding:2px;
}

td.link
/*Link cells for the above*/
{
background-color:#ffffff;
background-image:url('BackWhite.jpg');
border:1px solid black;
text-align:center;
vertical-align:center;
color:black;
font-size:1em;
font-family:Arial,"Sans-serif";
}

td.head
/*Header cells for the above*/
{
background-color:#ffffff;
background-image:url('BackWhite.jpg');
border:1px solid black;
text-align:center;
vertical-align:center;
width:40%;
padding:15px;
color:black;
font-size:1.5em;
font-family:Arial,"Sans-serif";
font-weight:bold;
}

td.desc
/*Description cells for the above*/
{
background-color:#ffffff;
background-image:url('BackWhite.jpg');
border:1px solid black;
text-align:center;
width:40%;
vertical-align:center;
padding:15px;
color:black;
font-size:1em;
font-family:Arial,"Sans-serif";
font-style:italic;
}

td.body
/*Body text cells for the above*/
{
background-color:#ffffff;
background-image:url('BackWhite.jpg');
border:1px solid black;
text-align:center;
width:40%;
vertical-align:center;
padding:15px;
color:black;
font-size:1em;
font-family:Arial,"Sans-serif";
}

td.lbody
/*Left-aligned body text cells for the above*/
{
background-color:#ffffff;
background-image:url('BackWhite.jpg');
border:1px solid black;
text-align:left;
width:40%;
vertical-align:center;
padding:15px;
color:black;
font-size:1em;
font-family:Arial,"Sans-serif";
}

td.word
/*A word in another language*/
{
background-color:#ffffff;
background-image:url('BackWhite.jpg');
border:1px solid black;
text-align:center;
width:40%;
vertical-align:center;
color:black;
font-size:1em;
font-family:Arial,"Sans-serif";
font-style:italic;
}

td.defi
/*The definition of the above words*/
{
background-color:#ffffff;
background-image:url('BackWhite.jpg');
border:1px solid black;
text-align:center;
width:40%;
vertical-align:center;
color:black;
font-size:1em;
font-family:Arial,"Sans-serif";
}

td.defi20
/*A definition cell for a 5-part table*/
{
background-color:#ffffff;
background-image:url('BackWhite.jpg');
border:1px solid black;
text-align:center;
width:20%;
vertical-align:center;
color:black;
font-size:1em;
font-family:Arial,"Sans-serif";
}

h1
/*The main title of a page*/
{
color:black;
font-size:2.5em;
font-family:Arial,"Sans-serif";
text-align:center;
padding-top:15px;
padding-left:15px;
padding-right:15px;
}

h2
/*The subtitle of a page*/
{
color:black;
font-size:1.5em;
font-family:Arial,"Sans-serif";
text-align:center;
padding-left:15px;
padding-right:15px;
}

h3
/*Internal titles*/
{
color:black;
font-size:1em;
font-family:Arial,"Sans-serif";
text-align:justify;
font-weight:bold;
padding-left:15px;
padding-right:15px;
}

h4
/*Subtitles*/
{
color:black;
font-size:1em;
font-family:Arial,"Sans-serif";
text-align:justify;
font-style:italic;
font-weight:normal;
padding-left:15px;
padding-right:15px;
}

h5
/*Back-link*/
{
color:black;
font-size:1.5em;
font-family:Lucida Calligraphy,Lucida Handwriting,"Cursive";
text-align:center;
padding-left:15px;
padding-right:15px;
}

p.body
/*The main body text of a page*/
{
color:#000000;
font-size:1em;
font-family:Arial,"Sans-serif";
text-align:justify;
padding-left:15px;
padding-right:15px;
}

p.note
/*Centred body text*/
{
color:black;
font-size:1em;
font-family:Arial,"Sans-serif";
text-align:center;
padding-left:15px;
padding-right:15px;
}

p.link
/*A section containing links*/
{
color:black;
font-size:1em;
font-family:Arial,"Sans-serif";
text-align:center;
padding-left:15px;
padding-right:15px;
}

p.base
/*The alignment of the end of the page*/
{
text-align:center;
padding-left:15px;
padding-right:15px;
padding-bottom:15px;
}

p.disc
/*Disclaimer links*/
{
color:black;
font-size:10px;
font-family:Arial,"Sans-serif";
text-align:center;
padding-left:15px;
padding-right:15px;
}

p.map
/*The site map*/
{
color:black;
font-size:10px;
font-family:Arial,"Sans-serif";
text-align:left;
padding-left:15px;
padding-right:15px;
}

/*How "a href" links are formatted*/
a:link {color:#c00000; text-decoration: underline; }
a:active {color:#800000; text-decoration: underline; }
a:visited {color:#800000; text-decoration: underline; }
a:hover {color:#c00000; text-decoration: none; }

/*All past here is experimental*/