Jump to content

[SOLVED] Enlarge or Shrink Menu


Blu-Express VA

Recommended Posts

How??

My skin is Brilliance V1

My Stile.CSS code is:

*{
margin:0;
padding:0;
}
body{
background:#fff;
font:11px/20px Tahoma,Helvetica,sans-serif;
color:#222;
}

/* Layout Styles Starts */

#wrapper{
width:900px;
margin:0 auto;
position:relative;
padding:0 0 10px 0;
}
#header-top{
	height:80px;
	overflow:hidden;
	padding:20px 25px 0 25px;
}
	#logo{
		float:left;
	}
		#logo h1{
			background:url(../images/logo.jpg) no-repeat;
			width:173px;
		}
			#logo h1 a{
				display:block;
				height:66px;
			}
				#logo h1 a span{
					display:none;
				}
#s3slider{
	position:relative;
	height:263px;
	overflow:hidden;
}
	#s3sliderContent {
	   width: 900px; /* important to be same as image width or wider */
	   position: absolute; /* important */
	   top: 0; /* important */
	   margin-left: 0; /* important */
	}

	.s3sliderImage {
	   float: left; /* important */
	   position: relative; /* important */
	   display: none; /* important */
	}

	.s3sliderImage span {
	   position: absolute; /* important */
	   left: 0;
	   font: 10px/15px Arial, Helvetica, sans-serif;
	   padding: 10px 13px 15px 13px;
	   width: 874px;
	   background-color: #000;
	   filter: alpha(opacity=50); /* here you can set the opacity of box with text */
	   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
	   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
	   opacity: 0.5; /* here you can set the opacity of box with text */
	   color: #fff;
	   display: none; /* important */
	   bottom: 0;

	   /*
		   if you put
		   top: 0; -> the box with text will be shown at the top of the image
		   if you put
		   bottom: 0; -> the box with text will be shown at the bottom of the image
	   */
	}
#menu{
	background:url(../images/menu-bg.jpg) no-repeat;
	height:62px;
	margin:1px 0 0 0;
	overflow:hidden;
}
	#menu ul{
		list-style:none;
		text-align:center;
	}
		#menu li, #menu li a, #menu li a.current{
			display:block;
			float:left;
		}
		#menu li{
			line-height:44px;
			text-transform:uppercase;
			border-right:1px solid #444444;
		}
		#menu li.noborder{border:none;}
			#menu li a{
				color:#939393;
				text-decoration:none;
				padding:0 31px;
			}
				#menu li a:hover{
					color:#fff;
					text-decoration:none;
				}
			#menu li a.current{
				text-decoration:none;
				padding:0 31px;
				color:#fff;
				text-decoration:none;
			}

#container{
	margin:0 0 10px 0;
	padding:15px 10px 0 10px;
	background:transparent url(../images/container-divider.jpg) no-repeat 625px top;
}	
	#mainarea{
		width:605px;
		float:left;
	}
	#sidearea{
		width:245px;
		float:right;
	}
	.block1{
		width:286px;
		margin:0 10px 10px 0;
		display:block;
		float:left;
	}
		.block1 p{
			text-align:center;
		}
		.block1 img{
			border:1px solid #d9d9d9;
			padding:3px;
			background:#fff;
		}
#footer{
	background:url(../images/footer-bg.jpg) no-repeat;
	height:60px;
	overflow:hidden;
	color:#939393;
	padding:0 20px;
	line-height:44px;
	font-size:10px;

}
	#footer a{
		color:#939393;
		text-decoration:none;
	}
		#footer a:hover{
			color:#fff;
			text-decoration:underline;
		}

/* Layout Styles Ends */

/* Panel Tab/button */
.tab {
 	background: url(../images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
   top: 0;
   z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
 	float: right;
 	clear: right;
 	height: 42px;
width: auto;
 	font-weight: bold;
line-height: 42px;
margin: 0;
right: 50px;
 	color: white;
 	font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
 	background: url(../images/tab_l.png) no-repeat left 0;
 	height: 42px;
width: 30px;
padding: 0;
margin: 0;
 	display: block;
float: left;
}

.tab ul.login li.right {
 	background: url(../images/tab_r.png) no-repeat left 0;
 	height: 42px;
width: 30px;
padding: 0;
margin: 0;
 	display: block;
float: left;
}

.tab ul.login li {
	text-align: left;
 	padding: 0 6px;
display: block;
float: left;
height: 42px;
 	background: url(../images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #bfbfbf;
}

.tab ul.login li a:hover {
color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(../images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(../images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 999;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #bfbfbf;
}

#panel a:hover {
color:#fff;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(../images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(../images/bt_register.png) no-repeat 0 0;
}
#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

/* Links Styles Starts */

readmore{
font-size:9px;
}
a.readmore{
font-size:10px;
}
#container p.hr{
border:solid #d3d3d3;
border-width:1px 0 0 0;
margin:0;
outline:none;
}
#mainarea a{
border-bottom:1px dotted;
}
#mainarea a:hover{
text-decoration:none;
}
/* Links Styles Ends */

/* Form Styles */


#mainarea form{
padding:0 5px;
}
#mainarea form p{
margin:0 0 5px 0;
}
#mainarea form p.floatleft{
margin-right:15px;
}
.input{
border:1px solid #a5a5a5;
background:none;
cursor:text;
margin:5px 0;
padding:2px;
width:200px;
}
textarea.input{
width:415px;
height:100px;
}
.input:focus, .textarea:focus{
border:1px solid #000;
}
.signin-btn, .button1{
background: transparent url(../images/bt_register_black.png) no-repeat 0 0;
width:94px;
height:24px;
line-height:20px;
margin:8px 0;
padding:2px 10px !important;
padding:2px 0;
color:#fff;
font-weight:bold;
border:none;
outline:none;
cursor:pointer;
}

/* Form Styles */


/* Paragraph and list Styles */

#container p{
margin:0 0 15px 0;
}
#container form p{
margin:0 0 5px 0;
}
#container p img.floatleft{
margin:0 20px 0 0;
}
#container p img.floatright{
margin:0 0 0 20px;
}
#mainarea img.floatleft, #mainarea p img.floatleft{
margin:10px 10px 10px 0;
}
#mainarea img.floatright, #mainarea p img.floatright{
margin:10px;
}
#container ul, #container ol{
margin:0 0 0 20px;
}
#container ol{
margin:0 0 0 30px;	
}
#container ul#works{list-style:none;margin:0;}
#container dt{
font-weight:bold;
margin:5px 0;
}

/* Paragraph Styles */

/* Genric Styles Starts */

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
a {
color:#222;
text-decoration:none;
font-weight:bold;
}
a:hover {text-decoration:underline;color:#ea4900;}
h1{font-size:32px;}
h2{font-size:22px;}
h3{font-size:18px;}
h4{font-size:16px;}
h5, h6{font-size:14px;}
h1,h2,h3,h4,h5,h6{margin:0 0 15px 0; color:#5c5b5b;font-family:"Trebuchet MS";font-weight:normal;}
img{border:none;}
.clear{clear:both;}
.floatleft{float:left;}
.floatright{float:right;}
.center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.normal, .normal a{font-weight:normal;}
.textbold{font-weight:bold;}
#container .nomargin, .nomargin{margin:0;}
#container.nobg, .nobg{background:none;}

/* Genric Styles Ends */

Thanks in Advanced!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...