﻿body {
	min-height: 1000px;
	padding-top: 65px;
	background-color:#fff;
}

.btn {border-radius: 2px; }
.btn-primary {/*
    color: #fff;
    background-color: #2196F3;
    border-color: #2196F3;*/
}

.memberlist img {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    float: left;
    margin: -6px  5px 0 0;
}


.notiffcount {
    position: absolute;
    background-color: #fbff00;
    color: #f00;
    font-size: 9pt;
    font-weight: 700;
    z-index: 9;
    border-radius: 12px;
    padding: 3px 5px 1px 4px;
    width: 22px;
    text-align: center;
    margin-top: 2px;
}

.memberlist .online {
    border: 2px solid #7adc48;
}
.chat li {border:0 !important;padding-bottom:0 !important;}
.chat li div {
    background-color: #bef7c0;
    padding: 5px 10px;
    border-radius: 5px;
    display:inline-block;
    clear:both;
    font-weight: 400;
    max-width: 85%;
    min-width: 60%;
    
}
.chat .in {text-align:left;}
.chat .out {text-align:right;}
.chat .in div {background-color: #d5f2ff;}
.chat_list .list-group-item-text {
    /*display: flex;
    font-weight: 300;*/
    /*background-color: #eaeaea;*/
    /*padding: 5px 10px;*/
    /*border-radius: 0 0 5px 5px;*/
    border-bottom: 1px solid #e0dede;
}
.chat-header {
    margin: -20px;
    margin-bottom:20px;
    background-color: #009688;
    padding: 10px;
    color: #fff;
}
.chat-header img {
    border-radius: 20px;
}
.img-circle {
    border-radius: 20px 20px 0;
    border: 1px solid #c3c1c1;
}

.message-check-read-0 {/*margin-left:20px;font-size:11pt;*/color:#ff9800;}
.message-check-read-1 {/*margin-left:20px;font-size:11pt;*/color:#009688;}

.chatbox {}



/*
.list-group-item-text:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: #00aabb;
	border-left: 0;
	border-top: 0;
	margin-top: -10px;
	margin-left: -20px;
}
*/


.chat_list .list-group-item {
    padding: 10px 0;
    border:0;
}

.chat_list .text-muted {/*font-weight: 100;*/font-size:11pt;}
.chat_list .pull-right .text-muted {font-size:10pt;}

/*
.navbar-default {
	box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}    
*/
.navbar-default .navbar-nav>li>a {
	color:#fff;
	/*font-family:Roboto;*/
	font-size: 15px;
	/*font-size: 1.6rem;*/
	 padding-top: 17px;
}

.mpheader {
    background-color: #fff3ce !important;
    box-shadow: unset !important;
    border-radius: 2px !important;
    padding:10px !important;
}
.memberbuttons {display: inline-block;}

.btn-like {
    background-color: #ec166f;
    border-color: #ec166f;
}
#poetlikestatus {text-align:center;}


.fa             { margin-right: 3px; }
.fa-file-text   { color: #fdf8cb; }
.fa-quote-right { color: #fdf8cb; }
.fa-home        { color: #fdf8cb; }
.fa-users       { color: #fdf8cb; }
.fa-plus-square { color: #fdf8cb; }

.dropdown:hover .dropdown-menu {
  display: block;
  transition: 1s ease-in-out;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    color: #fff5a7;
    background-color: #aa0044 !important; /*#009ee4;*/
}

.container .jumbotron, .container-fluid .jumbotron {
    border-radius: 2px;
	box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.15);
    background-color: #fff;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: #96003c;
    /*border-bottom: 2px solid #fff;*/
    margin-bottom: -1px;
   
}

.navbar {
    min-height: 53px;
 /*   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
*/ }
/*
.navbar-nav>li>a {
    padding-top: 20px;
    padding-bottom: 20px;
} */   

.navbar-toggle {
    float: left;
    margin-left: 8px;
	border: 0;
    padding: 9px 3px;	
}    

.navbar-default  {
    
    background-color: #aa0044; /*#820d35;*/
    /*background: linear-gradient(30deg, #aa0044 0%, #d31b59 100%);*/
    background: linear-gradient(30deg, #E91E63 0%, #b02779 100%);

}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: unset; 
}

.navbar-default .navbar-brand {
    color: #fff;
    font-weight: 200;
    letter-spacing:0.4px;
}
a.navbar-brand:hover{
	color:#edffae !important;
}

.form-header-search {
	float:left;
	margin: 8px 20px;
}
.header-profile-photo {
	margin:-9px;
	margin-right:0px;
    border-radius: 17px;
    border: 2px solid #0f0;
    margin-top: -10px;
    
}

.navbar-brand {
	padding: 15px 16px;
	margin-top: 0px;
	/*color: #000;*/
    font-size: 16pt;
    line-height: 22px;
    /*text-shadow: -1px 1px 0 #607D8B;
    width: 231px;*/
    padding-right: 40px;
}

.container {
    /*min-width: 320px; */
}
.navbar-collapse {
	max-height:600px !important;
}
/*
.row {
    margin-right: -20px;
    margin-left: -20px;
}
*/

.col-md-12{
	/*margin: 0 -20px;
	margin-bottom:20px;*/
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	width:100%;
}


.col-md-1  { flex-grow: 1;  width: 8.33333333%	}
.col-md-2  { flex-grow: 2;  width: 15.66666667%	}
.col-md-3  { flex-grow: 3;  width: 24%			}
.col-md-4  { flex-grow: 4;  width: 32.33333333%	}
.col-md-5  { flex-grow: 5;  width: 40.66666667%	}
.col-md-6  { flex-grow: 6;  width: 49%			}
.col-md-7  { flex-grow: 7;  width: 57.33333333%	}
.col-md-8  { flex-grow: 8;  width: 65.66666667%	}
.col-md-9  { flex-grow: 9;  width: 74%			}
.col-md-10 { flex-grow: 10; width: 83.33333333%	}
.col-md-11 { flex-grow: 11; width: 91.66666667%	}	



.col-md-1, .col-md-2, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 {
	
	overflow: hidden;
	font-size: 1.5rem;
	margin:0 0.5% 15px 0.5%;
	padding:20px;
	background-color:#fff;
	border-radius: 3px;
	box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.15);
}

.message {
	background:url('/y/bg_christmas.jpg');
}

.h1, h1, h2, .h2 {
    font-size: 20px;
    font-weight: 500;
 
}
h3, h4 {
font-size: 18px;
font-weight: 300;

}

.h1, .h2, .h3, h1, h2, h3 {
    margin-top: -8px;
    /*font-family: Roboto;*/
    border-bottom:1px solid #eee;
    padding-bottom: 10px;
    color: #d40048;
    
}    	

.topicsbox ul {
	margin:0;
	margin-left:-40px;
}	
.topicsbox li {
    width: 48.2%;
    float: left;
    list-style: none;
    margin: 0 7px 5px 0;
}

.topicsbox li:nth-child(2n+2) {
	margin-right:0;
}


.topicsbox li a {
    width: 100%;
    display: inline-block;
    background-color: #ece9e9;
    color: #795548;
    padding: 5px 14px;
    border-radius: 2px;
}

.pod_poet-photo {
	width:42px;
	height:42px;
	float:left;
	overflow:hidden;
	margin-right:15px;
	border-radius: 5px;
}

.footer {
    background-color: #880539;
    padding: 10px;
    color:#fff;
    text-align: center;
    font-size:10pt;
} 

.footer a {
    margin: 3px 3px;
    color: #fff;
    background-color: #71032f;
    padding: 0px 6px;
    border-radius: 3px;
    line-height: 2em;
    display: inline-block;
}
.footer a.fli--nk {
	background-color: #00334a;
    padding: 5px 20px;
    color: #607D8B;
    display:inline-block;
    border-radius:2px;
}

.footer hr {
	border-top: 1px solid #7d0535;
	    margin-top: 10px;
    margin-bottom: 10px;
}
.text-muted {
    color: #aaa;
}

.blink {
   animation: blinker 1s linear infinite;
}
.blink div {background-color:#FFEB3B !important;}
@keyframes blinker {
    30% {
      opacity: .5;
    }
  }

  .tri-right.border.left-in:before {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -40px;
	right: auto;
  top: 30px;
	bottom: auto;
	border: 20px solid;
	border-color: #666 #666 transparent transparent;
}
.tri-right.left-in:after{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
  left: -20px;
	right: auto;
  top: 38px;
	bottom: auto;
	border: 12px solid;
	border-color: #f00 #f00 transparent transparent;
}


.list-unstyled li {
	margin: 8px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;

}
.list-unstyled li span {
    color: #444;
    font-size: 10pt;
    float: right;
}

.sep {
	margin: 10px 0;
}

.quote {
	line-height: 170%;
    text-align: center;
    font-weight: 300;
    font-size: 18pt;
    padding:30px;
}


.gradient-45deg-green-teal {
    background: #43A047;
    background: -webkit-linear-gradient(45deg, #90d293 0%, #1de9b6 100%);
    background: linear-gradient(45deg, #90d293 0%, #baffee 100%);
}

.quote .author {
	font-size: 12pt;
    font-weight: 500;
    font-style: italic;
    border-top: 1px solid #86d0a3;
    width: 100%;
    display: inline-block;
}

/*  poet page start */



.poetphoto {
	width:32px;
	height:32px;
	overflow:hidden;
	float:left;
}
.colreset {
	padding:0;
	background:unset;
	border:0;
	box-shadow:unset;
}

.colreset .col-md-11 {
	width:99%;
}

.poetpagephoto {
	width: 60px;
    height: 60px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
    border-radius: 30px;
    margin: 14px;}

.poetheader {
	background-color: #e8d3ff;
}

.poetnav {
	display: inline-flex;
}
/*
.poetheader span{
    float: right;
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
    color: #337477;
    font-weight: 100;
}
*/
.poetheader h2, .poetheader h1 {
	border-bottom: unset;
	margin-top: 9px;
}



.poetnav a {
    padding: 8px 15px;
    color: #ffffff;
    background-color: #804eb3;
    border-radius: 2px 2px 0 0;
    margin-right: 8px;
    margin-bottom: 0px;
    display: inline-block;
}

.poetnav {
    /*width:600px;*/
    text-align: center;
}
.poetnav a:last-child {
	margin-right:0;
	
}

/********** POEM PAGE /START *********/
#poemlikestatus {margin-right: 2em;}


.rating { 
    border: none;
    float: left;
  }
  
  .rating > input { display: none; } 
  .rating > label:before { 
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
  }
  
  .rating > .half:before { 
    content: "\f089";
    position: absolute;
  }
  
  .rating > label { 
    color: #ddd; 
   float: right; 
  }
  
  /***** CSS Magic to Highlight Stars on Hover *****/
  
  .rating > input:checked ~ label, /* show gold star when clicked */
  .rating:not(:checked) > label:hover, /* hover current star */
  .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
  
  .rating > input:checked + label:hover, /* hover current star when changing rating */
  .rating > input:checked ~ label:hover,
  .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
  .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
  #ratingstars span {    margin-top: 7px;
      display: inline-block;}


/********** POEM PAGE /END *********/


.articlebody {
	font-size: 12pt;
    line-height: 160%;
	/*font-family: georgia;*/
    color: #000;    
    /*font-weight: 300;*/
   /* white-space: pre;*/

}

.mainblock {
	padding: 20px;
    background-color: #fff;
    margin: 5px;
	width: 58%;
    float:left;
    flex-grow:3;
    box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.15);
    max-width: 801.656px;
}

.sideblock {
	padding: 0px;
	max-width:340px;
    
    flex-grow:1;
    
}

.sideblock-in {
	background-color: #fff;
	margin: 5px;
	padding: 20px 15px;
    margin-bottom: 10px;
    box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.15);
}

.column2 li { width: 50%; float: left; }
.column5 li { width: 20%; float: left; }
/* poet page end */ 

a.loginfacebook {
	background-color: #4267b2;
    border-radius: 24px;
    margin: 8px;
    color: #fff !important;
}

a.logingoogle {
	background-color: #f95d4d;
    border-radius: 24px;
    margin: 8px;
    color: #fff;
}

@media screen and (max-width:500px) {
    .col-md-1, .col-md-2, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 {
	width:90% !important;
	}
	.navbar {min-height: 50px;}
	.navbar-toggle {padding: 9px 10px 0 9px;
    margin-top: 10px;
    margin-right: -10px; 
    }
    
    .newpoems li span {
	float:unset;
	display:flex;
	}
	.poetnav a {flex-grow:1;}
	.poetnav {
    width: 100%;
	}
	
	/*.poetheader span {display:contents;	}*/
		.sideblock {
		width:100%;
		max-width:unset;
		}
		.sideblock-in {
	width:98%;
	}
}

@media (min-width:501px) and (max-width:813px) {
    .col-md-1, .col-md-2, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6  {
	width:48% !important;
    }
    
	.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 {
	width:90% !important;
    }
    
	.navbar {min-height: 50px;}
	.navbar-toggle {padding: 9px 10px 0 9px;
    margin-top: 10px;
    margin-right: -10px; }


    .newpoems li span {
	float:unset;
	display:flex;
	}
	/*
	.poetheader h2, .poetheader h1 {
	padding-bottom:0;
	margin-top: 15px;
	}
	*/
	.mainblock {
		width:100%;
	}
	.sideblock {
		width:100%;
		max-width:unset;
		display:flex;
	}
	.sideblock-in {
	width:47%;
	float:left;
	margin: 5px;
	
	flex-grow:1;
}


}

@media (min-width:801px) and (max-width:980px) {
    .col-md-1, .col-md-2, .col-md-2, .col-md-3, .col-md-4, .col-md-5  {
	width:32% !important;
	}

}
@media (min-width:1200px) {
    .hidden-lg {    display: none!important;}
}

@media screen and (max-width:999px) {
    .articlebody {padding-left:0;}
    .mainblock {padding-left:20px;}
    .column2 li {width: 100%;}
}
@media screen and (max-width:910px) {
    /*.membername {    display: none!important;}*/

}

@media screen and (max-width:605px) {
	.articlebody {padding-left:unset;}
    .sideblock-in {width:98% !important; }
    /*.poetnav span { display: none; }*/
    .poetnav {display: inline-block;}
    .poetnav a {margin-bottom: 0.5em;}

}

@media screen and (max-width:500px) {
    .articlebody { font-size: 12pt;}
    .mainblock { padding: 1em 0 0 0 !important;box-shadow: unset;}
    .mainblock h1 {    font-size: 18px;}
}
