/* GLOBAL STYLES
-------------------------------------------------- */

/* Remove all margins on the body and set a grey background colour to remove focus */
body {
	margin: 0px;
	background-color: #F6F6F6;
}
/* Sets the font and font colour for headings h1, h2, h3 */
h1, h2, h3 {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	color: #212121;
	margin-top: 0px;
}
/* Sets the main paragraph text font */
p {
	font-family: 'Roboto', sans-serif;
}
/* Centers title text on each page and adds weight to the font */
.title {
	text-align: center;
	font-weight: 300;
	margin-top: 30px;
}


/* CODE STYLES
-------------------------------------------------- */

/* All code is set with the Consolas font (for easy recognition)*/
/* Default code (used in descriptions) is red with a white background */
.code {
	color: #E53935;
	background-color: #FFFFFF;
	font-family: Consolas,monaco,monospace;
}
/* Sets font and the colour to green */
.code-green {
    color: #4CAF50;
	font-family: Consolas,monaco,monospace;
}
/* Sets font and the colour to blue */
.code-blue {
    color: #00B0FF;
	font-family: Consolas,monaco,monospace;
}
/* Sets font and the colour to orange */
.code-orange {
    color: #FF9100;
	font-family: Consolas,monaco,monospace;
}
/* Sets font and the colour to purple */
.code-purple {
    color: #4B0082;
	font-family: Consolas,monaco,monospace;
}


/* LAYOUT STYLES
-------------------------------------------------- */

/* Sets the main content container to be aligned slightly to the right
(make space for cntents box) */
.container {
	margin-left: 20%;
	margin-right: 10%;
}
/* Each element / rule will be written in its own box. Sets background colour to
white, adds padding, and a radius to round off the corners */
.box {
	background-color: #FFFFFF;
	border-radius: 5px;
	padding: 15px;
	margin-bottom: 50px;
	overflow: auto;
}
/* Used for element definition. Float left so it's side by side with the right
box and takes 70% of the width */
.box-left {
	float: left;
	width: 70%;
}
/* Used for the examples. Float left so it's shown to the right of the definition
box and only takes 28% of the width */
.box-right {
	float: left;
	width: 28%;
}
/* Adds padding around the title of each box */
.box-left h2 {
	padding-top: 10px;
	padding-left: 10px;
}
/* Adds more padding to the paragraphs so there are gaps left to the left and right */
.box-left p {
	padding-left: 10px;
	padding-right: 10px;
}


/* MAIN BOX INFO STYLES
-------------------------------------------------- */

/* Default styles are written in green text */
.defaults-container {
	height: 120px;
	color: #4CAF50;
}
/* The heading for the defaults section is floated left and fills the height.
A right margin of 53px is used to leave a gap between itself and the first default */
.defaults-heading {
	float: left;
	height: 100%;
	margin-right: 53px;
}
/* Remove the top margin of the defaults heading text */
.defaults-heading p {
	margin-top: 0px;
}
/* Gives the table of parameters a 10px padding */
.params-table {
	padding-left: 10px;
}
/* Sets font colour to orange and the same font as the code. All text is aligned
to the top because it looks better on smaller browser widths */
.params-table td {
	font-family: Consolas,monaco,monospace;
	color: #FF8F00;
	vertical-align: top;
}
/* Sets the width of the parameters title text */
#_param_title {
	width: 120px;
}
/* Sets the width of the parameters subtitle text */
#_param_subtitle {
	width: 60px;
}
/* Sets the default values table to have green text and the same font as the code */
.defaults-table td {
	font-family: Consolas,monaco,monospace;
	color: #4CAF50;
}


/* EXAMPLE BOX STYLES
-------------------------------------------------- */

/* Inserts a dashed grey border on the left of each example to split the definition
text and the preview. Add a padding to the top and align all text within the preview
central */
.example {
	border-left: 1px dashed #9E9E9E;
	padding-top: 10px;
	text-align: center;
}
/* Inserts a dashed grey border on the left of each example to split the definition
text and the code. Add a padding to the left to indent code slightly and align all
code to the left instead. The font is set to Consolas as this is the code preview */
.example-code {
	border-left: 1px dashed #9E9E9E;
	padding-left: 15px;
	text-align: left !important;
	font-family: Consolas,monaco,monospace;
}
/* Set colour of the show code / preview text to blue */
.show-example {
	color: #2196F3;
}
/* Change cursor to a pointer on hover (so user knows it is a button) */
.show-example:hover {
	cursor: pointer;
}


/* CONTENTS
-------------------------------------------------- */

/* Set the background colour of the contents box to white. Set position to fixed,
left to 0 and top to 20% so it remains in the same place, 20% down from the top
left of the screen */
.contents {
	background-color: #FFFFFF;
	position: fixed;
	padding: 15px;
	top: 20%;
	left: 0;
}
/* Set contents title to be aligned center */
.contents h2 {
	text-align: center;
}
/* Indent the list 50px from the left */
.contents ul {
	padding-left: 50px;
}
/* Add padding to split each list item */
.contents ul li {
	padding: 3px;
}
/* Set each link to be blue without any decoration, so no default underlines */
.contents ul li a {
	text-decoration: none;
	color: #2196F3;
	font-family: 'Roboto', sans-serif;
}


/* RESIZING RULES
-------------------------------------------------- */

/* Allow more room on the line for the examples box */
@media (max-width: 1150px) {
	.box-left {
		width: 65%;
	}
	.box-right {
		width: 35%;
	}
}

/* Screen width is too small for a side by side layout.
Stack the definition on top and show the preview / code box below. Set both widths to
fill the line (100% each) and reduce entire right margin to fill more of the total
screen space  */
@media (max-width: 1000px) {
	.container {
		margin-right: 5%;
	}
	.box-left {
		width: 100%;
	}
	.box-right {
		width: 100%;
	}
}

/* Screen is too small to show the contents box pinned to the left of the page.
Reduce both container margins to an equal 10% so content is now in the center of
the page. Set the contents box to a relative position so it will appear at the top
of the page. To make it fit in with the other boxes, round the corners and set margins */
@media (max-width: 1200px) {
	.container {
		margin-left: 10%;
		margin-right: 10%;
	}
	.contents {
		position: relative;
		margin-bottom: 50px;
		border-radius: 5px;
	}
}

/* This is a small width, so minimise margins so content fills more of the display */
@media (max-width: 600px) {
	.container {
		margin-left: 5%;
		margin-right: 5%;
	}
}