/*
File Name: tpstyle.less
Date: 02/20/18
Programmer: Leighton Mitchell
*/

/* VARIABLES */

/* colors */

@m_bg_color: #BEE0F8;
@t_bg_color: lightgray;
@d_bg_color: lightgray;
@footer_color: #9F00C5;
@references_hover_color: lightsteelblue;
@references_bg_color: #0000FF;

/* sizes */

@m_font_size: 16px;
@t_font_size: 15px;
@d_font_size: 14px;
@h1_font_size: 3em;
@h2_font_size: 1.4em;
@h3_font_size: 1.1em;
@summary_font_size: .6em;
@summary_first_font_size: 1.5em;
@designer_font_size: .75em;
@contact_font_size: 0.9em;

/* margins */

@p_h_margin: 1em 1em 1em 0;
@m_body_margin: 0 1em;
@t_body_margin: 0 3em;
@d_body_margin: 0 4em;
@ol_li_left_margin: 0;

/* MIXINS */

.shared (@bg_color, @fontSize, @body_margin) {
    background-color: @bg_color;
    font-size: @fontSize;
    margin: @body_margin;
}

.fontP (@fontSize) {
    font-size: @fontSize;
}

.cone (@color) {
    color: @color;
  
}

/* SELECTORS */

/* MOBILE STYLES */

body {
    .shared (@m_bg_color, @m_font_size, @m_body_margin);
    font-family: "Open Sans", sans-serif;
    line-height: 1.5em;
}
p, h1, h2, h3 {
    margin: @p_h_margin;
}

h1, h2, h3 {
    font-weight: bold;
}

h1 {
    .fontP (@h1_font_size);
	text-shadow: 2px 2px #989898;
	margin-bottom: 0;
	margin-top: 0;
	line-height: 2em;
}

h2 {
    .fontP (@h2_font_size);
}

h3 {
    .fontP (@h3_font_size);
	font-style: italic;
}

ol {
	list-style: decimal;
	margin-left: 25px;
}

li {
    line-height: 1.5em;
}

ol li {
    margin-left: @ol_li_left_margin;
}

footer {
    .cone (@footer_color);
    margin-bottom: 10px;
    font-style: italic;
    text-align: center;
}

#references ul {
    list-style-type: disc;
    list-style-position: inside;
}

#references a:link, #references a:visited {
	text-decoration: none;
}

#references a:hover {
    .cone (@references_hover_color);
    text-decoration: underline;
	background-color: @references_bg_color;
}

#summary {
    .fontP (@summary_font_size);
    font-style: italic;
    line-height: 115%;
    margin-top: 5px;
    letter-spacing: 1px;
}

#summary:first-letter {
    .fontP (@summary_first_font_size);
    font-weight: bold;
}

#designer {
    .fontP (@designer_font_size);
	line-height: 1.1em;
	text-align: left;
}

#contact {
    letter-spacing: 3px;
    .fontP (@contact_font_size);
}

/* TABLET STYLES */

@media only screen and (min-width: 600px) {
    
body {
   .shared (@t_bg_color, @t_font_size, @t_body_margin);
}

h2 {
    margin-top: 0;
    margin-bottom: .8em;
}

h3 {
    margin-top: 0;
}

ol {
    margin-bottom: 15px;
}
    
ul {
    margin-bottom: 1em;
}
    
#funfacts ol {
    margin-left: 18px;
}

}

/* DESKTOP STYLES */

@media only screen and (min-width: 1025px) {

body {
    .shared (@d_bg_color, @d_font_size, @d_body_margin);
}

}