Difference between revisions of "User:Lexar/Main Page/Template:Benjas/Page.css"

From Team Fortress Wiki
Jump to: navigation, search
m
m (main-menu testing)
Line 754: Line 754:
 
   width: 64px;
 
   width: 64px;
 
   height: 38px;
 
   height: 38px;
   background: url(img/search-out.png) no-repeat;
+
   background: url("https://wiki.teamfortress.com/w/images/e/ed/User_Lexar_search-out.png") no-repeat;
 
   background-color: transparent;
 
   background-color: transparent;
 
   cursor: pointer;
 
   cursor: pointer;
Line 765: Line 765:
 
}
 
}
 
#mobile-menu #search-expand:hover {
 
#mobile-menu #search-expand:hover {
   background: url(img/search-out-hover.png) no-repeat;
+
   background: url("https://wiki.teamfortress.com/w/images/c/c1/User_Lexar_search-out-hover.png") no-repeat;
 
   -webkit-transition: all 250ms linear;
 
   -webkit-transition: all 250ms linear;
 
   -moz-transition: all 250ms linear;
 
   -moz-transition: all 250ms linear;
Line 773: Line 773:
 
}
 
}
 
#mobile-menu #search-expand.out {
 
#mobile-menu #search-expand.out {
   background: url(img/search-out-active.png) no-repeat;
+
   background: url("https://wiki.teamfortress.com/w/images/d/d2/User_Lexar_search-out-active.png") no-repeat;
 
}
 
}
 
#mobile-menu #p-search {
 
#mobile-menu #p-search {
Line 833: Line 833:
 
}
 
}
 
#mobile-menu #mobile-ul-main {
 
#mobile-menu #mobile-ul-main {
   max-height: 0px;
+
   max-height: 300px;
 
   overflow: hidden;
 
   overflow: hidden;
 
   position: absolute;
 
   position: absolute;

Revision as of 13:33, 2 November 2014

.main-area  a, .main-area  a:visited, .main-area  a.external, .main-area  a.external:visited {
	color:#b96518;
	text-decoration:none;
}
.main-area a:hover {
	text-decoration:underline;
}
.clearing {
	clear:both;
	height:0px;
}
body {
	background-color:#fff !important;
}
.wiki-box {
	border:solid #4f4945 2px;
	padding:14px 2%;
	margin: 10px -2px;
	width: 96%;
	position:relative;
	font-size:100%;
	background: url('/w/images/3/3c/User_Lexar_block_back.png') repeat-x center top #F1F1F1;
}
.wiki-box .wiki-title {
	font-family: blackoak std, arial, sans-serif;
	font-size: 18px;
	position: absolute;
	background: #fff;
	display: block;
	padding: 7px 10px;
	height: 19px;
	top: -24px;
	left: 0px;
}
.wiki-cols {
	width:100%;
	margin:0 auto;
}
.half-box {
	width:45%;
	float:left;
	margin:20px -2px 20px;
}
.half-box-footer {
	width: 100%;
	height: auto;
	border-top: #b96518 solid 1px;
	padding: 4px 0px 0px;
	text-align:center;
}
.half-box-footer a, .half-box-footer a:visited {
	font-size:12px;
	font-weight:bold;
	text-shadow:1px 2px 1px #bababa;
}
.right-box {
	float:right;
	margin-left:1%;
}
#content, #p-cactions li.selected {
	background:#999;
}
#content, #p-cactions li.selected span {
	background:none !important;
}
#content, #p-cactions li.selected span a {
	background:none !important;
}

/*header*/
#wiki-logo-area {
	float:left;
}
#wiki-logo-area img {
	max-width:100%;
	height:auto;
}
#article-count {
	font-size:85%;
	text-align:center;
	margin-top:7px;
}
#article-count a {
	font-size:inherit;
}
#header-bullets {
	float:right;
	width:40%;
	margin:10px 0px;
	min-width:480px;
}
#header-bullets ul {
	float:right;
	width:100%;
	list-style:none;
	margin:0px;
	padding:0px;
}
#header-bullets ul li {
	float: left;
	width: 27%;
	white-space: nowrap;
	padding: 0px 3%;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAANAQMAAABb8jbLAAAABlBMVEX///8AUow5QSOjAAAAAXRSTlMAQObYZgAAABNJREFUCB1jYEABBQw/wLCAgQEAGpIDyT0IVcsAAAAASUVORK5CYII=') no-repeat scroll 0% 1px transparent;
	line-height: 1.5;
}
#header-bullets ul .breaker {
	clear:both;
	background:none;
	padding:0px;
	width:100%;
}
#header-bullets ul li a, #header-bullets ul li a.external {
	display:block;
	float:left;
	font-size:110%;
	font-weight:bold;
	background:none;
}
/*/header*/

/*language*/
.lang-box {
	text-align:center;
}
/*/language*/

/*network*/
.network-box {
	text-align:center;
}
.network-box .wiki-title {
	position: relative;
	display: inline;
	margin: 0px 0px;
	top: -30px;
}
.network-box span {
	float: left;
	width: 25%;
	text-align: center;
}
#content .network-box span a.external, #content .network-box span a.external {
	display: block;
	width: auto;
	background: none;
	text-align: center;
	float: none;
}
.network-box span {
	display: block;
	font-weight: bold;
	margin-top:-20px;
}
.network-box span span {
	display: block;
	width: 100%;
	margin-top:0px;
}
.network-clear {
	display:none;
}
/*/network*/


/*classes 2*/
.class-box2 {
	background: url(/w/images/4/4c/User_Lexar_nav_back_classess.png) #7E7D78 no-repeat center top;
}
.class-link-icon {
	float: left;
	display: block;
	width: 11%;
}
.class-box2 .class-link-icon a, .class-box2 .class-link-icon a:visited {
	float: left;
	width: 100%;
	text-align: center;
	color: #D4D1C9;
	font-weight: bold;
	min-width: 80px;
	display: block;
	text-decoration: none;
}
.class-box2 .class-link-icon a:hover {
	color: #E4A356;
	background-position: center -85px;
}
.class-name-icon {
	display: block;
	padding-top: 60px;
	height: 15px;
}
.scout-icon a {
	background: url('/w/images/f/fe/User_Lexar_scout.png') no-repeat center 4px;
}
.soldier-icon a {
	background: url('/w/images/e/e0/User_Lexar_solly.png') no-repeat center 4px;
}
.pyro-icon a {
	background: url('/w/images/1/1f/User_Lexar_pyro.png') no-repeat center 4px;
}
.demoman-icon a {
	background: url('/w/images/6/69/User_Lexar_demo.png') no-repeat center 4px;
}
.heavy-icon a {
	background: url('/w/images/e/e2/User_Lexar_heavy.png') no-repeat center 4px;
}
.engineer-icon a {
	background: url('/w/images/6/6c/User_Lexar_engy.png') no-repeat center 4px;
}
.medic-icon a {
	background: url('/w/images/2/2c/User_Lexar_medic.png') no-repeat center 4px;
}
.sniper-icon a {
	background: url('/w/images/e/ea/User_Lexar_sniper.png') no-repeat center 4px;
}
.spy-icon a {
	background: url('/w/images/a/a2/User_Lexar_spy.png') no-repeat center 4px;	
}
/*/classes 2*/

/*index*/
.index-box .index-link {
	display: block;
	width: 33%;
	text-align: center;
	float: left;
}
.index-link img {
	max-width:98%;
	height:auto;
}
.index-link span {
	display: block;
	font-weight: bold;
	font-size:110%;
}
.index-break {
	clear:both;
}
/*/index*/

/*updates*/
.update-half {
	width: 49%;
	float: left;
}
.update-sub-box {
	background: #D3D2D0;
	padding: 7px 10px;
	margin: 5px 0px;
	text-align: center;
	line-height: 1.5;
}
.update-sub-box div {
	text-align: center;
    font-weight: bold;
}
.update-sub-box div span {
	font-size: 110%;
}
.update-sub-box div.update-date {
	font-size: 95%;
    font-weight: lighter;
}
.wiki-cap {
	margin-left: 1%;
	text-align: center;
	margin: 5px 0px 5px 1%;
}
.wiki-cap span {
	display: block;
	margin: 20px 0px;
}
/*/updates*/

/*help table*/
.table-of-help {
	border:solid #4f4945 2px;
	margin:10px auto 30px;
	width:100%;
	background:url(img/wiki-box-back.png) #f1f1f1 repeat-x;
}
.table-left {
	float:left;
	width:70%;
	margin-right: -1px;
	border-right: 1px solid #ccc;
}
.table-right {
	float:left;
	width:30%;
}
.help-header-main {
	width: 100%;
	text-align: center;
	padding: 10px 0px;
	border-bottom:solid 1px #ccc;
	font-weight:bold;
}
.help-header-extra {
	width: 100%;
	text-align: center;
	padding: 10px 0px;
	border-bottom:solid 1px #ccc;
	font-weight:bold;
}
.table-main {
	display: table;
	width: 100%;
}
.table-main .section-main {
	display: table-row;
}
.table-main .section-main .section-title {
	display: table-cell;
	vertical-align: middle;
	width: 20%;
	text-align: center;
	margin-right: -1px;
	border-right: 1px solid #ccc;
	font-size:11px;
	font-weight:bold;
	border-bottom: solid 1px #ccc;
}
.table-main .section-main a, .table-main .section-main a:visited {
	font-size:11px;
}
.table-main .section-main .row-group {
	display: table-cell;
}
.table-main .section-row{
	padding: 0px;
	display: table;
	width: 100%;
	text-align: left;
	border-bottom: solid 1px #ccc;
	min-height: 27px;
	vertical-align: middle;
	line-height:1.5;
}
.table-main .section-row .section-subtitle {
	display: table-cell;
	padding: 4px 13px;
	text-align: right;
	width:25%;
	vertical-align:middle;
	font-size:11px;
	font-weight:bold;
}
.table-main .section-row .section-cell {
	display:table-cell;
	vertical-align:middle;
	padding:5px 10px;
	font-size:11px;
}
.quicklinks {
	text-align: center;
	margin-bottom: 20px;
	line-height: 1.35;
}
div#content .quicklinks p {
	margin:0px;
}
.table-of-help .table-right a, .table-of-help .table-right a:visited {
	font-size:13px;
}
/*/help-table*/

@media screen and (max-width : 1070px) {
	#wiki-logo-area,
	#header-bullets  {
		width:100%;
		text-align:center;
		margin:0 auto;
		float:none;
	}
	#header-bullets {
		margin-top:10px;
		min-width:inherit;
	}
	#header-bullets ul li {
		display: inline-block;
		width: auto;
		float: none;
		line-height: 1;
		padding: 0px 0px 0px 10px;
		margin: 3px 0px 2px 10px;
		background-position: 0px -3px;
	}
	#header-bullets ul li a, #header-bullets ul li a.external {
		display: block;
	}
	#header-bullets ul .breaker {
		width: 100%;
		height: 0px;
		display: block;
	}
	#header-bullets ul .breaker {
		display:none;
	}
}

@media screen and (max-width : 1000px) {
	.class-link-icon {
		min-width: 95px;
		width:33%;
		margin:10px 0px;
	}
}
@media screen and (max-width : 950px) and (min-width : 769px) {
	.half-box {
		width: 96%;
		float: none;
		margin: 30px 0px;
		margin-left: -2px;
	}
	/*help table*/
	.table-left {
		width:100%;
		border-right:none;
	}
	.table-right {
		width:100%;
	}
	.quicklinks {
		width: 50%;
		float: left;
		margin-bottom: 20px;
	}
	/*/help-table*/
}
@media screen and (max-width : 800px) and (min-width : 769px) {
	/*help table*/
	.table-left {
		border-right:none;
	}
	.table-main .section-main {
		display: block;
	}
	.table-main .section-main .section-title {
		display: block;
		border-right: 0px;
		width: 100%;
		padding: 10px 0px;
		font-size:13px;
	}
	.table-main .section-main .row-group {
		display:block;
	}
	.table-main .section-row{
		display:block;
	}
	.table-main .section-row .section-subtitle {
		display: block;
		padding: 10px 0px;
		width: 100%;
		text-align: center;
		border-bottom: solid 1px #ccc;
	}
	.table-main .section-row .section-cell {
		display: block;
		text-align: center;
		padding: 5px;
	}
	.quicklinks {
	}
	.table-of-help .table-right a, .table-of-help .table-right a:visited {
	}
	/*/help-table*/
}
@media screen and (max-width : 768px) {
	html body {
		background:#fff !important;
	}
	#mw-panel .portal {
		display:none !important;
	}
	
	#mw-head-base, #left-navigation, #right-navigation, #p-cactions, #p-personal {
		display:none;
	}
	#mw-page-base {
		height:0px;
		background:url(/w/images/d/d1/User_Lexar_responsive_header_back.png) repeat-x !important;
		margin-top: 38px;
	}
	body.vector-animateLayout #p-logo {
		background: none !important;
		margin-top: 50px;
		display:none;
	}
	#mw-panel.collapsible-nav .portal {
		display:none !important;
	}
	body div#content {
		margin-left: 0em !important;
	    position: relative;
	    z-index: 1;
		border-left: none !important;
	}
	div.vectorTabs ul li.selected {
		z-index:3;
		position:relative;
	}
	body.vector-animateLayout div#footer {
		margin-left: 0px !important;
	    z-index: 1;
	    position: relative;
	}
}
@media screen and (max-width : 650px) {
	.half-box {
		width: 96%;
		float: none;
		margin: 30px 0px;
		margin-left: -2px;
	}
	/*help table*/
	.table-left {
		width:100%;
		border-right:none;
	}
	.table-right {
		width:100%;
	}
	.quicklinks {
		width: 50%;
		float: left;
		margin-bottom: 20px;
	}
	/*/help-table*/
	.network-box span {
		width:50%;
	}
	.network-clear {
		display:block;
		clear:both;
		height:50px;
	}
}
@media screen and (max-width : 480px) {
	.class-link-icon {
		width:50%;
	}
	/*help table*/
	.table-left {
		border-right:none;
	}
	.table-main .section-main {
		display: block;
	}
	.table-main .section-main .section-title {
		display: block;
		border-right: 0px;
		width: 100%;
		padding: 10px 0px;
		font-size:13px;
	}
	.table-main .section-main .row-group {
		display:block;
	}
	.table-main .section-row{
		display:block;
	}
	.table-main .section-row .section-subtitle {
		display: block;
		padding: 10px 0px;
		width: 100%;
		text-align: center;
		border-bottom: solid 1px #ccc;
	}
	.table-main .section-row .section-cell {
		display: block;
		text-align: center;
		padding: 5px;
	}
	.quicklinks {
	}
	.table-of-help .table-right a, .table-of-help .table-right a:visited {
	}
	/*/help-table*/
}

/*mobile-menu css */

#mobile-menu {
	width: 100%;
	height: 38px;
	background: url("https://wiki.teamfortress.com/w/images/6/60/User_Lexar_bar-back.png") white repeat-x center top;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
}
#mobile-menu * {
	line-height:1;
}
#mobile-menu .mobile-menu-button {
  height: 100%;
  float: left;
  position: relative;
  cursor: pointer;
  background: url("https://wiki.teamfortress.com/w/images/1/1b/User_Lexar_menu-button2.png") repeat-x center top;
  width: 50px;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  transition: all 250ms linear;
}
#mobile-menu .mobile-menu-button .button-bar {
  float: left;
  position: relative;
  width: 36px;
  height: 4px;
  background: #c1c1c1;
  margin-top: 6px;
  margin-left: 10px;
  clear: both;
  display: none;
}
#mobile-menu .mobile-menu-button:hover, #mobile-menu .mobile-menu-button.active {
  background: url("https://wiki.teamfortress.com/w/images/f/fa/User_Lexar_menu-button-hover2.png") repeat-x center top; 
}
#mobile-menu #page-menu, #mobile-menu #account-menu {
  background: url("https://wiki.teamfortress.com/w/images/6/60/User_Lexar_bar-back.png") repeat-x;
  float: left;
  margin-left: 12px;
  height: 16px;
  font-size: 16px;
  padding: 9px 11px 13px;
  color: #fff;
  cursor: pointer;
  font-family: TF2 Build, "TF2 Build", Arial;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  transition: all 250ms linear;
}
#mobile-menu #page-menu .arrow-anim, #mobile-menu #account-menu .arrow-anim {
  display:inline;
}
#mobile-menu #page-menu .arrow-anim img, #mobile-menu #account-menu .arrow-anim img {
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  transition: all 250ms linear;
}
#mobile-menu #account-menu:hover, #mobile-menu #account-menu.down, #mobile-menu #page-menu:hover, #mobile-menu #page-menu.down {
  background: url("https://wiki.teamfortress.com/w/images/3/38/User_Lexar_bar-back-hover.png") repeat-x;
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  -ms-transition: all 500ms linear;
  transition: all 500ms linear;
}
#mobile-menu .down .arrow-anim img {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
#mobile-menu #account-list, #mobile-menu #tab-menu {
  list-style: none;
  padding: 0px;
  float: left;
  margin-left: 12px;
  max-height: 0px;
  display: block;
  position: absolute;
  overflow: hidden;
  background: #b5b5b5;
  top: 38px;
  height: 38px;
  left: 0px;
  width: 100%;
  margin: 0px;
  -webkit-transition: all 100ms linear;
  -moz-transition: all 100ms linear;
  -o-transition: all 100ms linear;
  -ms-transition: all 100ms linear;
  transition: all 100ms linear;
}
#mobile-menu #account-list li, #mobile-menu #tab-menu li {
  float: left;
  position: relative;
  background: #b5b5b5;
  -webkit-transition: background-image 250ms linear;
  -moz-transition: background-image 250ms linear;
  -o-transition: background-image 250ms linear;
  -ms-transition: background-image 250ms linear;
  transition: background-image 250ms linear;
}
#mobile-menu #account-list li span, #mobile-menu #tab-menu li span {
  float: left;
  display: block;
}
#mobile-menu #account-list li span a, #mobile-menu #tab-menu li span a {
  height: 38px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  font-family: TF2 Build, "TF2 Build", Arial;
  font-size: 14px;
  padding: 11px 11px 12px;
  display: block;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  transition: all 250ms linear;
}
#mobile-menu #account-list li span a:hover, #mobile-menu #tab-menu li span a:hover {
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  -ms-transition: all 500ms linear;
  transition: all 500ms linear;
}
#mobile-menu #account-list li.f-right, #mobile-menu #tab-menu li.f-right {
  float: right;
}
#mobile-menu #account-list li:hover, #mobile-menu #tab-menu li:hover {
  float: left;
  background: url("https://wiki.teamfortress.com/w/images/3/38/User_Lexar_bar-back-hover.png") repeat-x;
  -webkit-transition: background-image 250ms linear;
  -moz-transition: background-image 250ms linear;
  -o-transition: background-image 250ms linear;
  -ms-transition: background-image 250ms linear;
  transition: background-image 250ms linear;
}
#mobile-menu #account-list li.selected, #mobile-menu #tab-menu li.selected {
  background: url("https://wiki.teamfortress.com/w/images/3/38/User_Lexar_bar-back-hover.png") repeat-x;
}
#mobile-menu #account-list.down, #mobile-menu #tab-menu.down {
  display: block;
  height: 38px;
  z-index: 5;
  -webkit-transition: all 100ms linear;
  -moz-transition: all 100ms linear;
  -o-transition: all 100ms linear;
  -ms-transition: all 100ms linear;
  transition: all 100ms linear;
  max-height: 40px;
}
#mobile-menu #search-expand {
  float: right;
  position: relative;
  width: 64px;
  height: 38px;
  background: url("https://wiki.teamfortress.com/w/images/e/ed/User_Lexar_search-out.png") no-repeat;
  background-color: transparent;
  cursor: pointer;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  transition: all 250ms linear;
  display: block;
}
#mobile-menu #search-expand:hover {
  background: url("https://wiki.teamfortress.com/w/images/c/c1/User_Lexar_search-out-hover.png") no-repeat;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  transition: all 250ms linear;
}
#mobile-menu #search-expand.out {
  background: url("https://wiki.teamfortress.com/w/images/d/d2/User_Lexar_search-out-active.png") no-repeat;
}
#mobile-menu #p-search {
  display: block;
  overflow: hidden;
  height: 38px;
  float: right;
  width: 0px;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  transition: all 250ms linear;
}
#mobile-menu #p-search #searchform {
  margin: 0px;
  position: relative; 
}
#mobile-menu #p-search.out {
  width: 65%;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  transition: all 250ms linear;
}
#mobile-menu div#simpleSearch {
  position: absolute;
  float: left;
  left: 0px;
  top: 0px;
  width: 100%;
}
#mobile-menu div#simpleSearch #searchInput {
  border: 0px;
  height: 38px;
  width: 70%;
  box-sizing: border-box;
  padding: 0px 10px;
  float: left;
  background: #eaeaea;
  color: #565656;
}
#mobile-menu div#simpleSearch #searchButton {
  float: left;
  width: 30%;
  background: none;
  height: 38px;
  border: 0;
  margin: 0;
  text-align: center;
  cursor: pointer;
  background: #cdcdcd;
  font-weight: bold;
  font-size: 18px;
  text-transform: uppercase;
  color: #565656;
  font-family: TF2 Build, "TF2 Build", Arial;
}
#mobile-menu #mobile-ul-main {
  max-height: 300px;
  overflow: hidden;
  position: absolute;
  top: 38px;
  left: 0px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  background: #eaeaea;
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  -ms-transition: all 500ms linear;
  transition: all 500ms linear;
}
#mobile-menu #mobile-ul-main li h3 {
  margin: 0px 0px;
  padding: 5px 22px 7px;
  line-height: 1;
  padding-left: 22px;
  height: 15px;
  cursor: pointer;
}
#mobile-menu #mobile-ul-main li h3 a, #mobile-menu #mobile-ul-main li h3 span {
  font-size: 15px;
  color: #838383;
  font-weight: normal;
  height: 15px;
  text-decoration: none;
  cursor: pointer;
}
#mobile-menu #mobile-ul-main li h3 img {
  -webkit-transition: all 150ms linear;
  -moz-transition: all 150ms linear;
  -o-transition: all 150ms linear;
  -ms-transition: all 150ms linear;
  transition: all 150ms linear;
}
#mobile-menu #mobile-ul-main li h3:hover, #mobile-menu #mobile-ul-main li h3.down {
  background: #c5c5c5;
}
#mobile-menu #mobile-ul-main li h3.down {
  margin-bottom: 1px;
}
#mobile-menu #mobile-ul-main li h3.down img {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
#mobile-menu #mobile-ul-main ul {
  display: block;
  max-height: 0px;
  overflow: hidden;
  padding: 0px;
  padding-left: 19px;
  border-bottom: solid 1px #eaeaea;
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  -ms-transition: all 500ms linear;
  transition: all 500ms linear;
}
#mobile-menu #mobile-ul-main ul li {
  list-style: none;
  float: left;
  display: block;
}
#mobile-menu #mobile-ul-main ul li a {
  display: block;
  color: #838383;
  text-decoration: none;
  padding: 4px 15px;
  font-size: 14px;
}
#mobile-menu #mobile-ul-main ul li a:hover {
  background: #c5c5c5;
}
#mobile-menu #mobile-ul-main ul .clearing {
  height: 0;
  clear: both;
}
#mobile-menu #mobile-ul-main .clearing {
  height: 0;
  clear: both;
}
#mobile-menu #mobile-ul-main ul.open {
  max-height: 100px;
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  -ms-transition: all 500ms linear;
  transition: all 500ms linear;
  display: block;
  border-bottom: solid 1px #cecece;
  padding: 2px 0px;
  padding-left: 19px;
}
#mobile-menu #mobile-ul-main.down {
  z-index: 5;
  max-height: 300px;
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  -ms-transition: all 500ms linear;
  transition: all 500ms linear;
}


@media screen and (min-width : 769px) {
	#mobile-menu {
		display:none;
	}
}