/***************************
* Fonts
****************************/

@font-face {
  font-family: snell-roundhand-font;
  src: url(/css/SnellBT-Regular.otf);
}


/***************************
* Classes (class tag)
****************************/



.button { 
    background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
    background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
    background:  -o-linear-gradient(top, #f3f3f3, #dddddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
    border-color:#000; 
    border-width:1px;
    border-radius:4px 4px 4px 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color:#333;
    cursor:pointer;
    display:inline-block;
    padding:6px 6px 4px;
    margin-top:10px;
    font:12px; 
    width:214px;
    font-weight: bold;
}

.button:hover { 
    background:#ddd; 
}

.body-standard {
    padding-top: 60px;
    padding-left: 40px;
    padding-bottom: 40px;
    padding-right: 40px;
}

/* Centered text (within .container) */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Container for divs to hold image/text */
.container {
  position: relative;
  text-align: center;

}

/* positioning within golden spiral image */
.golden-spiral-1 {
  position: absolute;
  top: 70%;
  left: 20%;
  transform: translate(-15%, -15%);
}

.golden-spiral-2 {
  position: absolute;
  top: 25%;
  left: 45%;
  transform: translate(-50%, -50%);
}

.golden-spiral-3 {
  position: absolute;
  top: 45%;
  left: 80%;
  transform: translate(-65%, -65%);
}


.grad1 {
    height: 100%;
    width: 100%;
    /*background: -moz-linear-gradient(top,  rgba(0, 0, 0, 0) 0%, rgba(246, 242, 242, 0.95) 100%); /* FF3.6+ */
    /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0, 0)), color-stop(100%,rgba(246, 242, 242, 0.95))); /* Chrome,Safari4+ */
    /*background: -webkit-linear-gradient(top,  rgba(0, 0, 0, 0) 0%,rgba(246, 242, 242, 0.95) 100%); /* Chrome10+,Safari5.1+ */
    /*background: -o-linear-gradient(top,  rgba(0, 0, 0, 0) 0%,rgba(246, 242, 242, 0.95) 100%); /* Opera 11.10+ */
    /*background: -ms-linear-gradient(top,  rrgba(0, 0, 0, 0) 0%,rgba(246, 242, 242, 0.95) 100%); /* IE10+ */
    /*background: linear-gradient(to bottom,  rgba(0, 0, 0, 0) 0%,rgba(246, 242, 242, 0.95) 100%); /* W3C */
    
    background: 
        linear-gradient(27deg,  rgba(10, 10, 10, 0) 0%,rgba(245, 151, 64, 0.89) 100%),
        linear-gradient(220deg, #4fd6b9 0%, #1fc8db 51%, #2cb5e8 75%);
        
    /*background-image: linear-gradient(10deg, rgba(255,0,0,0) rgba(255,0,0,0) 0%, rgba(255,0,0,0) 51%, rgba(255,0,0,0) 75%);
    color: white;
    opacity: 0.95;
    */
}

.h-skinny {
    font-family: Arial;
    font-weight: normal;
    color: #fff;
    text-align: center;
}


.h2-skinny {
    font-size: 1.8em;
    font-family: Arial;
    font-weight: normal;
    color: #fff;
}

.fancy {
    font-family: sans-serif;
    font-size: 16px;
    padding: 3px;
}

.reading-text{
    font-size: .8em;
    font-weight: normal;
    color: #fff;
    font-family: Arial;
    
}

.restDetails {
    font-size: 16px;
    font-weight: bold;
    display:none;
    background: #333;
    color: white;
    border: 2px solid #ddd;
    padding: 10px;
    padding-bottom: 5px;
    position: relative;
    width: 250px;
    box-shadow: 0px 0px 20px #004ab3; /* CSS3 */
    -moz-box-shadow: 0px 0px 20px #004ab3; /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #004ab3; /* Safari, Chrome */
    border-radius:15px 15px 15px 15px;
    -moz-border-radius: 15px; /* Firefox */
    -webkit-border-radius: 15px; /* Safari, Chrome */
}

.thumb {
    width: 150px;
    height: 150px;
}

.tweet-popup{
    display:none;
    background: #333;
    padding: 10px; 	
    border: 2px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%; left: 50%;
    z-index: 99999;
    box-shadow: 0px 0px 20px #999; /* CSS3 */
    -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
    border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px; /* Firefox */
    -webkit-border-radius: 3px; /* Safari, Chrome */
}

.moment-date{
    text-align: right;
    color: #64a7ea;
}
.moment-category{
    font-family: Arial; 
    font-size: 40px; 
    color: #fff;
}
.moment-title{
    font-size: 40px;
    font-weight: normal;
    float: left !important;
    margin: 0 auto;
    padding-left: 0;
    margin-left: 0;
    border-left-width: 0;
    color: #fff;
    text-align: center;
}

.moment-text{
    font-size: 14px; 
    font-family: 'Arial';
    color: #64a7ea !important;

}

.moment-link{
    color: #fff;
    font-size: 14px;
}

.moment-list-title{
    text-align: left;
    margin-bottom: 0;
}

.moment-list-date{
    text-align: center;
    margin-top: 0px;
    margin-bottom: 40px;
}




/***************************
* Start of popup CSS
****************************/
fieldset { 
    border:none; 
}

form.signin .tweetbox label { 
    display:block; 
    padding-bottom:7px; 
}

form.signin .tweetbox span { 
    display:block;
}

form.signin p, form.signin span { 
    color:#999; 
    font-size:16px; 
    line-height:18px;
    font-weight: bolder;
} 

form.signin .tweetbox input { 
    background:#666666; 
    border-bottom:1px solid #333;
    border-left:1px solid #000;
    border-right:1px solid #333;
    border-top:1px solid #000;
    color:#fff; 
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font:13px Arial, Helvetica, sans-serif;
    padding:6px 6px 4px;
    width:200px;
}

form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000;  }

img.avatar{
    width: 60px;
    height: 60px;
}


img.btn_close { /* Position the close button */
    float: right; 
    margin: -28px -28px;
    opacity: 1.0;
}

/***************************
* Identifiers (id tag)
****************************/

#dataSource{
    font-size: 0.7em;
    color: #999 !important;
}

#mask {
    display: none;
    background: #999; 
    position: fixed; left: 0; top: 0; 
    z-index: 10;
    width: 100%; height: 100%;
    opacity: 0.8;
    z-index: 999;
}

#tweetText{
    color: #999 !important;
    font-size: 12px;
}

#welcome-div {
   position: absolute;
   top: 200px;
   text-align: center;
   word-wrap: break-word;
   width: 57%;
   margin-left: 20%; 
   letter-spacing: .5px;
}

#welcome-text{
   border-left: 40px; 
   border-right: 40px; 
   line-height: 185%; 
   padding-top: 6px; 
   padding-bottom: 6px; 
   box-shadow:7px 0 0 rgba(255,255,255,0.5), -7px 0 0 rgba(255,255,255,0.5); 
   color: #000000; 
   background-color: rgba(255,255,255,0.5); 
   font-size:22px;
   font-family: Arial;
}

/***************************
* Rules
****************************/

/* Smartphone screens */
@media only screen and (max-width: 767px) {

   #welcome-text { 
       font-size: 16px;
       line-height: 200%
   }
   
   #welcome-div {
        width: 70%;
        margin-left: 15%;
   }
   
   .moment-date {
       text-align: left;
       margin-top: 0px;
   }
   
   .h-skinny {
       padding-top: 10px;
       font-size: 2.2em
   }

   .moment-category {
       font-size: 28px;
   }

/*}*/
/*** Make default navbar links display block at choosen breakpoint and adjust styles to fit...***/
/*@media (max-width: 62em) {*/
	.navbar-nav {
		padding-top: .425rem;
		padding-left: 0.75rem;
	}
	.navbar-nav .nav-item {
		float: none;
	}
	.navbar-brand {
		float: right;
	}
	.navbar-brand,
	.navbar-nav .nav-item {
		display: block;
	}
	.navbar-nav .nav-item + .nav-item {
		margin-left: 0;
	}

    .dropdown {
        list-style-type: none;
    }

	.dropdown-menu {
		position: relative;
		float: none;
        list-style-type: none; 
	}

    .xxx {
        list-style-type: none;
    }

}