/**
*  File:        LO-Home.css
*  Description: CSS special for the Light Omega home page
*  Created:     4/8/16
*  By:          Gordon Kramer
*/

a:focus {
    outline: none !important;  /* Remove Bootstrap's default focus outline around links */
}
#wrapper, nav {
    width:960px;
    margin:0 auto;
    background: white;
}
#wrapper {  /* Allow background to translucently show thru main content region */
    background: rgba(255,255,255,0.5);
}

/* Allow background to auto-adjust to body size */
body {
    padding-top: 50px;  /* Adjust for height of navbar (dflt is 50) */
    background-image: url('../../images/index/bkgd-rhodo.jpg') !important;
    /*background-image: url('../../images/index/bkgd-clouds.jpg') !important;*/
    background-size: cover !important; /* Allow background to auto-adjust to body size */
    background-repeat:no-repeat;
    background-position: center center;
    background-attachment:fixed;
    /*background-color:#e0e0ff !important;*/
}
/* Include padding and borders in box dimensions (default is content-box, where
    nominal size includes ONLY the contents) */
div {
    box-sizing: border-box;
    background-size: cover; /* For boxes with background images, stretch to cover box dimensions */
    background-repeat:no-repeat;
}
/* Input placeholder pseudo-classes/elements, to darken the 'search Light Omega' placeholder */
#query::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #444;
}
#query::-moz-placeholder { /* Firefox 19+ */
  color: #444;
  opacity:100%;
}
#query:-ms-input-placeholder { /* IE 10+ */
  color: #444;
}
#query:-moz-placeholder { /* Firefox 18- */
  color: #444;
}

.aNoBottomMargin {
    margin-bottom:0 !important;
}
.whiteGlow {    /* Add as class to text to make it stand out better against lighter background */
    text-shadow: 0 0 1px #FFF;
}

.centered {
    text-align: center;
}

.bkdg60PctWhite {
    background-color: rgba(255,255,255, 0.6) !important;
}
.bkdg90PctWhite {
    background-color: rgba(255,255,255, 0.9) !important;
}
/* Positioning and appearance of slideshow (aka carousel) left/right buttons:
    Expand container (<a>) to enlarge icon, make sure it positions at mid-carousel vertically;
    The opacity rule keeps it from fading to translucent when NOT hovered.
*/
a.carousel-control span.glyphicon {
    font-size:3.6em;
    color:#F4F6F9 !important;
}
.carousel-control {
    opacity:1.0 !important;
    top:50% !important;
    /*text-shadow: 0 1px 2px rgba(0,0,0,.3) !important;*/
}
/* Thanks to http://stackoverflow.com/questions/18609819/how-to-flip-glyphicon-icon for info on how to horizontally
   flip a glyphicon so Play button can point left: */
.icon-flipped {

    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}

/* ===========================  NAVIGATION STYLES ================================ */
/* Navbar positioning */
#lo-home-nav.navbar-default {
    /*margin-top:3px;*/
}
#lo-home-nav.navbar-default li a, #lo-home-nav.navbar-default .navbar-brand {
    color:#0c4da9;  /* Dk blue from ul corner of default slide */
}
/* Background for main nav + dropdowns */
#lo-home-nav.navbar-default {
    background-color: #B3CAD6;  /* a little more blue  #B3CAD6 */
    border:none;
}
#lo-home-nav.navbar-default ul.dropdown-menu {
    background-color: rgba(179,202,214, 0.95) !important; /* Same blue as navbar, with translucency */
    border:none;
}

/* Link color inside dropdowns */
.dropdown-menu>li>a {
    color:#003 !important;
}
/* Dropdown items: Remove focus background band of color, show underline instead */
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a {
    background-image:none !important;
    background-color:transparent !important;
    text-decoration:underline !important;
}
li.dropdown.open, li.dropdown.open > a.dropdown-toggle {
    background: #CEDCE2 !important;  /* Lighter blue bkgd for headings of open dropdown menus (top level only) */
}
/* Increase font size of TOP level menu items: */
/*  also reduce spacing between via padding */
ul.nav > li.dropdown > a.dropdown-toggle {
    font-size:1.1em;
}
/* Slightly reduces horizontal spacing between top-level items (from 15px) : */
.nav > li > a {
    padding: 15px 11px !important;
}
.navbar-form {
    padding-right:10px !important; /* Reducing LR padding helps eliminate menu-wrapping in Chrome */
}
/* Background and border for search form inside navbar */
.navbar-form input, .navbar-form button {
    background:rgba(255,255,255,0.3);
    border:solid white 1px;
    font-size:1.0em;
}
.navbar-form input {
    padding:3px 6px;
    width:20em !important;
}
.navbar-form button {
    color:#0c4da9;  /* Match menu links */
    border-color: #4B90F2 !important;  /* Lighter version of same */
    padding: 6px 18px !important;  /* Grow the horiz padding on buttons to enlarge them (from Bootie default of 12px) */
}
#searchForm {   /* Dropdown search form */
    position: absolute;
    right:0px;
    top:45px;
    font-size:0.8em;
    background:#B3CAD6;
    padding:6px;
    display:none;
}
#searchForm button {
    font-size:1.25em;
    color:#0c4da9;
    background:#E8F2F7;
}
#searchForm input {
    font-size:1.35em;
    width:15em;
    display:inline-block;
}


/* Support for Bootstrap sub-menus, thanks to http://bootsnipp.com/snippets/featured/multi-level-navbar-menu */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}
.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    /* Not at all obvious, but this is the CARET color in the submenu links - matched to that of main menu items */
    border-left-color: #0C4DA9;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color: #fff;    /* Hover color for carets in submenus */
}
.dropdown-submenu.pull-left {
    float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}


/* ==================== TILES (GENERAL AND SPECIFIC) =============================== */

.inner {
    padding:10px;
}
div[class^="col-md"] {
    padding:10px;
    color:white;
}

.tileTitle, .tileSubtitle {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    /*font-weight: bold;*/
    letter-spacing:1px;
}
.tileTitle {
    font-size:1.75em;
    line-height: 1.1em; /* Shrink the line-height so it looks 'together' in case it wraps */
    margin-bottom: 2px; /*  and add a little margin to separate from next thing down */
}
.tileSubtitle {
    font-size:1.4em;
}
.tileContent {
    font-size: 1.1em;
    padding-top: 10px;
}
.tileContent a, .tileContent a:link, .tileContent a:visited {
    /*color:rgba(255, 255, 255, 0.8);*/
    color:white;
    display:inline-block;
    margin-bottom:8px;
}

/* Slideshow row -------------------------------------------------------------------- */

#slideshow {
    padding:0;
    margin-top:3px;
}

/* Light Omega (Intro) row ------------------------------------------------------------------ */
#intro .inner>div {
    /*background-image: url('../images/tile-bkgd-realms.jpg');*/
    height:120px;
}
#intro .inner div[class^="col-md"] {
    height:120px;
    /*background: #021942;*/    /* Dark blue */
    background: #2D2153;    /*Picked up from top center of Spir Resources tile*/
    /*background: rgba(2,25,66,0.4);*/   /* Same color as 021942, with opacity added */
}
#LOLinks {
    padding-top:2em;
}
#LOLinks a {
    font-size: 0.85em;
}

/* MAIN row -------------------------------------------------------------------------------- */

.row#rowMain div[class^="col-md"] {  /* Fixed heights for all columns within a common row: */
    height:710px;
}

#rowMain .col-md-4 div .inner { /* TEMPORARY */
    background: darkgreen;
}
/* === Left column: ==== */
#teachings {
    height:350px;
}
#teachings .inner {
    height:340px;
    background-image: url('../../images/index/tile-bkgd-teachings.jpg') !important;
    color:white;
}
#teachings .tileContent a, #teachings .tileContent a:link {
    font-size:1.1em;
}

#OWM {
    height:360px;
}
#OWM .inner {
    height:350px;
    background-image: url('../../images/index/tile-bkgd-OWM.jpg') !important;
}
#OWM .tileContent {
    font-size: 1.1em;
}

/* === Middle column: ==== */
#bookshop {
    height:220px;
}
#bookshop .inner {
    height:210px;
    background-image: url('../../images/index/tile-bkgd-bookshop.jpg') !important;
}
#bookshopItems a, #bookshopItems a:link {
    color:#FCF5A4;  /* pale mustard yellow */
    font-weight:bold;
    font-size:0.85em;
}
#bookshopItems div {
    line-height: 1.2em;
}
#alignment {
    height:320px;
}
#alignment .inner {
    height:310px;
    background-image: url('../../images/index/tile-bkgd-alignment.jpg') !important;
}
#alignment .inner div {
     /*font-family: 'Simonetta',Helvetica,Arial,sans-serif !important;*/
     /*font-size:2em !important;*/  /* size increase was to compensate for smaller 'look' of Simonetta */
}
#alignment .tileSubtitle a, #alignment .tileSubtitle a:link {
    color:#FCFC71;  /* Same yellow as links in Spir Resources tile */
}

/* New tile, replaces Practice of Alignment and Join combined, 300w x 480h   tile-bkgd-guruji-ma.jpg*/
#guruji-ma {
    height:480px;
}
#guruji-ma .inner {
    height:470px;
    background-image: url('../../images/index/tile-bkgd-guruji-ma.jpg') !important;
}

/* Prac. of Align. listen link - needs special treatment because Js code swapping
    out link content interferes with normal css for link (but not sure why???) */
#paListenLink, #paListenLink:link {
    text-decoration:none;
}
/* Prevent Listen link from having visible underline when active */
#paListenLink, #paListenLink:hover, #paListenLink:active {
    text-decoration:underline;
}
#paRewindBtn {   /* The rewind button for PA audio; hidden by default */
    margin-left:3px;
    background: transparent;
    font-size:0.7em;
    /*display:none;*/
}

#join {
    height:170px;
}
#join .inner {
    height:160px;
    background-image: url('../../images/index/tile-bkgd-join.jpg') !important;
    cursor:pointer;
}
#join .tileSubtitle, #join .tileTitle {
    color:#442603;  /* Dark brown */
}
#join .tileTitle {
    font-size:2.4em;
}
#join .tileSubtitle {
    font-size:1.5em;
    /*text-align:left;*/
}

/* === Right column: ==== */
#msg-light {
    height:300px;
}
#msg-light .inner {
    height:290px;
    background-image: url('../../images/index/tile-bkgd-messages.jpg') !important;
}
#relationships {
    height:210px;
}
#relationships .inner {
    height:200px;
    background-image: url('../../images/index/tile-bkgd-relationships.jpg') !important;
    cursor:pointer;
}
#relationships-links a, #relationships-links a:link {
    font-size: 1.2em;
    color:white;
}
#forum {
    height:200px;
}
#forum .inner {
    height:190px;
    background-image: url('../../images/index/tile-bkgd-forum.jpg') !important;
    /*cursor:pointer;*/
    padding:20px 0 0 20px;
}
#forum .tileTitle {
    /*color:#F771B4;*/
    font-size: 1.8em;
}
#forum .tileSubtitle {
    font-size:1.7em;
}


/* Teaching the Heart / Resources row ---------------------------------------------------------------- */
.row#teachingHeartResources div[class^="col-md"] {  /* Fixed heights for all columns within a common row: */
    height:345px;
}
.row#teachingHeartResources div[class^="col-md"] .inner {
    height:335px;
}
#teaching-heart {
    cursor:pointer; /* Entire tile is a link */
}
#teaching-heart .inner {
    /*background: #a98e41;*/
    background-image: url('../../images/index/tile-bkgd-teaching-the-heart.jpg');
}
#teaching-heart .tileContent {
    font-size:1.2em;
}
#resources .inner {
    /*background: #828d2d;*/
    background-image: url('../../images/index/tile-bkgd-resources.jpg');
    color:#003;  /* formerly #2f3a2e */
}
#resources .tileTitle {
    color:white;
    margin:10px 0 10px 1em;
}
#resources .tileContent a, #resources .tileContent a:link {
    color:#FCFC71;
    font-size:1.3em;
}
#resources .tileContent div {
    margin-bottom:3px;
}
/*
#resources .tileContent a, #resources .tileContent a:link {
    color:#FCFC71;
    font-size:1.3em;
}
#resources .tileContent div {
    margin-bottom:8px;
}
*/


/* Footer row ---------------------------------------------------------------- */
#footer {
    text-align:center;
    background:#122341;
    margin-bottom:5px;
    padding:15px 0;
}
#footer > div a {
    font-size:1.1em;
}
/*#footer a {
    padding:5px;
    border:solid white 1px;
}*/

#footer div, #footer div a, #footer div a:link {
    color:white;
}

#footer a:not(:last-child) {
    margin-right: 2em;
}

/* ======================================== */