/*
File Name: style.less
Date: 01/27/21
Programmer: Fredy Chavez
*/

/* INSERT LESS VARIABLES HERE */

/* colors */

@mBgColor: #E8E8E8;
@tBgColor: #E8E8E8;
@dBgColor: #E8E8E8;
@paletteColor1: #FFFFFF;
@paletteColor2: #000000;
@paletteColor3: #FF0000;

/* sizes */

@mFontSize: 16px;
@tFontSize: 15px;
@dFontSize: 14px;
@h1FontSize: 2em;
@h2FontSize: 1.4em;
@h3FontSize: 1.1em;
@summaryFontSize: .6em;
@summaryFirstFontSize: 1.5em;
@designerFontSize: 0.9em;
@contactFontSize: 0.9em;

/* margins */

@pHeadingMargin: 1em 0;
@mBodyMargin: 0 1em;
@tBodyMargin: 0 4%;
@dBodyMargin: 0 3%;
@olLiLeftMargin: 8px;

/*MIXINS*/

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

.size(@font_size) {
    font-size: @font_size;
}

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

/* MOBILE STYLES */

body {
	font-family: "Open Sans", sans-serif;
	line-height: 1.5em;
    .commonProperties(@mBgColor, @mFontSize, @mBodyMargin);
}

header {
    text-align: center;
    background-color: #000000;
    .color(@paletteColor3);
    }

#title {
	display: inline-block;
    width: 80%;
    padding: 1em;
}

#about {
    width: 100%;
    height: 350px;
}

main {
    background-color: #FFFFFF;
    height: 800px;
    padding: 1em;
    overflow: scroll;
}



p, h2, h3 {
	margin: @pHeadingMargin;
}

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

h1 {
    .size(@h1FontSize);
    .color(@paletteColor3);
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    line-height: 1em;
}

h2 {
    .size(@h2FontSize);
}

#h2center {
        text-align: center;
    }

h3 {
    .size(@h3FontSize);
	font-style: italic;
}

.body_ul {
    list-style: disc;
    margin-left: 2em;
}

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

li {
	line-height: 1.5em;
}

table {
    border: 2px solid #000000; 
    margin: auto;
    width: 300px; 
}

td {
    border: 1px solid #000000; 
    color: #363636; 
    font-weight: bold; 
    font-size: .95em; 
    padding: .5em; 
    text-align: center; 
}

th {
    background-color: #000000;
    color: #FFFFFF; 
    font-size: 1.15em; 
    font-weight: bold; 
    padding: .5em; 
    text-align: center; 
}

/*TABLE STYLES*/
table {
    border: 2px solid #000000; 
    margin: auto;
    width: 100%; 
}

#costs {
    margin-left: 1em;
    font-size: .90em;
    margin-bottom: 1em;
}

/* DEFINITION LIST STYLES - EVENT PAGES */

dt, dd {
    margin: 2px 0;
}

dt {
    cursor: pointer;
    font-size: 1.2em;
}

dt:hover {
    color: #FF0000;
}

dd {
    font-size: 1.1em;
    font-style: italic;
    padding-left: 2em;
}

/* DEFINITION LIST - ARROR ICON LEFT */

dt:before {
    border: 0.5em solid;
    border-color: transparent transparent transparent #f2eeef;
    content: '';
    display: inline-block;
    height: 0;
    margin-right: 0.5em;
    vertical-align: middle;
    width: 0;
}

dt:hover:before {
    border-left-color: #FF0000;

}

/* DEFINITION LIST - ARROW ICON DOWN */

dt.open:before {
    border-color: #f2eeef transparent transparent transparent;
    border-bottom-width: 0;
}
    
dt.open:hover:before {
    border-left-color: transparent;
    border-top-color: #FF0000;
}

.bold {
    font-weight: bold;
}

/* FOOTER STYLES */
footer {
	font-style: italic;
    .color(@paletteColor1);
	text-align: center;
    padding: 2px;
    background-color: #000000;
    clear: both;
}

footer li a {
    .color(@paletteColor1);
}

footer li a:hover {
    color: #999999;
}

footer li a:visited {
    .color(@paletteColor3);
}

/* display:in-line block allows for the the social media icons to align next to eachother. */
.media li {
    display: inline-block;
    font-size: 2.5em;
    letter-spacing: 15px;
}

.media li a:hover{
    color: #999999;
}

#container {
	margin: 0 1em;
    height: 100%;
}

#summary {
    .size(@summaryFontSize);
	font-style: italic;
	line-height: 115%;
	letter-spacing: 1px;
}

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

#designer {
    .size(@designerFontSize);
	line-height: 1.1em;
    .color(@paletteColor1);
}

#designer a {
   .color(@paletteColor1);
}

#designer a:hover {
    color: #999999;
}

#designer a:visited {
    .color(@paletteColor3);
}

#contact {
	letter-spacing: 1px;
    overflow-wrap: break-word;
    .size(@contactFontSize);
    .color(@paletteColor1);
}

#contact a {
   .color(@paletteColor1);
}

#contact a:hover {
    color: #999999;
}

#contact a:visited {
    .color(@paletteColor3);
}

#copyright {
    .size(@designerFontSize);
}

/* FORM STYLES */

form {
    background: url(../images/ace_images/ace8.jpg) no-repeat center;
    background-size: auto;
    background-color: #999999;
    background-blend-mode: screen;
    display: inline-block;
    width: 100%;
}

form label {
    display: block;
    float: left;
    clear: left;
    font-size: 1em;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    width: 100%;
    
}

input {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
}

textarea {
    max-width: 210px;
    margin-left: 10px;
}

select {
    float: left;
    clear: right;
    margin-top: 12px;
    margin-left: 10px;
}

#honeypot {
    display: none;
}

#mySubmit {
    float: left;
    clear: left;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 170px;
}

#required {
    font-size: .80em;
    text-align: left; 
    
}

.successPage {
    margin-left: 1em;
}

/* GALLERY MOBILE STYLES */
.bigPhoto {
    display: none;
}

/* CSS GRID MOBILE */
.more-content {
    padding: 0px 10px 0 10px;
}
.grid {
	display: grid;
	padding: 0 30px 0 30px;
}

.item1 {
	grid-column: 1 / span 12;
	grid-row: 1;
}

.item2 {
	grid-column: 1 / span 12;
	grid-row: 2;
    font-style: italic;
}

aside {
    display: none;
}

/* TABLET STYLES */

@media only screen and (min-width: 600px) {
    
	body {
        .commonProperties(@tBgColor, @tFontSize, @tBodyMargin);
	}
    
    #title {
        display: block;
        width: 400px;
        max-height: 130px;
        margin-left: auto;
        margin-right: auto;
    }

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

	h3 {
		margin-top: 0;
	}

	ol {
		margin-bottom: 15px;
	}

	ol li {
		margin-left: @olLiLeftMargin;
	}

	ul {
		margin-bottom: 1em;
	}
    
    
    /* CSS GRID TABLET */
    
    .grid {
    grid-gap: 10px;
	padding: 0 5px 0 5px;
    }

	.item1 {
		grid-column: 1 / span 6;
		grid-row: 1;
	}

	.item2 {
		grid-column: 7 / span 6;
		grid-row: 1;
	}
    
    /*FORM STYLES FOR TABLET & DESKTOP VIEW */
    
    form { 
        display: inline-block;
        padding-top: 35px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    form label {
        float: left;
        clear: left;
        display: block;
        font-size: 1em;
        text-align: right;
        margin-top: 10px;
        padding-right: 5px;
        width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    input, textarea{
        float: left;
        clear: right;
        display: block;
        margin-top: 10px;
        margin-left: 0;
    }

    select {
        float: left;
        clear: right;
        margin-top: 12px;
        margin-left: 0;
    }
    
    #mySubmit {
        float: left;
        clear: left;
        display: block;
        margin-left: 320px; 
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    /*TABLE STYLES FOR TABLET/DESKTOP VIEW*/
    table {
        width: 500px;
    }
    
    #costs {
    margin-left: 14em;
    font-size: .90em;
    }

    /* GALLERY STYLES */
    .gallery-photos {
        display: inline-flex;
        max-height: 500px;
        overflow: hidden;
        border: 2px solid black;
        background-color: #E7E7E7;
    }

    .thumbnail {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        overflow: scroll;
        padding: 1px 0 10px 0;
    }

    .thumbnail img {
        display: flex;
        width: 140px;
        height: 100px;
        padding: 1px;
        border: 1px solid #111111;
        background-color: #FFFFFF;
    }

    .bigPhoto {
        display: flex;
        flex: 3;
        flex-wrap: wrap;
        max-height: 33em;
        margin: 15px;
        padding: 10px;
        border: 1px solid #111111;
        box-shadow: -10px 5px 5px #111111;
        background-color: #FFFFFF;
    }

    .bigPhoto img {
        width: 100%;
        height: 30em;
    }

    img {
        display: inline;
    }
    
    #caption {
        font-style: italic;
    }
}

/* DESKTOP STYLES */

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

    html, body {
        height: 100%; /* set height to 100% along with .main to allow aside to extend full height */
    }
    
	body {
        .commonProperties(@dBgColor, @dFontSize, @dBodyMargin); 
	}
    
    main {
        float: left;
        width: 75%;
        overflow: auto;
    }
    
    /*display and confirgures aside in desktop view*/
    aside {
        display: inline-block;
        float: right;
        width: 25%;
        height: 800px;
        overflow: hidden;
        background-color: #FFFFFF;
    }
    
    .social {
        display: block;
        width: 235px;/* match with iframe width in html to display properly */
        height: 420px; /* match with iframe width in html to display properly */
        margin: 0 auto;
        border: 2px solid #999999;
        float: right;
    }

   
    /* DESKTOP FORM CENTERING */
    
    form label {
        width: 350px;
    }
    
    #mySubmit {
        margin-left: 350px;
    }
    
}