// Common site fonts:
$site-base-font-family: Helvetica, Arial, sans-serif;
$site-base-font-weight: lighter;

// ========================================================
// SCSS Mixins, common style blocks/macros:
// ========================================================

//
// Shadow effect used on images and embedded videos.
//
@mixin my-box-shadow {
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.2) inset;
       -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.2) inset;
         -o-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.2) inset;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.2) inset;
}

//
// Mouse hover transition used in the main page.
//
@mixin my-mouse-hover-transition {
    -webkit-transition: 0.4s ease;
       -moz-transition: 0.4s ease;
         -o-transition: 0.4s ease;
            transition: 0.4s ease;
}

//
// Site background image and image sampling rules.
//
@mixin my-site-background {
    //background: url("../static/images/site-bg.png") repeat-y left top;
	background: url("../static/images/site-bg.png") left top;
	//background-size: 100% 100%;
	background-size: auto auto;
}

//
// Set a flex-box display in a portable way and
// aligns the content in the center of the parent box.
//
@mixin my-display-flex-center-align {
    display: -webkit-box;            // OLD - iOS 6-, Safari 3.1-6
    display: -moz-box;               // OLD - Firefox 19- (buggy but mostly works)
    display: -ms-flexbox;            // TWEENER - IE 10
    display: -webkit-flex;           // NEW - Chrome
    display: flex;                   // NEW, Spec - Opera 12.1, Firefox 20+

    -webkit-justify-content: center; // Safari 6.1+
    justify-content:         center; // Align horizontally

    -webkit-align-items:     center; // Safari 7.0+
    align-items:             center; // Align vertically
}