@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600|Raleway:400,700|Lobster:400,700|Oswald:400,700");

body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


h1 {
  font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size:3em;
  line-height: 1.1;
  color: inherit;
}

readonly { background: red; }

h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Oswald", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

a, a:hover {
  text-decoration:none;
}

.theme-dropdown .dropdown-menu {
  display: block;
  position: static;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.container-header {
  margin-left: 0px;
  margin-top:0px;
  padding-bottom:5px;
  padding-left: 0px;
}

.row-header {
  margin:0px;
}

.no-top {
  margin-top:0px;
  padding-top:0px;
}

.green            { color:#008000; }
.red              { color:#ff0000; }
.gray             { color:#cccccc; }
.lightgray        { color:#cccccc; }
.blue             { color:#0000ff; }
.pink             { color:#ef3cde; }
.yellow           { color:yellow;  }
.black            { color:black;   }
.white            { color:white;   }

.w75              { width:75px; }
.w150             { width:150px; }
.w200             { width:200px; }
.w250             { width:250px; }
.w350             { width:350px; }
.w600             { width:600px; }
.w900             { width:900px; }

.h75              { height:75px; }
.h150             { height:150px; }
.h200             { height:200px; }
.h250             { height:250px; }
.h600             { height:600px; }
.h900             { height:900px; }

.m5               { margin: 5px; }
.m10              { margin: 10px; }
.m15              { margin: 15px; }
.m20              { margin: 20px; }

.mb5              { margin-bottom: 5px; }
.mb10             { margin-bottom: 10px; }
.mb15             { margin-bottom: 15px; }
.mb20             { margin-bottom: 20px; }
.mb50             { margin-bottom: 50px; }

.pb5              { padding-bottom: 5px; }
.pb10             { padding-bottom: 10px; }
.pb15             { padding-bottom: 15px; }
.pb20             { padding-bottom: 20px; }
.pb50             { padding-bottom: 50px; }

.p5              { padding: 5px; }
.p10             { padding: 10px; }
.p15             { padding: 15px; }
.p20             { padding: 20px; }

.minus5           { margin-top: -5px; }
.minus10          { margin-top: -10px; }
.minus15          { margin-top: -15px; }
.minus20          { margin-top: -20px; }

.top5             { margin-top: 5px; }
.top10            { margin-top: 10px; }
.top15            { margin-top: 15px; }
.top20            { margin-top: 20px; }
.top30            { margin-top: 30px; }
.top40            { margin-top: 40px; }
.top50            { margin-top: 50px; }
.top60            { margin-top: 60px; }
.top70            { margin-top: 70px; }
.top80            { margin-top: 80px; }
.top90            { margin-top: 90px; }
.top100           { margin-top: 100px; }

.t10               { font-size: 10px; }
.t11               { font-size: 11px; }
.t12               { font-size: 12px; }
.t13               { font-size: 13px; }
.t14               { font-size: 14px; }
.t15               { font-size: 15px; }

.gallery {
  width: 100%;
  *width: 99.94877049180327%;
  margin: 0;
  padding: 0;
}

.gallery.grid li {
  margin: 2px 5px;
}


.gallery.grid li {
    margin: 2px 5px;
    display:block;
}

.gallery.grid li:hover {
	background:#eee;
}

.gallery.grid li {
    display: inline-block;
    border-top: 1px solid #eee;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #eee;
    padding: 6px;
    position: relative;
    -moz-box-sizing: border-box;
    border-radius: 3px 3px 3px 3px;
    background: #fff;
}

.gallery a {
    display: block;
}

.gallery p {
	margin-top:5px;
	text-align:center;
	color:#000;
}

.world {
	background: url(../../images/the-earth.jpg) #eeeeee;
}

.birthday {
  background: url(../../images/birthday-background.jpg) #eeeeee;
}


.hidden { display: none }

.stats {
   position: absolute;
   top: 6px;
   left: 6px;
   background:white;
   color: white;
   font: bold 20px Helvetica, Sans-Serif;
   letter-spacing: -1px;
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px;
   border-radius:5px;
}

.stats2 {
   position: absolute;
   top: 10px;
   left: 9px;
   background:white;
   color: white;
   font: 9px Helvetica, Sans-Serif;
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 1);
   padding: 2px;   
}

.jpx {
   color:red; border-bottom:2px solid red;
}







#scroll_box {
height: 200px;
overflow: auto;
margin: 1em 0;
}

/*------[ courtesty of http://css.maxdesign.com.au/listamatic2/vertical14.htm ]----------*/

#navcontainer ul { margin: 0px; padding: 0px; list-style-type: none; }
#navcontainer li { margin: 0px; padding: 0px; line-height: 20px; }
#navcontainer ul li a { display: block; padding-left: 10px; background-color: #e0e9e9; border-bottom: 1px solid #ddd; border-top: 1px solid #fff; }
#navcontainer ul li a:link, #navcontainer ul li a:visited { color: #000; text-decoration: none; }
#navcontainer ul li a:hover { background-color: #edf2f2; color: #999; }
#navcontainer ul ul li a { display: block; padding-left: 40px; background-color: #f1f1f1; }
#navcontainer ul ul li a:link, #navcontainer ul ul li a:visited { color: #000; text-decoration: none; }
#navcontainer ul ul li a:hover { background-color: #eee; color: #999; }
/* selected states */
#navcontainer ul li a#current { color: #000; background-color: #ccc; }
#navcontainer ul ul li a#subcurrent { color: #000; background-color: #e7e7e7; color:#999; }
/*hide from ie-mac\*/
* html #navcontainer li { height: 1px; }
/* end hack */
/* \*/
* html #navcontainer a { height: 1px; }
/*  */






/*
 * Callouts
 *
 * Not quite alerts, but custom and helpful notes for folks reading the docs.
 * Requires a base and modifier class.
 */

/* Common styles for all types */
.bs-callout {
  margin: 20px 0;
  padding: 20px;
  border-left: 3px solid #eee;
}
.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}

/* Variations */
.bs-callout-danger {
  background-color: #fdf7f7;
  border-color: #eed3d7;
}
.bs-callout-danger h4 {
  color: #b94a48;
}
.bs-callout-warning {
  background-color: #faf8f0;
  border-color: #faebcc;
}
.bs-callout-warning h4 {
  color: #c09853;
}
.bs-callout-info {
  background-color: #f4f8fa;
  border-color: #bce8f1;
}
.bs-callout-info h4 {
  color: #3a87ad;
}


















/* http://smarchal.com/twbscolor/?bd=e74c3c&bh=c0392b&cd=ecf0f1&ch=ffbbbc */


.navbar-default {
    background-color: #e84c3d;
    border-color: #c1392b;
    border-radius: 0px;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #feae95;
}
.navbar-default .navbar-nav > li > a {
    color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #feae95;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #feae95;
    background-color: #c1392b;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #feae95;
    background-color: #c1392b;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #feae95;
    border-bottom-color: #feae95;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #feae95;
    border-bottom-color: #feae95;
}
.navbar-default .navbar-toggle {
    border-color: #c1392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #c1392b;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #ffffff;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #feae95;
    }
	
	h1 {
	font-size: 1.7em;
	font-weight:bold;
	}
	
	h2 {
	font-size: 1.5em;
	font-weight:bold;
	}
	
	h3 {
	font-size: 1.3em;
	font-weight:bold;
	}
	
}








.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: #428bca;
    color:#fff;
}


.dropdown-header {
    font-size:16px;
	color: #000;
	font-weight:bold;
}


.center {
    text-align:center;
}



.videowrapper {
    float: none;
    clear: both;
    max-width:873px;
    max-height:525px;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    max-width:873px;
    max-height:525px;
    width: 100%;
    height: 100%;
    max-height:525px;
}




.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.swfcontainer { position: relative; padding:0px; margin-bottom:10px; }

.jpx-credit { border-top:1px solid #eee; font-size:12px; border-bottom:1px solid #ccc; margin-bottom:10px; padding-left:10px; background:#f8f8f8; }

.divider { border-bottom:1px solid #ccc; margin-top:10px; margin-bottom:10px; }


.nav-pills > li > a {
    border-radius: 0px;
}














.gallerystats {
   background:white;
   padding: 10px;
   margin-bottom:20px;
}




#myContent {
	color:red;
	text-align:center;
	font-size:40px;
}





.new-ecard {
    background: url(img/new.png) no-repeat scroll 0 0 transparent;
    display: block;
    height: 42px;
    left: 165px;
    position: absolute;
    top: 6px;
    width: 42px;
}

.diary-date {
	background:beige;
	border-bottom:1px solid #ccc;
	font-weight:bold;
	font-size:1.2em;
}




















#ecard-users .btn {
	text-align:left;
}

#ecard-users a, li {
	border:0px;
}

#ecard-users a:hover {
	background:#f1f1f1;
}

#ecard-users .active {
	background:#ccc;
	color:#fff;
}

















.controls{
  padding: 10px 10px 10px 10px;
  background: #333;
  color: #eee;
  border-radius: 4px;
  margin-bottom:5px;
}

button{
  display: inline-block;
  padding: .4em .8em;
  background: #666;
  border: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
  margin:5px;
}

.wg { color:white; font-weight:bold; font-size:30px; }

.box-shadow--2dp {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.box-shadow--3dp {
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12)
}
.box-shadow--4dp {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2)
}
.box-shadow--6dp {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2)
}
.box-shadow--8dp {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2)
}
.box-shadow--16dp {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2)
}

.mce-btn-group .mce-btn {
    float: left;
}

.scrollbox { 
	background:#000;
	padding: 15px 20px 20px 20px; 
	margin: 10px 0px;
	border-radius:5px;
}

label { font-weight: normal; }

/* http://bootsnipp.com/snippets/featured/link-to-top-page */

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
}




.hr {
    border: none;
    height: 20px;
    width: 100%;
    height: 50px;
    margin-top: -20px;
    margin-bottom: 60px;
    border-bottom: 1px solid #1f1209;
    box-shadow: 0 20px 20px -20px #333;
}





#boy .fa {
    background: #02bcd5;
}

#girl .fa {
    background: pink;
}

#boy .fa {
 color:#fff;
 margin:0 5px;
 padding:8px 9px;
 font-size:20px;
 border-radius:50%
}

#girl .fa {
 color:#000;
 margin:0 5px;
 padding:8px 9px;
 font-size:20px;
 border-radius:50%
}