/************************************************
* Style sheet for MicroAPL website              *
*************************************************/

/************************************************
* Basics                                        *
*************************************************/
* {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

html,
body { 
    height: 100%; 
    max-width: 900px;
    margin: 0 auto; 
}

html {
	background-color: #f8f8f8;
}

body { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.5em;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	background-color: white;
}

/* Put copyright message at end of page */
div.outer:after {
    content: "Copyright \00a9 1996-2017 MicroAPL Ltd";
    font-family: verdana;
    color: #3176bb;
    font-size: x-small;
	line-height: 4.0em;
	padding-left: 2.0em;
}

br {
    margin-top: 0;
    margin-bottom: 0;
}

p, ul, ol, pre, code, samp, var {
	color: #404040;
}

pre, code {
    font-family: "Courier New", Courier, monospace;
    font-weight: normal;
    font-size: 10pt;
    color: black;
    margin-left: 1.5em;
    margin-right: 1.5em;
    line-height: 1em;
}

p {
    margin-left: 1.5em;
    margin-right: 1.5em;
    line-height: 1.5em;
}

p sup {
    font-size: 0.5em;
}

samp { 
    font-family: monospace;
}

blockquote {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 11pt;  
    color: black;
    margin-left: 3.5em;
    margin-right: 1.5em;
    line-height: 1.5em;
}

img {
    border: none;
}

img.float_left {
    float: left;
    margin: 10px 30px 40px 20px;
}

img.float_right {
    float: right;
    margin: 10px 20px 40px 30px;
}

img.acrobat {
    vertical-align: middle;
}

/************************************************
* Headings                                      *
*************************************************/
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
    font-weight: normal;
    margin-top: 0.5em;
    color: black;
}

h1 {
    font-weight: bold;
    font-size: 18pt;  
    line-height: 1.1em;
    margin-left: 1.5em;
}

h2 {
    color: #25598d;
    line-height: 1.1em;
    margin-left: 1em;
}

h3 {
    font-size: 15pt;
    color: #25598d;
    line-height: 1.2em;
    margin-left: 1em;
    padding-top: 0.75em;
}

h4 {
    color: #25598d;
    line-height: 1.1em;
    margin-left: 1.5em;
    padding-top: 0.75em;
}

h5 {
    color: navy;
    line-height: 1.1em;
    margin-left: 1.5em;
}

h6 {
    line-height: 1.1em;
    margin-left: 1.5em;
}

/************************************************
* Front page                                    *
*************************************************/
div.front_page {
    margin-left: 35px;
    margin-right: 35px;
}

div.front_page_item {
    clear: both;
    margin-top: 30px;
    margin-bottom: 20px;
}
    
div.front_page_col1 {
    width: 250px;
    float: left;
    clear: both;
}

div.front_page_col2 {
    overflow-y: hidden;
}

div.front_page_col2 h2, div.front_page_col2 p {
    margin: 0 15px 10px 50px;
}

div.front_page_col1 img {
    display: block;
    margin: 0px 20px 40px 20px;
    width: 100%; 
}

a.front_page_more_arrow {
    float: right;
    padding-right: 50px;
	font-size : 14pt;
}

/************************************************
* Links                                         *
*************************************************/
a {
    text-decoration: none;
    color: #25598d;
    font-weight: normal;
}

a:hover, 
a:active {
    color: red;
}

p a,
li a {
    border-bottom: 1px dotted #25598d;
}

/************************************************
* Layout                                        *
*************************************************/
div.main, div#id_top {
    margin-left: 20px;
}

div.outer {
    background: #ffffff;
    clear: both;
}

div.main {
    background: #ffffff;
}

div.topics {
    background: #ffffff;
    float: left; 
    width: 180px;  
}

div.content {
    overflow-y: hidden;
    background: #ffffff;
    padding-right: 10px;
}

div.previous-next {
    overflow-y: hidden;
    padding-left: 20px;
    padding-right: 20px;
}

div.bottom-menu {
    clear: both;
    overflow-y: hidden;
    background: #ffffff;
}

a.previous-page {
     float: left;
     border: none; 
}

a.next-page {
     float: right;
     border: none; 
}

a.previous-page:before {
    content: '<< ';
}

a.next-page:after {
    content: ' >>';
}

div.relogix-advert {
    float: right;
    margin: 20px;
    border: 1px solid #e6e6e6;
    width: 219px;
    height: 139px;
}

div.relogix-advert a {
     border: none; 
}

div.old_tools p {
    color: #c00000;
}

div.old_tools a {
    color: #c00000;
    border-bottom: 1px dotted #c00000;
}

div.centre p,
div.centre table,
div.centre div {
    text-align: center;
}

/************************************************
* Menu bar at top                               *
*************************************************/
div#id_top {
    border-bottom: 3px solid #e6e6e6;
}

div.top-image {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 0px; 
    float: left; 
    width: 150px;
}


div.top-image a {
    border-bottom: none;
    white-space: nowrap;
}

div.top-menu {
    background: #3176bb;
    height: 44px;
    border: none;
    white-space: nowrap;
}

img.top-menu-corner {
    float: left;
    display: block;
}

div.top-menu-heading h1 {
    margin-left: 170px;
    margin-top: 20px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
}

/* --- Menus and drop-downs --- */

div.top-menu-dropdown {
    position: relative;
    display: inline-block; 
    padding: 0 20px;
    min-width: 60px;
    background: #3176bb;
	top: 12px;
}

div.top-menu-dropdown-content {
    display: none;
    position: absolute;
    background-color: #3176bb;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

div.top-menu-dropdown:hover div.top-menu-dropdown-content {
    display: block;
}

div.top-menu-dropdown-content p {
    margin: 5px;
}

div.top-menu-dropdown a, 
div.top-menu-dropdown-content a {
    color: white;
    font-weight: normal;
    border-bottom: none;
}

div.top-menu-dropdown a:hover,
div.top-menu-dropdown-content a:hover {
    color: red;
}

div.top-menu-dropdown a:active,
div.top-menu-dropdown-content a:active {
    color: red;
}

/************************************************
* Topics                                        *
*************************************************/
div.topics li {
    list-style-type: none;
}
div.topics ul {
    padding: 0px;
}

a.topic, 
a.topic-current, 
a.sub-topic, 
a.sub-topic-current {
    font-weight: normal;
    font-size: 10pt;
    margin-left: 0;
    margin-right: 0.5em;
    padding: 2px 2px 2px 5px;
    line-height: 2.0em;
    color: #25598d;
    display: block;
    border-bottom: 1px solid #e6e6e6;
}

a.topic:hover, 
a.topic-current:hover, 
a.sub-topic:hover, 
a.sub-topic-current:hover {
    color: #ff6666;
}

a.topic:active, 
a.topic-current:active, 
a.sub-topic:active, 
a.sub-topic-current:active {
    color: #ff6666;
}

a.topic-current, 
a.sub-topic-current {
    font-weight: bold;
}

a.sub-topic, 
a.sub-topic-current {
    margin-left: 1.0em;
}

/************************************************
* Bottom Links                                  *
*************************************************/
div.bottom-links {
    height: 30px;
    display: table;
    padding-top: 40px;
    padding-left: 180px;
    clear: both;
}

div.bottom-links ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

div.bottom-links li {
    float: left;
    margin: 0;
}

div.bottom-links a {
    font-weight: normal;
    font-size: 10pt;
    line-height: 1.5em;
    color: #25598d;
    border-bottom: none;
}

div.bottom-links a:hover,
div.bottom-links a:active {
    color: red;
}

div.bottom-links a:before {
    content: '|';
    padding-left: 8px;
    padding-right: 8px;
}

div.bottom-links > ul> :first-child a:before {
    content: '[';
    padding-left: 0;
    padding-right: 8px;
}
div.bottom-links > ul> :last-child a:after {
    content: ']';
    padding-left: 8px;
    padding-right: 0;
}

/************************************************
* Tables                                        *
*************************************************/
table {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: inherit;
    margin-left: 1.5em;
    margin-right: 1.5em;
    line-height: 1.5em;
}

table.feedback,
table.register,
table.bug_report {
    margin-left: 3em;
}

table.prices {
    background: #bababa;
    border-collapse: collapse;
    margin-right: 1em;
    margin-left: 1em;
    border: 2px solid white;
    margin: 0 auto;
}

th {
    font-weight: bold;
    text-align: center;
}

th.prices {
    background: #e6e6e6;
    font-weight: bold;
    text-align: left;
    border: 2px solid white;
}

td.prices {
    background: #e6e6e6;
    border: 2px solid white;
}

td.empty {
    background: #e6e6e6;
    border-width: thin;
    border-color: gray;
}

table.download {
    margin-left: 4.5em;
}

table.download td:nth-child(1) {
    width: 150px;
}
table.download td:nth-child(2) {
    width: 150px;
}
table.download td:nth-child(3) {
    width: 250px;
}

/************************************************
* Lists                                         *
*************************************************/
li {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
    margin-right: 1.5em;
    line-height: 1.5em;
}

/************************************************
* Syntax colouring for sample C programs        *
*************************************************/
.c_code,
.c_block_comment,
.c_eol_comment,
.c_keyword,
.c_string,
.c_quotes {
    font-family: "Courier New", Courier, monospace;
    font-weight: normal;
    font-size: 10pt;
    line-height: 1.2em;
}

.c_block_comment,
.c_eol_comment {
    color: #b30000;
}

.c_keyword {
    color: #0000b3;
}

.c_string,
.c_quotes {
    color: #666666;
}

/************************************************
* Responsive design                             *
*************************************************/

/* Style the topics 'popup' button */
#id_topics-toggle {
    background: #3176bb;
    border-radius: 3px;
    display: block;
    position: relative;
    padding: 10px 7px;
    float: left;
    border: none;
    margin-left: 5px;
}

#id_topics-toggle .bar{
    display: block;
    width: 18px;
    margin-bottom: 3px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;   
}

#id_topics-toggle .bar:last-child{
     margin-bottom: 0;   
}

/* Popup button is normally hidden if window is wide enough */
div#id_topics-control {
    margin-top: 10px;
    display: none;
    float: left;
    margin-top: 20px;
}


/* Apply these styles when window < 800 pixels */
@media only screen 
and (max-width: 800px) {

    html {
    	background-color: white;
    }
    
    div.top-menu {
        padding-left: 10px;
        min-width: 400px;
    }

    div.top-menu-dropdown {
        padding: 0 10px;
        min-width: 0px;
        font-size: 10pt;
    }

    div.bottom-links {
        padding-left: 0px;
        margin-left: 20px;
    }
    
    div.bottom-links a:before {
        content: '*';
    }

    div.bottom-links > ul> :first-child a:before {
        content: '*';
        padding-left: 8px;
    }
    div.bottom-links > ul> :last-child a:after {
        content: '';
    }
    div.bottom-links li {
        float: none;
    }

    div.relogix-advert {
        float: none;
    }
 
}

/* Apply these styles when window < 650 pixels (see also 'resizeWindow' code in javascript) */
@media only screen 
and (max-width: 650px) {

    p, h1, h2, h3, h4, h5 {
        margin-left: 0.5em;
        margin-right: 0.5em;
    }

    /* Hide un-needed elements of menu bar and reduce padding */
    div.top-image, img.top-menu-corner {
        display: none;
    }

    div.main, div#id_top {
        margin-left: 0;
    }
    
    div.top-menu {
        padding-left: 5px;
    }
    
    div.top-menu-heading h1 {
        margin-left: 20px;
    }
    div.top-menu-dropdown {
        padding: 0 10px;
        min-width: 0px;
        font-size: 10pt;
    }
    
    div#id_topics-control {
        display: block;
    }

    div.content {
        clear: both;
        margin-left: 5px;
    }

    div.front_page {
        margin-left: 3px;
        margin-right: 3px;
    }

    div.front_page_item {
        border-top: 1px solid #e6e6e6;
        padding-top: 25px;
    }
    
    div.front_page_col1 {
        float: none;
    }
    
    div.front_page_col1 img {
        margin: 0 15px 10px 7px;
    }

    div.front_page_col2 h2, div.front_page_col2 p {
        margin: 0 15px 10px 7px;
    }
   
    a.front_page_more_arrow {
        padding-right: 20px;
    }

    /* Treat topics as a popup menu */
    div.topics {
        position: absolute;
        box-shadow: 3px 8px 16px 3px rgba(0,0,0,0.2);
        z-index: 2;
        margin-top: 60px;
    }
    
    div.topics li:last-child a {
        border-bottom: none;
    }
    
    img.float_left,
    img.float_right {
        float: none;
    }
}

/* If we're printing the page, don't include the navigation */
@media print {
    div.top-menu, div.topics, div.bottom-links {
        display: none;
    }
}