.clr {
	clear: both;
}
#menu {
    margin-top: -35px;
}

#menu ul {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
#menu ul li {
    cursor: pointer;
    float: left;
    padding: 4px 10px 4px 10px;
    background-color: rgba(0,0,0,0.25);
    color: #fff;
    margin-left:2px;
    margin-right:2px;
}

#menu ul li:hover {
    background-color: #ccc;
    color: #000;
}

#pageheader {
	height: 100px;
	background: #a80405 url(/assets/header/overlay.png) repeat-x scroll;
	color: #fff;
	z-index: 10000;
	
}

#headercontainer {
	width: 1000px;
	height: 50px;
	margin: auto;
}

#logincontainer {
	padding-top: 15px;	
	float: right;
}

#logincontainer .inField input {
	width: 100px;
}

#logincontainer .inField {
	margin-left: 15px;
	vertical-align: middle;;
}

.inField {
	position:relative;
	vertical-align: middle;
	
}

.inField label {
	height: 26px;
	padding-top: 2px;
	padding-left: 6px;
	position:absolute;
	top:0;
	left:0;
	color: #000;
	font-size: 15px;
}

.inField label.area {
	padding-top: 6px;
}

.pollbar {
    height: 8px;
    line-height: 3px;
}
.pollbar img {
    vertical-align: top;
    height: 3px;
}

@-moz-document url-prefix() {
    .inField label.area {
        margin-top: -136px;
    }
}
#newpostcontainer #txtmessage, #newmailcontainer #txtmessage {
	width: 70%;
	height: 150px;
	text-align: left;
}
#newmailcontainer {
	text-align: center;
}

#logincontainer .stay_box {
	display: inline-block;
	margin-left: 15px;
	vertical-align: middle;
	font-size: 13px;
}

.ui-tooltip {
	padding: 5px !important;
	font-size: 12px !important;
}

#logincontainer #btnlogin {
	/*height: 30px;*/
	margin-left: 15px;
	vertical-align: middle;
}

#logincontainer #btnsocial {
	margin-left: 15px;
	/*height: 30px;*/
	vertical-align: middle;
}

#myAvatar {
	float: right;
	padding-top: 10px;
}

#myAvatar img, .avatar img, #otherAvatar img {
	width: 45px;
	height: 45px;
}
	
.own-message {
	text-align: right;
}

.own-message .triangle-border {
	border-color:lightblue transparent;
	background-color: lightblue;
}

.other-message .triangle-border {
	border-color:lightgreen transparent;
	background-color: lightgreen;
}

.message-content {
	text-align: left;
	display: inline-block;
	max-width: 75%;
	word-break: break-all;
} 

.message-content .datecontainer {
	position: relative;
	top: -5px;
	color: #fff;
	font-size: 0.8em;	
}

#conversationscontainer .conversations {
	border-bottom: 1px solid lightgray;
	padding: 10px;	
	min-height: 55px;
	cursor: pointer;
}

#conversationscontainer .conversations:hover {
	background-color: lightgray;
}

#conversationscontainer .conversations .avatar img {
	padding: 0 10px 10px 0;
	float: left;
}
#conversationscontainer .conversations:hover .datecontainer {
	color: #fff;
}

#conversationscontainer .datecontainer {
	float: right;
	font-size: 0.8em;
	color: #ccc;
}

.own-message .datecontainer {
	float: right;
}

.other-message .datecontainer {
	float: left;
}

.delete-message:before {
	content: '\E729';
	font: normal normal normal 1.5em/0.8em entypo;

	color: white;
	height: 20px;
}

.delete-message:hover:before {
	color: #333;
}

.own-message .delete-message {
	position: relative;
	left: -5px;
	top: -8px;
	cursor: pointer;
}

.other-message .delete-message {
	position: relative;
	float: right;
	right: -5px;
	/*left: calc(100% - 5px);*/
	top: -8px;
	cursor: pointer;
}

#conversationcontainer .avatar, #conversationcontainer .message-content {
	vertical-align: top;
}

.other-message .avatar {
	float: left;
}

#logincontainer a:link {color:#F9FBF0;}      /* unvisited link */
#logincontainer a:visited {color:#F9FBF0;}  /* visited link */
#logincontainer a:hover {color:#F9FBF0;}  /* mouse over link */
#logincontainer a:active {color:#F9FBF0;} 

#socialpositionhandler {
	position: relative;
}

#socialcontainer {
	position: absolute;
	right: 0;
	top: 40px;
	margin-top: 10px;
	background-color: rgba(255,255,255,0.85);
	text-align: center;
	padding: 15px 15px 5px 15px;
	display: none;
	box-shadow: 0 5px 10px 0 #555;
}

#socialcontainer div {
	padding-bottom: 10px;	
}


#accountpositionhandler {
	position: relative;
}

#accountcontainer {
	position: absolute;
	right: 0;
	top: 40px;
	margin-top: 10px;
	background-color: rgba(255,255,255,0.85);
	text-align: center;
	display: none;
	box-shadow: 0px 5px 10px 0px #555;
	z-index: 1000;
}

#myProfileImagecontainer {
	float: left;
	position: relative;
	margin: 15px 0 15px 15px;
}

#myProfileInfo {
	float: right;
	color: #000;
	font-size: 14px;
	margin: 15px;
	text-align: left;
	position:relative;
	height:100px;
	min-width: 145px;
}

#myProfileInfo p {
	margin-top: 8px;	
	color: #555;
	margin-bottom: 15px;	
}

#myProfileInfobuttons {
	position:absolute;
	bottom:0;
	width:100%;
}

#logoutcontainer {
	clear: both;
	background-color: #E2E1CC;
	text-align: right;
	padding: 10px;
	margin-top: 15px;
}

#changeimagecontainer {
	position: absolute;
	width: 100%;
	height:20px;
	color: #a80405;
	background-color: rgba(255,255,255,0.65);
	font-size: 13px;
	padding-top: 3px;
	bottom: 0;
	display: none;
	cursor: pointer;
}

#btnsettings {
	float: right;
}

#pagecontent {
	min-height: 600px;
	padding-bottom: 60px;
}

#content {
	margin: auto;
	width: 100%;
	background-color: #fff;
	margin-top: -35px;

	box-shadow: 0px 10px 20px 0px #555;
	min-height: 650px;
}

#pagefooter {
	height: 250px;
	background-color: #E2E1CC;
	
}

.content_wrap {
	padding: 35px;	
}

.greenbtn {
	vertical-align: bottom;
}

h1 {
	font-size: 36px;
	color: #bbb;	
}

h2 {
	font-size: 24px;
	color: #222;
}

h3 {
	font-size: 18px;
	color: #bbb;
}

.center {
	text-align: center;
}

.noty_text img {
	height: 100px;
	width: auto;
}

.noty_text span.icon {
    position: absolute;
    display: block;
    width: 48px;
    height: 48px;
    top: 15px;
    left: 10px;
    background: transparent url(/assets/quickinfo/info.png) no-repeat 0 0;
    z-index: 1;
}

.noty_text .content {
    margin: 5px 5px 5px 69px;
}

.noty_text .close {
	font-size: 7pt;
	color: #000;
	float: right;
	margin-bottom:0px;
}
.noty_message {
	min-height: 65px;
}

.notifycontent h3 {
	color: black;
}

.noty_text span.error { background-image: url(/assets/quickinfo/error.png); }
.noty_text span.alert { background-image: url(/assets/quickinfo/alert.png); }
.noty_text span.warning { background-image: url(/assets/quickinfo/alert.png); }
.noty_text span.ok { background-image: url(/assets/quickinfo/ok.png); }
.noty_text span.info { background-image: url(/assets/quickinfo/info.png); }
.noty_text span.heart { background-image: url(/assets/quickinfo/heart.png); }

/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border {
	position:relative;
	padding:15px;
	margin:0 0 1em;
	color:#333;
	/* css3 */
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
	margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
	margin-right:30px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:40px; /* controls horizontal position */
    border-width:20px 20px 0;
	border-style:solid;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}


/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
	top:-20px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:40px; /* controls horizontal position */
    border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
	top:-13px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
    border-width:0 13px 13px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
	top:18px; /* controls vertical position */
	bottom:auto;
	left:-15px; /* value = - border-left-width - border-right-width */
	border-width: 0 15px 15px 0;
	border-color:transparent lightgreen;
}



/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
	top:18px; /* controls vertical position */
	bottom:auto;
    left:auto;
	right:-15px; /* value = - border-left-width - border-right-width */
	border-width: 0 0 15px 15px;
	border-color:transparent lightblue;
}

.ui-datepicker {
	font-size: 13px !important;
}


input.success,
select.success,
textarea.success {
  border-color: #468847;
}

input.success:focus,
select.success:focus,
textarea.success:focus {
  border-color: #356635;
}

input.error,
select.error,
textarea.error {
  border-color: #d70201;
}

input.error:focus,
select.error:focus,
textarea.error:focus {
  border-color: #d70201;
}