Members page and block

Melissa Wen
2 parents 7fde45dd fa1524c2
Showing 3 changed files with 336 additions and 327 deletions Show diff stats
css/community-pages.css
css/tabs.css
style.css
-/*** Profile page ***/
-.profile-type-is-community .action-profile-index #content .main-block h1 {
-  color: #172738;
-  border-bottom: none;
-  font-size: 2.3em;
-  font-weight: bold;
-  font-variant: normal;
-  font-family: Arial, open_sansbold, Helvetica, sans-serif;
+/*** Right bar ***/
+
+/* Members block */
+
+#content .members-block{
+  border:1px solid #D3D6DE !important;
+  border-radius: 4px;
+}
+
+#content .members-block .block-title{
+  background-color:#ECEDF1;
+  border-bottom:1px solid #D3D6DE;
+  border-top:none;
+  color:#172738;
+  font-size:14px;
+  padding:12px;
+  margin-bottom:12px;
+}
+
+.members-block .block-footer-content{
+  background-color:#ECEDF1;
+  padding:8px 10px 15px 0px;
+  margin-right:0px; 
+  border-top:1px solid #D3D6DE;
+  text-align: right;
+}
+
+#content .members-block .block-footer-content a{
+  padding-right: 0px !important;
+}
+
+#content .members-block .block-footer-content a.view-all{
+  background-image:none;
+  border:none;
+  text-transform: uppercase;
+  line-height: 21px;
+}
+
+#content .members-block .block-footer-content a.view-all::after{
+  content:"\f105";
+  font-family: FontAwesome;
+  padding-left: 7px;
+  padding-right: 4px;
+  color:#ffffff;
+  background: #3E67B1;
+  border-radius: 4px;
+  font-size: 18px;
+  line-height: 20px;
+  text-align: center;
+  margin-left: 5px;
+  position: relative;
+  top: 2px;
+}
+
+.members-block .common-profile-list-block .vcard{
+  border:none;
+}
+.members-block .common-profile-list-block .vcard:hover{
+  border:none;
+  background:none;
+}
+
+#content .members-block .common-profile-list-block .vcard li a{
+  color:#172738;
+}
+
+.members-block .menu-submenu{
+  background:#172738;
+  border-radius: 4px;
+  /***side block position***/
+  bottom:-29px; 
+  right: 100%;
+  width: 131px;
+  height: 176px;
+  box-shadow: 2px 2px 2px #ECEDF1;
+  -webkit-box-shadow: 2px 2px 2px #ECEDF1;
+  -moz-box-shadow: 2px 2px 2px #ECEDF1;
+}
+
+.members-block .menu-submenu.down::before{
+  content:"\f0da";
+  color:#172738;
+  font-family: FontAwesome;
+  font-size:25px;
+  float:right;
+  position:relative;
+  margin:-7px;
+  margin-top:30%;
+}
+
+.members-block .menu-submenu-header,
+.members-block .menu-submenu-content,
+.members-block .menu-submenu-footer{
+  background:none;
+}
+
+.members-block .menu-submenu-header,
+.members-block .menu-submenu-footer{
+  display: none;
+}
+.members-block .menu-submenu-content{
+  height:100%;
+}
+
+#content .members-block .common-profile-list-block li{
+  margin:0px !important;
+}
+
+.members-block .common-profile-list-block .vcard .menu-submenu-trigger{
+  display: block;
+  background:#172738;
+  top:2px;
+  left:3px;
+  border:1px solid #fff;
+  padding-bottom: 0px;
+  opacity: 0.7;
+  height: 13px;
+}
+
+.members-block .common-profile-list-block .vcard .menu-submenu-trigger::before{
+  content:"\f053";
+  color:#fff;
+  font-family: FontAwesome;
+  font-size: 8px; 
+  line-height: 11px; 
+}
+
+#content .members-block .common-profile-list-block .fn {
+  margin-top:2px;
+  color:#172738;
+}
+
+#content .members-block .menu-submenu-content h4{
+  color: #fff;
+  font-family: Arial;
+  font-size: 13px;
+  background:#243F59;
+  border-bottom: 2px solid #FF0366;
+  text-transform: uppercase;
+  padding:8px 7px 10px 6px;
+  margin:0px 0px 2px 0px;
+  text-align: center;
+  max-height: 16px;
+  overflow: hidden;
 }
-/*** Profile info block***/
+#content .friends-block ul, #content .members-block ul {
+min-width: 196px;
+width: 192px;
+margin: 0px 0px 0px 0px;
+padding: 0px;
+}
+
+#content .members-block .menu-submenu-content .menu-submenu-list li a{
+  color:#fff;
+  border-bottom:1px dotted #2C4B6B;
+  text-align: center;
+}
+
+#content .members-block .menu-submenu-content h4:hover,
+#content .members-block .menu-submenu-content .menu-submenu-list li a:hover{
+  color:#ECEDF1;
+}
+
+.members-block .common-profile-list-block img{
+  border-radius: 4px;
+  max-height:50px; 
+  max-width:50px;
+  width: 50px;
+  height: 50px;
+}
+
+.members-block .block-footer-content a.view-all{
+  position:relative;
+}
+
+/* Profile info block */
 #content .profile-image-block .admin-link a{
   color: #2c66ce;
@@ -20,7 +186,13 @@
 }
 #content .profile-image-block .profile-info-options a.button.with-text{
-  font-size: 11px;
+  border-color: #D3D6DE;
+  font-size: 12px;
+  text-transform: none;
+}
+
+#content .profile-image-block .profile-info-options a.button.with-text:hover{
+  border-color: #3E67B1;
 }
 /* Search form - need to develop solution - hidden on profile page*/
@@ -45,7 +217,7 @@
   padding: 6px;
   height: 19px;
   max-height: 19px;
-  border: 1px solid #ccc;
+  border: 1px solid #D3D6DE;
   border-radius: 4px;
 }
@@ -72,6 +244,18 @@
   text-transform: uppercase;
 }
+/*** Profile page ***/
+
+/* Profile header */
+.profile-type-is-community .action-profile-index #content .main-block h1 {
+  color: #172738;
+  border-bottom: none;
+  font-size: 2.3em;
+  font-weight: bold;
+  font-variant: normal;
+  font-family: Arial, open_sansbold, Helvetica, sans-serif;
+}
+
 /* Profile tab */
 .profile-type-is-community .action-profile-index table.profile{
   display: none;
@@ -125,10 +309,127 @@
   display: block;
 }
-/*Members Page*/
+/*** Members Page ***/
+
+/* Title of the area members */
+.action-profile-members #content .page-members-header{
+  margin-bottom: 45px;
+  padding-bottom: 26px;
+  border-bottom: 1px solid #D3D6DE;
+  font-family: Arial;
+}
+
+.action-profile-members #content .page-members-header h1{
+  margin:20px 0px 8px 0px;
+}
+
+.action-profile-members #content .page-members-header h3.community-name-members{
+  margin: 0px 0px 5px 0px;
+  font-size: 14px;
+  font-weight: 600;
+}
-/*Select area*/
+.action-profile-members #content .page-members-header a.button.with-text{
+  padding: 5px 15px;
+  border: 1px solid #D3D6DE;
+  text-transform: none;
+  font-size: 12px;
+}
+
+.action-profile-members #content .page-members-header a.button.with-text:hover{
+  border-color: #3E67B1;
+}
+.action-profile-members  .page-members-header .join-leave-button.require-login-popup{
+  margin-right: 4px;
+  float: left;
+}
+
+/* Tabs */
+
+.action-profile-members #content .profile-members-tabs-container{
+  font-family: Arial;
+}
+
+.action-profile-members #content .profile-members-tabs-container .ui-corner-all{
+  overflow: visible;
+  padding: 0;
+}
+
+.action-profile-members #content .profile-members-tabs-container .iu-widget{
+  font-size: 0px ;
+}
+
+.action-profile-members #content .profile-members-tabs-container .ui-widget-header{
+  background: #ECEDF1;
+  border: none;
+  border-bottom: 3px solid #D3D6DE;
+}
+
+.action-profile-members #content .profile-members-tabs-container .ui-widget-content{
+  background: none;
+  border: none;
+}
+
+.action-profile-members #content .profile-members-tabs-container .ui-corner-all, 
+.action-profile-members #content .profile-members-tabs-container .ui-corner-bl, 
+.action-profile-members #content .profile-members-tabs-container .ui-corner-top, 
+.action-profile-members #content .profile-members-tabs-container .ui-corner-right, 
+.action-profile-members #content .profile-members-tabs-container .ui-corner-bottom, 
+.action-profile-members #content .profile-members-tabs-container .ui-corner-left, 
+.action-profile-members #content .profile-members-tabs-container .ui-corner-tr,
+.action-profile-members #content .profile-members-tabs-container .ui-corner-tl{
+  border-radius: 0px;
+}
+
+.action-profile-members #content  .profile-members-tabs-container .ui-state-default,
+.action-profile-members #content  .profile-members-tabs-container .ui-widget-content .ui-state-default,
+.action-profile-members #content  .profile-members-tabs-container .ui-widget-header .ui-state-default{
+  border: none;
+  background: #ECEDF1;
+  font-weight: normal;
+  color: #172738;
+}
+
+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav {
+  font-size: 15px;
+}
+
+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav .ui-tabs-anchor{
+  float: none;
+  display: table;
+}
+
+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li{
+  padding-right: 3px;
+}
+
+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li a:visited{
+  color: #172738;
+}
+
+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li.ui-tabs-active {
+  margin-bottom: -3px;
+  padding-bottom: 1px;
+  border-bottom: 3px solid #FF0366; 
+}
+
+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-active:before{
+  content:"\f0dd";
+  font-family: FontAwesome;
+  font-size: 16px;
+  position:absolute;
+  top:26px;
+  margin:0px 45%;
+  color:#FF0366;
+}
+
+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
+  color: #FF0366;
+  font-weight: 700;
+}
+
+/* Sort selection */
 .action-profile-members #profile-members-sort-options{
   font-size: 14px;
   text-align: right;
@@ -150,22 +451,37 @@
   margin: 0px 0px 0px 10px;
   font-size: 14px;
 }
-/*end of select*/
-.action-profile-members .profile-members{
-  padding-left: 5px; /*34px;*/
+/* Members Tab */
+.action-profile-members .profile-members-tabs-container .profile-members{
+  padding-left: 5px;
 }
-.action-profile-members .profile-admins{
+/* Admins Tab */
+.action-profile-members .profile-members-tabs-container .profile-admins{
   padding-left: 5px;
 }
-/* Image area*/
+/* Profiles list*/
+.action-profile-members .common-profile-list-block .vcard{
+  border: none;
+}
+
+.action-profile-members .common-profile-list-block .vcard:hover{
+  border: none;
+  background: none;
+}
+
+.action-profile-members .common-profile-list-block .vcard a{
+  padding-bottom: 30px;
+}
+
 .action-profile-members .box-1 .common-profile-list-block span{
   margin-right: 9px;
   width: 90px;
   height: 86px;
 }
+
 .action-profile-members .common-profile-list-block img{
   border-radius: 4px;
   width: 82px;
@@ -174,16 +490,6 @@
   max-height: 150px;
 }
-/*Image hover and informations*/
-.action-profile-members .common-profile-list-block .vcard{
-  border:none;
-}
-
-.action-profile-members .common-profile-list-block .vcard:hover{
-  border:none;
-  background:none;
-}
-
 .action-profile-members .menu-submenu{
   background:#172738;
   border-radius: 4px;
@@ -265,12 +571,6 @@
   margin-right: 1px;
 }
-.action-profile-members .box-1 .common-profile-list-block span{
-  margin-right: 9px;
-  width: 90px;
-  height: 86px;
-}
-
 .action-profile-members .common-profile-list-block .vcard .menu-submenu-trigger{
   display: block;
   background:#172738;
@@ -292,10 +592,6 @@
   line-height: 11px;
 }
-.action-profile-members .common-profile-list-block .vcard a{
-  padding-bottom: 30px;
-}
-
 .action-profile-members .box-1 .common-profile-list-block .fn{
   font-size: 14px;
   color:#172738;
@@ -306,218 +602,6 @@
   overflow: hidden;
 }
-/************************************************************/
-/*****title of the area members******/
-.action-profile-members #content .page-members-header{
-  font-family: Arial;
-  border-bottom: 1px solid #D3D6DE;
-  margin-bottom: 45px;
-  padding-bottom: 26px;
-  background-image: url("titulo.png");
-
-}
-
-.action-profile-members #content .page-members-header h1{
-  margin:20px 0px 8px 0px;
-}
-
-.action-profile-members #content .page-members-header h3.community-name-members{
-  font-size: 14px;
-  font-weight: 600;
-  margin:0px 0px 5px 0px;
-}
-
-.action-profile-members  #content .page-members-header a.button.with-text{
-  border:1px solid #ccc;
-  text-transform: none;
-  font-size: 12px;
-  padding:3px 15px;
-}
-
-.action-profile-members  .page-members-header .join-leave-button.require-login-popup{
-  float:left;
-  margin-right: 4px;
-}
-
-/*************************************/
-
-/*Members block*/
-
-#content .members-block{
-  border:1px solid #D3D6DE !important;
-  border-radius: 4px;
-}
-
-#content .members-block .block-title{
-  background-color:#ECEDF1;
-  border-bottom:1px solid #D3D6DE;
-  border-top:none;
-  color:#172738;
-  font-size:14px;
-  padding:12px;
-  margin-bottom:12px;
-}
-
-.members-block .block-footer-content{
-  background-color:#ECEDF1;
-  padding:8px 10px 15px 0px;
-  margin-right:0px; 
-  border-top:1px solid #D3D6DE;
-  text-align: right;
-}
-
-#content .members-block .block-footer-content a{
-  padding-right: 0px !important;
-}
-
-#content .members-block .block-footer-content a.view-all{
-  background-image:none;
-  border:none;
-  text-transform: uppercase;
-  line-height: 21px;
-}
-
-#content .members-block .block-footer-content a.view-all::after{
-  content:"\f105";
-  font-family: FontAwesome;
-  padding-left: 7px;
-  padding-right: 4px;
-  color:#ffffff;
-  background: #3E67B1;
-  border-radius: 4px;
-  font-size: 18px;
-  line-height: 20px;
-  text-align: center;
-  margin-left: 5px;
-  position: relative;
-  top: 2px;
-}
-
-.members-block .common-profile-list-block .vcard{
-  border:none;
-}
-.members-block .common-profile-list-block .vcard:hover{
-  border:none;
-  background:none;
-}
-
-#content .members-block .common-profile-list-block .vcard li a{
-  color:#172738;
-}
-
-.members-block .menu-submenu{
-  background:#172738;
-  border-radius: 4px;
-  /***side block position***/
-  bottom:-29px; 
-  right: 100%;
-  width: 131px;
-  height: 176px;
-  box-shadow: 2px 2px 2px #ECEDF1;
-  -webkit-box-shadow: 2px 2px 2px #ECEDF1;
-  -moz-box-shadow: 2px 2px 2px #ECEDF1;
-}
-
-.members-block .menu-submenu.down::before{
-  content:"\f0da";
-  color:#172738;
-  font-family: FontAwesome;
-  font-size:25px;
-  float:right;
-  position:relative;
-  margin:-7px;
-  margin-top:30%;
-}
-
-.members-block .menu-submenu-header,
-.members-block .menu-submenu-content,
-.members-block .menu-submenu-footer{
-  background:none;
-}
-
-.members-block .menu-submenu-header,
-.members-block .menu-submenu-footer{
-  display: none;
-}
-.members-block .menu-submenu-content{
-  height:100%;
-}
-
-#content .members-block .common-profile-list-block li{
-  margin:0px !important;
-}
-
-.members-block .common-profile-list-block .vcard .menu-submenu-trigger{
-  display: block;
-  background:#172738;
-  top:2px;
-  left:3px;
-  border:1px solid #fff;
-  padding-bottom: 0px;
-  opacity: 0.7;
-  height: 13px;
-}
-
-.members-block .common-profile-list-block .vcard .menu-submenu-trigger::before{
-  content:"\f053";
-  color:#fff;
-  font-family: FontAwesome;
-  font-size: 8px; 
-  line-height: 11px; 
-}
-
-#content .members-block .common-profile-list-block .fn {
-  margin-top:2px;
-  color:#172738;
-}
-
-#content .members-block .menu-submenu-content h4{
-  color: #fff;
-  font-family: Arial;
-  font-size: 13px;
-  background:#243F59;
-  border-bottom: 2px solid #FF0366;
-  text-transform: uppercase;
-  padding:8px 7px 10px 6px;
-  margin:0px 0px 2px 0px;
-  text-align: center;
-  max-height: 16px;
-  overflow: hidden;
-}
-
-#content .friends-block ul, #content .members-block ul {
-min-width: 196px;
-width: 192px;
-margin: 0px 0px 0px 0px;
-padding: 0px;
-}
-
-#content .members-block .menu-submenu-content .menu-submenu-list li a{
-  color:#fff;
-  border-bottom:1px dotted #2C4B6B;
-  text-align: center;
-}
-
-#content .members-block .menu-submenu-content h4:hover,
-#content .members-block .menu-submenu-content .menu-submenu-list li a:hover{
-  color:#ECEDF1;
-}
-
-.members-block .common-profile-list-block img{
-  border-radius: 4px;
-  max-height:50px; 
-  max-width:50px;
-  width: 50px;
-  height: 50px;
-}
-
-.members-block .block-footer-content a.view-all{
-  position:relative;
-}
-
-/*****************************************************/
-
-
 /*** Events ***/
 #content .article-body-event .event-card{
@@ -1,77 +0,0 @@
-.profile-members-tabs-container{
-  font-family: Arial;
-}
-
-.profile-members-tabs-container .ui-corner-all{
-  overflow: visible;
-}
-.profile-members-tabs-container .ui-widget{
-  font-size: 0px;
-}
-.profile-members-tabs-container .ui-widget-header{
-  background:#ECEDF1;
-  border:none;
-  border-bottom: 3px solid #D3D6DE;
-}
-
-.profile-members-tabs-container .ui-widget-content{
-  border:none;
-  background:none;
-}
-
-.profile-members-tabs-container .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl,
-.profile-members-tabs-container .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr,
-.profile-members-tabs-container .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{
-  border-radius:0px;
-}
-
-.profile-members-tabs-container .ui-state-default,
-.profile-members-tabs-container .ui-widget-content .ui-state-default,
-.profile-members-tabs-container .ui-widget-header .ui-state-default{
-  border:none;
-  background:#ECEDF1;
-  font-weight: normal;
-  color:#172738;
-}
-
-.profile-members-tabs-container .ui-tabs .ui-tabs-nav {
-  font-size: 15px;
-}
-
-/*.profile-members-tabs-container .ui-tabs .ui-tabs-nav{
-  margin: 0px;
-  padding: 0px;
-}
-
-.profile-members-tabs-container .ui-tabs .ui-tabs-panel {
-  padding: 0px;
-}*/
-
-#content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li{
-  padding-right: 3px;
-}
-
-#content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li a:visited{
-  color:#172738;
-}
-
-#content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li.ui-tabs-active {
-  margin-bottom: -3px !important;
-  padding-bottom: 1px;
-  border-bottom: 3px solid #FF0366; 
-}
-
-#content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-active:before{
-  content:"\f0dd";
-  font-family: FontAwesome;
-  font-size: 16px;
-  position:absolute;
-  top:26px;
-  margin:0px 45%;
-  color:#FF0366;
-}
-
-#content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
-  color: #FF0366;
-  font-weight: 700;
-}
@@ -25,6 +25,8 @@
 @import url(css/software-catalog-page.css);
 @import url(css/tooltip.css);
 @import url(css/popover.css);
+@import url(css/tabs.css);
+
 @font-face{
   font-weight: normal;
1	-/* Profile page */
2	-.profile-type-is-community .action-profile-index #content .main-block h1 {
3	- color: #172738;
4	- border-bottom: none;
5	- font-size: 2.3em;
6	- font-weight: bold;
7	- font-variant: normal;
8	- font-family: Arial, open_sansbold, Helvetica, sans-serif;	1	+/* Right bar */
		2	+
		3	+/* Members block */
		4	+
		5	+#content .members-block{
		6	+ border:1px solid #D3D6DE !important;
		7	+ border-radius: 4px;
		8	+}
		9	+
		10	+#content .members-block .block-title{
		11	+ background-color:#ECEDF1;
		12	+ border-bottom:1px solid #D3D6DE;
		13	+ border-top:none;
		14	+ color:#172738;
		15	+ font-size:14px;
		16	+ padding:12px;
		17	+ margin-bottom:12px;
		18	+}
		19	+
		20	+.members-block .block-footer-content{
		21	+ background-color:#ECEDF1;
		22	+ padding:8px 10px 15px 0px;
		23	+ margin-right:0px;
		24	+ border-top:1px solid #D3D6DE;
		25	+ text-align: right;
		26	+}
		27	+
		28	+#content .members-block .block-footer-content a{
		29	+ padding-right: 0px !important;
		30	+}
		31	+
		32	+#content .members-block .block-footer-content a.view-all{
		33	+ background-image:none;
		34	+ border:none;
		35	+ text-transform: uppercase;
		36	+ line-height: 21px;
		37	+}
		38	+
		39	+#content .members-block .block-footer-content a.view-all::after{
		40	+ content:"\f105";
		41	+ font-family: FontAwesome;
		42	+ padding-left: 7px;
		43	+ padding-right: 4px;
		44	+ color:#ffffff;
		45	+ background: #3E67B1;
		46	+ border-radius: 4px;
		47	+ font-size: 18px;
		48	+ line-height: 20px;
		49	+ text-align: center;
		50	+ margin-left: 5px;
		51	+ position: relative;
		52	+ top: 2px;
		53	+}
		54	+
		55	+.members-block .common-profile-list-block .vcard{
		56	+ border:none;
		57	+}
		58	+.members-block .common-profile-list-block .vcard:hover{
		59	+ border:none;
		60	+ background:none;
		61	+}
		62	+
		63	+#content .members-block .common-profile-list-block .vcard li a{
		64	+ color:#172738;
		65	+}
		66	+
		67	+.members-block .menu-submenu{
		68	+ background:#172738;
		69	+ border-radius: 4px;
		70	+ /*side block position*/
		71	+ bottom:-29px;
		72	+ right: 100%;
		73	+ width: 131px;
		74	+ height: 176px;
		75	+ box-shadow: 2px 2px 2px #ECEDF1;
		76	+ -webkit-box-shadow: 2px 2px 2px #ECEDF1;
		77	+ -moz-box-shadow: 2px 2px 2px #ECEDF1;
		78	+}
		79	+
		80	+.members-block .menu-submenu.down::before{
		81	+ content:"\f0da";
		82	+ color:#172738;
		83	+ font-family: FontAwesome;
		84	+ font-size:25px;
		85	+ float:right;
		86	+ position:relative;
		87	+ margin:-7px;
		88	+ margin-top:30%;
		89	+}
		90	+
		91	+.members-block .menu-submenu-header,
		92	+.members-block .menu-submenu-content,
		93	+.members-block .menu-submenu-footer{
		94	+ background:none;
		95	+}
		96	+
		97	+.members-block .menu-submenu-header,
		98	+.members-block .menu-submenu-footer{
		99	+ display: none;
		100	+}
		101	+.members-block .menu-submenu-content{
		102	+ height:100%;
		103	+}
		104	+
		105	+#content .members-block .common-profile-list-block li{
		106	+ margin:0px !important;
		107	+}
		108	+
		109	+.members-block .common-profile-list-block .vcard .menu-submenu-trigger{
		110	+ display: block;
		111	+ background:#172738;
		112	+ top:2px;
		113	+ left:3px;
		114	+ border:1px solid #fff;
		115	+ padding-bottom: 0px;
		116	+ opacity: 0.7;
		117	+ height: 13px;
		118	+}
		119	+
		120	+.members-block .common-profile-list-block .vcard .menu-submenu-trigger::before{
		121	+ content:"\f053";
		122	+ color:#fff;
		123	+ font-family: FontAwesome;
		124	+ font-size: 8px;
		125	+ line-height: 11px;
		126	+}
		127	+
		128	+#content .members-block .common-profile-list-block .fn {
		129	+ margin-top:2px;
		130	+ color:#172738;
		131	+}
		132	+
		133	+#content .members-block .menu-submenu-content h4{
		134	+ color: #fff;
		135	+ font-family: Arial;
		136	+ font-size: 13px;
		137	+ background:#243F59;
		138	+ border-bottom: 2px solid #FF0366;
		139	+ text-transform: uppercase;
		140	+ padding:8px 7px 10px 6px;
		141	+ margin:0px 0px 2px 0px;
		142	+ text-align: center;
		143	+ max-height: 16px;
		144	+ overflow: hidden;
9	}	145	}
10		146
11	-/* Profile info block*/	147	+#content .friends-block ul, #content .members-block ul {
		148	+min-width: 196px;
		149	+width: 192px;
		150	+margin: 0px 0px 0px 0px;
		151	+padding: 0px;
		152	+}
		153	+
		154	+#content .members-block .menu-submenu-content .menu-submenu-list li a{
		155	+ color:#fff;
		156	+ border-bottom:1px dotted #2C4B6B;
		157	+ text-align: center;
		158	+}
		159	+
		160	+#content .members-block .menu-submenu-content h4:hover,
		161	+#content .members-block .menu-submenu-content .menu-submenu-list li a:hover{
		162	+ color:#ECEDF1;
		163	+}
		164	+
		165	+.members-block .common-profile-list-block img{
		166	+ border-radius: 4px;
		167	+ max-height:50px;
		168	+ max-width:50px;
		169	+ width: 50px;
		170	+ height: 50px;
		171	+}
		172	+
		173	+.members-block .block-footer-content a.view-all{
		174	+ position:relative;
		175	+}
		176	+
		177	+/* Profile info block */
12		178
13	#content .profile-image-block .admin-link a{	179	#content .profile-image-block .admin-link a{
14	color: #2c66ce;	180	color: #2c66ce;
	@@ -20,7 +186,13 @@		@@ -20,7 +186,13 @@
20	}	186	}
21		187
22	#content .profile-image-block .profile-info-options a.button.with-text{	188	#content .profile-image-block .profile-info-options a.button.with-text{
23	- font-size: 11px;	189	+ border-color: #D3D6DE;
		190	+ font-size: 12px;
		191	+ text-transform: none;
		192	+}
		193	+
		194	+#content .profile-image-block .profile-info-options a.button.with-text:hover{
		195	+ border-color: #3E67B1;
24	}	196	}
25		197
26	/* Search form - need to develop solution - hidden on profile page*/	198	/* Search form - need to develop solution - hidden on profile page*/
	@@ -45,7 +217,7 @@		@@ -45,7 +217,7 @@
45	padding: 6px;	217	padding: 6px;
46	height: 19px;	218	height: 19px;
47	max-height: 19px;	219	max-height: 19px;
48	- border: 1px solid #ccc;	220	+ border: 1px solid #D3D6DE;
49	border-radius: 4px;	221	border-radius: 4px;
50	}	222	}
51		223
	@@ -72,6 +244,18 @@		@@ -72,6 +244,18 @@
72	text-transform: uppercase;	244	text-transform: uppercase;
73	}	245	}
74		246
		247	+/* Profile page */
		248	+
		249	+/* Profile header */
		250	+.profile-type-is-community .action-profile-index #content .main-block h1 {
		251	+ color: #172738;
		252	+ border-bottom: none;
		253	+ font-size: 2.3em;
		254	+ font-weight: bold;
		255	+ font-variant: normal;
		256	+ font-family: Arial, open_sansbold, Helvetica, sans-serif;
		257	+}
		258	+
75	/* Profile tab */	259	/* Profile tab */
76	.profile-type-is-community .action-profile-index table.profile{	260	.profile-type-is-community .action-profile-index table.profile{
77	display: none;	261	display: none;
	@@ -125,10 +309,127 @@		@@ -125,10 +309,127 @@
125	display: block;	309	display: block;
126	}	310	}
127		311
128	-/Members Page/	312	+/* Members Page */
		313	+
		314	+/* Title of the area members */
		315	+.action-profile-members #content .page-members-header{
		316	+ margin-bottom: 45px;
		317	+ padding-bottom: 26px;
		318	+ border-bottom: 1px solid #D3D6DE;
		319	+ font-family: Arial;
		320	+}
		321	+
		322	+.action-profile-members #content .page-members-header h1{
		323	+ margin:20px 0px 8px 0px;
		324	+}
		325	+
		326	+.action-profile-members #content .page-members-header h3.community-name-members{
		327	+ margin: 0px 0px 5px 0px;
		328	+ font-size: 14px;
		329	+ font-weight: 600;
		330	+}
129		331
130	-/Select area/	332	+.action-profile-members #content .page-members-header a.button.with-text{
		333	+ padding: 5px 15px;
		334	+ border: 1px solid #D3D6DE;
		335	+ text-transform: none;
		336	+ font-size: 12px;
		337	+}
		338	+
		339	+.action-profile-members #content .page-members-header a.button.with-text:hover{
		340	+ border-color: #3E67B1;
		341	+}
131		342
		343	+.action-profile-members .page-members-header .join-leave-button.require-login-popup{
		344	+ margin-right: 4px;
		345	+ float: left;
		346	+}
		347	+
		348	+/* Tabs */
		349	+
		350	+.action-profile-members #content .profile-members-tabs-container{
		351	+ font-family: Arial;
		352	+}
		353	+
		354	+.action-profile-members #content .profile-members-tabs-container .ui-corner-all{
		355	+ overflow: visible;
		356	+ padding: 0;
		357	+}
		358	+
		359	+.action-profile-members #content .profile-members-tabs-container .iu-widget{
		360	+ font-size: 0px ;
		361	+}
		362	+
		363	+.action-profile-members #content .profile-members-tabs-container .ui-widget-header{
		364	+ background: #ECEDF1;
		365	+ border: none;
		366	+ border-bottom: 3px solid #D3D6DE;
		367	+}
		368	+
		369	+.action-profile-members #content .profile-members-tabs-container .ui-widget-content{
		370	+ background: none;
		371	+ border: none;
		372	+}
		373	+
		374	+.action-profile-members #content .profile-members-tabs-container .ui-corner-all,
		375	+.action-profile-members #content .profile-members-tabs-container .ui-corner-bl,
		376	+.action-profile-members #content .profile-members-tabs-container .ui-corner-top,
		377	+.action-profile-members #content .profile-members-tabs-container .ui-corner-right,
		378	+.action-profile-members #content .profile-members-tabs-container .ui-corner-bottom,
		379	+.action-profile-members #content .profile-members-tabs-container .ui-corner-left,
		380	+.action-profile-members #content .profile-members-tabs-container .ui-corner-tr,
		381	+.action-profile-members #content .profile-members-tabs-container .ui-corner-tl{
		382	+ border-radius: 0px;
		383	+}
		384	+
		385	+.action-profile-members #content .profile-members-tabs-container .ui-state-default,
		386	+.action-profile-members #content .profile-members-tabs-container .ui-widget-content .ui-state-default,
		387	+.action-profile-members #content .profile-members-tabs-container .ui-widget-header .ui-state-default{
		388	+ border: none;
		389	+ background: #ECEDF1;
		390	+ font-weight: normal;
		391	+ color: #172738;
		392	+}
		393	+
		394	+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav {
		395	+ font-size: 15px;
		396	+}
		397	+
		398	+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav .ui-tabs-anchor{
		399	+ float: none;
		400	+ display: table;
		401	+}
		402	+
		403	+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li{
		404	+ padding-right: 3px;
		405	+}
		406	+
		407	+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li a:visited{
		408	+ color: #172738;
		409	+}
		410	+
		411	+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li.ui-tabs-active {
		412	+ margin-bottom: -3px;
		413	+ padding-bottom: 1px;
		414	+ border-bottom: 3px solid #FF0366;
		415	+}
		416	+
		417	+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-active:before{
		418	+ content:"\f0dd";
		419	+ font-family: FontAwesome;
		420	+ font-size: 16px;
		421	+ position:absolute;
		422	+ top:26px;
		423	+ margin:0px 45%;
		424	+ color:#FF0366;
		425	+}
		426	+
		427	+.action-profile-members #content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
		428	+ color: #FF0366;
		429	+ font-weight: 700;
		430	+}
		431	+
		432	+/* Sort selection */
132	.action-profile-members #profile-members-sort-options{	433	.action-profile-members #profile-members-sort-options{
133	font-size: 14px;	434	font-size: 14px;
134	text-align: right;	435	text-align: right;
	@@ -150,22 +451,37 @@		@@ -150,22 +451,37 @@
150	margin: 0px 0px 0px 10px;	451	margin: 0px 0px 0px 10px;
151	font-size: 14px;	452	font-size: 14px;
152	}	453	}
153	-/end of select/
154		454
155	-.action-profile-members .profile-members{
156	- padding-left: 5px; /34px;/	455	+/* Members Tab */
		456	+.action-profile-members .profile-members-tabs-container .profile-members{
		457	+ padding-left: 5px;
157	}	458	}
158		459
159	-.action-profile-members .profile-admins{	460	+/* Admins Tab */
		461	+.action-profile-members .profile-members-tabs-container .profile-admins{
160	padding-left: 5px;	462	padding-left: 5px;
161	}	463	}
162		464
163	-/* Image area*/	465	+/* Profiles list*/
		466	+.action-profile-members .common-profile-list-block .vcard{
		467	+ border: none;
		468	+}
		469	+
		470	+.action-profile-members .common-profile-list-block .vcard:hover{
		471	+ border: none;
		472	+ background: none;
		473	+}
		474	+
		475	+.action-profile-members .common-profile-list-block .vcard a{
		476	+ padding-bottom: 30px;
		477	+}
		478	+
164	.action-profile-members .box-1 .common-profile-list-block span{	479	.action-profile-members .box-1 .common-profile-list-block span{
165	margin-right: 9px;	480	margin-right: 9px;
166	width: 90px;	481	width: 90px;
167	height: 86px;	482	height: 86px;
168	}	483	}
		484	+
169	.action-profile-members .common-profile-list-block img{	485	.action-profile-members .common-profile-list-block img{
170	border-radius: 4px;	486	border-radius: 4px;
171	width: 82px;	487	width: 82px;
	@@ -174,16 +490,6 @@		@@ -174,16 +490,6 @@
174	max-height: 150px;	490	max-height: 150px;
175	}	491	}
176		492
177	-/Image hover and informations/
178	-.action-profile-members .common-profile-list-block .vcard{
179	- border:none;
180	-}
181	-
182	-.action-profile-members .common-profile-list-block .vcard:hover{
183	- border:none;
184	- background:none;
185	-}
186	-
187	.action-profile-members .menu-submenu{	493	.action-profile-members .menu-submenu{
188	background:#172738;	494	background:#172738;
189	border-radius: 4px;	495	border-radius: 4px;
	@@ -265,12 +571,6 @@		@@ -265,12 +571,6 @@
265	margin-right: 1px;	571	margin-right: 1px;
266	}	572	}
267		573
268	-.action-profile-members .box-1 .common-profile-list-block span{
269	- margin-right: 9px;
270	- width: 90px;
271	- height: 86px;
272	-}
273	-
274	.action-profile-members .common-profile-list-block .vcard .menu-submenu-trigger{	574	.action-profile-members .common-profile-list-block .vcard .menu-submenu-trigger{
275	display: block;	575	display: block;
276	background:#172738;	576	background:#172738;
	@@ -292,10 +592,6 @@		@@ -292,10 +592,6 @@
292	line-height: 11px;	592	line-height: 11px;
293	}	593	}
294		594
295	-.action-profile-members .common-profile-list-block .vcard a{
296	- padding-bottom: 30px;
297	-}
298	-
299	.action-profile-members .box-1 .common-profile-list-block .fn{	595	.action-profile-members .box-1 .common-profile-list-block .fn{
300	font-size: 14px;	596	font-size: 14px;
301	color:#172738;	597	color:#172738;
	@@ -306,218 +602,6 @@		@@ -306,218 +602,6 @@
306	overflow: hidden;	602	overflow: hidden;
307	}	603	}
308		604
309	-/************************************************************/
310	-/***title of the area members****/
311	-.action-profile-members #content .page-members-header{
312	- font-family: Arial;
313	- border-bottom: 1px solid #D3D6DE;
314	- margin-bottom: 45px;
315	- padding-bottom: 26px;
316	- background-image: url("titulo.png");
317	-
318	-}
319	-
320	-.action-profile-members #content .page-members-header h1{
321	- margin:20px 0px 8px 0px;
322	-}
323	-
324	-.action-profile-members #content .page-members-header h3.community-name-members{
325	- font-size: 14px;
326	- font-weight: 600;
327	- margin:0px 0px 5px 0px;
328	-}
329	-
330	-.action-profile-members #content .page-members-header a.button.with-text{
331	- border:1px solid #ccc;
332	- text-transform: none;
333	- font-size: 12px;
334	- padding:3px 15px;
335	-}
336	-
337	-.action-profile-members .page-members-header .join-leave-button.require-login-popup{
338	- float:left;
339	- margin-right: 4px;
340	-}
341	-
342	-/*************************************/
343	-
344	-/Members block/
345	-
346	-#content .members-block{
347	- border:1px solid #D3D6DE !important;
348	- border-radius: 4px;
349	-}
350	-
351	-#content .members-block .block-title{
352	- background-color:#ECEDF1;
353	- border-bottom:1px solid #D3D6DE;
354	- border-top:none;
355	- color:#172738;
356	- font-size:14px;
357	- padding:12px;
358	- margin-bottom:12px;
359	-}
360	-
361	-.members-block .block-footer-content{
362	- background-color:#ECEDF1;
363	- padding:8px 10px 15px 0px;
364	- margin-right:0px;
365	- border-top:1px solid #D3D6DE;
366	- text-align: right;
367	-}
368	-
369	-#content .members-block .block-footer-content a{
370	- padding-right: 0px !important;
371	-}
372	-
373	-#content .members-block .block-footer-content a.view-all{
374	- background-image:none;
375	- border:none;
376	- text-transform: uppercase;
377	- line-height: 21px;
378	-}
379	-
380	-#content .members-block .block-footer-content a.view-all::after{
381	- content:"\f105";
382	- font-family: FontAwesome;
383	- padding-left: 7px;
384	- padding-right: 4px;
385	- color:#ffffff;
386	- background: #3E67B1;
387	- border-radius: 4px;
388	- font-size: 18px;
389	- line-height: 20px;
390	- text-align: center;
391	- margin-left: 5px;
392	- position: relative;
393	- top: 2px;
394	-}
395	-
396	-.members-block .common-profile-list-block .vcard{
397	- border:none;
398	-}
399	-.members-block .common-profile-list-block .vcard:hover{
400	- border:none;
401	- background:none;
402	-}
403	-
404	-#content .members-block .common-profile-list-block .vcard li a{
405	- color:#172738;
406	-}
407	-
408	-.members-block .menu-submenu{
409	- background:#172738;
410	- border-radius: 4px;
411	- /*side block position*/
412	- bottom:-29px;
413	- right: 100%;
414	- width: 131px;
415	- height: 176px;
416	- box-shadow: 2px 2px 2px #ECEDF1;
417	- -webkit-box-shadow: 2px 2px 2px #ECEDF1;
418	- -moz-box-shadow: 2px 2px 2px #ECEDF1;
419	-}
420	-
421	-.members-block .menu-submenu.down::before{
422	- content:"\f0da";
423	- color:#172738;
424	- font-family: FontAwesome;
425	- font-size:25px;
426	- float:right;
427	- position:relative;
428	- margin:-7px;
429	- margin-top:30%;
430	-}
431	-
432	-.members-block .menu-submenu-header,
433	-.members-block .menu-submenu-content,
434	-.members-block .menu-submenu-footer{
435	- background:none;
436	-}
437	-
438	-.members-block .menu-submenu-header,
439	-.members-block .menu-submenu-footer{
440	- display: none;
441	-}
442	-.members-block .menu-submenu-content{
443	- height:100%;
444	-}
445	-
446	-#content .members-block .common-profile-list-block li{
447	- margin:0px !important;
448	-}
449	-
450	-.members-block .common-profile-list-block .vcard .menu-submenu-trigger{
451	- display: block;
452	- background:#172738;
453	- top:2px;
454	- left:3px;
455	- border:1px solid #fff;
456	- padding-bottom: 0px;
457	- opacity: 0.7;
458	- height: 13px;
459	-}
460	-
461	-.members-block .common-profile-list-block .vcard .menu-submenu-trigger::before{
462	- content:"\f053";
463	- color:#fff;
464	- font-family: FontAwesome;
465	- font-size: 8px;
466	- line-height: 11px;
467	-}
468	-
469	-#content .members-block .common-profile-list-block .fn {
470	- margin-top:2px;
471	- color:#172738;
472	-}
473	-
474	-#content .members-block .menu-submenu-content h4{
475	- color: #fff;
476	- font-family: Arial;
477	- font-size: 13px;
478	- background:#243F59;
479	- border-bottom: 2px solid #FF0366;
480	- text-transform: uppercase;
481	- padding:8px 7px 10px 6px;
482	- margin:0px 0px 2px 0px;
483	- text-align: center;
484	- max-height: 16px;
485	- overflow: hidden;
486	-}
487	-
488	-#content .friends-block ul, #content .members-block ul {
489	-min-width: 196px;
490	-width: 192px;
491	-margin: 0px 0px 0px 0px;
492	-padding: 0px;
493	-}
494	-
495	-#content .members-block .menu-submenu-content .menu-submenu-list li a{
496	- color:#fff;
497	- border-bottom:1px dotted #2C4B6B;
498	- text-align: center;
499	-}
500	-
501	-#content .members-block .menu-submenu-content h4:hover,
502	-#content .members-block .menu-submenu-content .menu-submenu-list li a:hover{
503	- color:#ECEDF1;
504	-}
505	-
506	-.members-block .common-profile-list-block img{
507	- border-radius: 4px;
508	- max-height:50px;
509	- max-width:50px;
510	- width: 50px;
511	- height: 50px;
512	-}
513	-
514	-.members-block .block-footer-content a.view-all{
515	- position:relative;
516	-}
517	-
518	-/*****************************************************/
519	-
520	-
521	/* Events */	605	/* Events */
522		606
523	#content .article-body-event .event-card{	607	#content .article-body-event .event-card{
	@@ -1,77 +0,0 @@	@@ -1,77 +0,0 @@
1	-.profile-members-tabs-container{
2	- font-family: Arial;
3	-}
4	-
5	-.profile-members-tabs-container .ui-corner-all{
6	- overflow: visible;
7	-}
8	-.profile-members-tabs-container .ui-widget{
9	- font-size: 0px;
10	-}
11	-.profile-members-tabs-container .ui-widget-header{
12	- background:#ECEDF1;
13	- border:none;
14	- border-bottom: 3px solid #D3D6DE;
15	-}
16	-
17	-.profile-members-tabs-container .ui-widget-content{
18	- border:none;
19	- background:none;
20	-}
21	-
22	-.profile-members-tabs-container .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl,
23	-.profile-members-tabs-container .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr,
24	-.profile-members-tabs-container .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{
25	- border-radius:0px;
26	-}
27	-
28	-.profile-members-tabs-container .ui-state-default,
29	-.profile-members-tabs-container .ui-widget-content .ui-state-default,
30	-.profile-members-tabs-container .ui-widget-header .ui-state-default{
31	- border:none;
32	- background:#ECEDF1;
33	- font-weight: normal;
34	- color:#172738;
35	-}
36	-
37	-.profile-members-tabs-container .ui-tabs .ui-tabs-nav {
38	- font-size: 15px;
39	-}
40	-
41	-/*.profile-members-tabs-container .ui-tabs .ui-tabs-nav{
42	- margin: 0px;
43	- padding: 0px;
44	-}
45	-
46	-.profile-members-tabs-container .ui-tabs .ui-tabs-panel {
47	- padding: 0px;
48	-}*/
49	-
50	-#content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li{
51	- padding-right: 3px;
52	-}
53	-
54	-#content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li a:visited{
55	- color:#172738;
56	-}
57	-
58	-#content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li.ui-tabs-active {
59	- margin-bottom: -3px !important;
60	- padding-bottom: 1px;
61	- border-bottom: 3px solid #FF0366;
62	-}
63	-
64	-#content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li.ui-tabs-active.ui-state-active:before{
65	- content:"\f0dd";
66	- font-family: FontAwesome;
67	- font-size: 16px;
68	- position:absolute;
69	- top:26px;
70	- margin:0px 45%;
71	- color:#FF0366;
72	-}
73	-
74	-#content .profile-members-tabs-container .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
75	- color: #FF0366;
76	- font-weight: 700;
77	-}