/* note from mike

Google for a stylesheet called "normalize.css" and import it first in your HTML
*/

* {
    box-sizing: border-box;   

}


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


body {
    background-color:#ffffff;   /* For my physics site, the background colour was a very light blue (#cce6ff;) but I changed it to white here.*/
}

th {
    font-weight:  normal;   /* The table heading is automatically made bold; I set the table heading font to not bold so I can decide what to have.*/
}

.row {
	overflow: hidden;
}

.row.block {
	border-top: 0px solid #ffffff; /* this makes the solid line above/below the row block, I turned it to white cf black on Physics website, but then got rid of it by making it 0px. */
}

html {
    font-family: "Lucida Sans", sans-serif;
}

body {
    font-size: 18px;
}

pre {
    font-family: "Lucida Sans", sans-serif;
}

/* the following was used to center and image, initially the Messy church logo.*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/*
.header {
    background-color: #0066cc;
    color: #ffffff;
    padding: 5px;
}
*/

/* Using .banner to format a gradient "banner" at the top of each page instead of .header . Look for .banner in the header part of the html. NB .banner is just my choice, its not a program word.*/
.banner {
    width: 100vw;
    height: 20vh;
    background-image: linear-gradient(to right, #c51718, #ffffff); /* the colour is a gradient from methodist red #c51718 to white.   #33b5e5;*/
    color: #ffffff;
    padding: 35px;
    font-size: 25px;
}

.menu ul {
    margin: 0;
    list-style-type: none;
    padding: 0;
}

.menu li {
    margin-bottom: 5px;

}
.menu li a {        /*this affects the styling of the nav buttons, as does the hover below*/
	display: block;
	padding: 8px;
	background-color :#ef4848;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    text-decoration: none;
}
.menu li a:hover {
    background-color: #c51718;
    color: #cfff;
}


aside.top {
   /* background-color: #33b5e5; */
    padding: 15px;
    color: #0066cc;
    text-align: left;
    font-size: 14px;
   /* box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); */
}

aside.left {
    font-size: 13px;
    margin-right:auto;
    margin-left:auto;
    background-color:#33b5e5;
    padding:10px;
    border:1px solid #696;
    border-radius:20px;
    margin-bottom: 15px;
}

aside.specifications {
    font-size: 13px;
    color: #ffffff;
    margin-right:auto;
    margin-left:auto;
    background-color:#6600ff;
    padding:10px;
    border:1px solid #696;
    border-radius:20px;
    margin-bottom: 15px;
}


aside.right {
    font-size: 13px;
    
}

aside.centre {
    font-size: 13px;
    margin-right:auto;
    margin-left:auto;
    background-color:#ffd700;
    padding:10px;
    border:1px solid #696;
    border-radius:10px;
    margin-bottom: 15px;
}


aside.example {
    font-size: 13px;
    margin-right:auto;
    margin-left:auto;
    background-color:#ffcc80;
    padding:10px;
    border:1px solid #696;
    border-radius:10px;
    margin-bottom: 15px;
}

aside.equation {
    font-size: 15px;
    margin-right:auto;
    margin-left:auto;
    background-color:#ff8080;
    padding:10px;
    border:1px solid #696;
    border-radius:10px;
    margin-bottom: 15px;
}

aside.questions {
    font-size: 13px;
    margin-right:auto;
    margin-left:auto;
    background-color:#99ffcc;
    padding:10px;
    border:1px solid #696;
    border-radius:10px;
}


[class*="col-"] {	
    float: left;
    padding: 15px;
}


/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}


span.bold {
	font-weight: bold;
}

span.small {
    font-size: 13px;
}


span.large {
    font-size: 25px;
}

span.italic {
    font-style: italic;
}



@media only screen and (min-width: 600px) {
    /* For tablets: so this list and the list below are only read and used if the screen sizes are larger than the min-widths, otherwise all of the div class=col in the html will occupy 100% width. */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}


}
@media only screen and (min-width: 950px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}  
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

input[type=number] {
    width: 60px;
}

input[type=text] {  /* NB. CSS can only control the actual width of the input box, not the number of characters*/
    width: 90px;    /* the number of characters is controlled in the HTML, but it is still useful to set the visual width here in CSS.*/
}

footer {
    font-size: 14px;
    margin-right:auto;
    margin-left:auto;
    background-color:#aaff80;
    padding:10px;
    border:1px solid #696;
    
}

form {
    width: 400px;
}

form label {
    display: block; /* doesn't seem to do much! */
    font-size: 18px;
}

form input, textarea {
    font-size: 18px;
    padding: 5px;
    border: #ccc 3px solid;
    width: 100%
}

span.fontcolourmagenta {
    font-weight: bold;
    color: #ff00ff;
}

span.fontcolourred {
    font-weight: bold;
    color: #ff0000;
}

span.fontcolourgreen {
    font-weight: bold;
    color: #00ff00;
}

span.fontcolourblue {
    font-weight: bold;
    color: #0000ff;
}

span.fontcolouryellow {
    font-weight: bold;
    color: #ffff00;
}

span.fontcolourcyan {
    font-weight: bold;
    color: #00ffff;
}

span.fontcolourorange {
    /* font-weight: bold; */
    color: #ff6666;
}

span.fontcolourorange2 {
    font-weight: bold; 
    color: #Bf7400;
}


/*   The following CSS is used to make the Mass Number and Atomic Number appear correctly with a Chemical Element symbol; got it from mathematical_and_chemical_equations_on_web.html. */
.limes {
    position: relative;
    display: inline-block;
    margin: 0 0.2em;
    vertical-align: middle; 
    text-align: center;
}

.limes > span { 
    display: block;
    margin:-0.5ex auto;
}

.limes span.numup,

.limes span.overdn {
    font-size: 70%;
}