/*

	
	corporattica // free CSS template
	
	=================================
	
	Author: hasmat ghonia
	
	
	
	---------------------------------

*/

@charset "utf-8";

/* reset */
*{
	margin:0;
	padding:0;
	outline:0;
}
img {
	border: 0; 
}
.clear { 
	clear: both; 
}
.line {
	clear: both;
	padding: 15px 0 0;
	margin: 0 0 25px;
	border-bottom: 1px solid #ddd;
}

body { 
	font: .8em Arial, Verdana, Tahoma, Sans-Serif; 
	background: #f4f4f4 url(../images/bgtile.jpg) repeat-x; 
	color: #555; 
}

/* typography and links */
a { 
	text-decoration: none;
	color: #333;
}

p  { 
	margin: 0 0 17px; 
	line-height: 1.6em; 
}

/* headings */
h1, h2, h3, h4, h5 {
	font-weight: normal;
}
h1 { 
	float: left; 
	font-size: 2.1em; 
	color: #fff;
	letter-spacing: -1.4px;	
	margin: 0 0 30px 0;
	padding: 34px 0 0 10px;
}
h1 a { 
	color: #fff; 
}
h2 { 
	margin: 0 0 15px; 
	font-size: 1.9em; 
	color: #000; 
}
h2.inner { 
	border-bottom: 1px solid #ddd; 
	margin: 0 0 25px; 
	padding: 0 0 10px; 
}
h3 { 
	margin: 0 0 7px;  
	font-size: 1.3em; 
	clear: both; 
	color: #000; 
	line-height: 1.3em; 
}
h4 { 
	margin: 0 0 10px; 
	font-size: 1.2em; 
	color: #000; 
}
h5 {
	font-size: 1em;
	color: #eee; 
	margin: 0 0 14px;
}

#bg { 
	background: url(../images/bg.jpg) no-repeat center top; 
}

/* content holder */
.wrap { 
	margin: 0 auto; 
	width: 960px;
}

/* menu */
#mainmenu { 
	float: right; 
	padding: 69px 0 0;
	 
}
#menu ul { 
	float: right;
	 
}
#menu li { 
	display: inline; 
	float: left; 
	margin: 0 0 0 18px; 
}
#menu li a { 
	display: block; 
	color: #999; 
	padding: 7px; 
	font-size: 1.1em; 
	border: 1px solid transparent; 
}
#menu a:hover, #menu li.current a { 
	border-color: #007cc3; 
	color:#007cc3; 
}
#menu li ul { 
	top: 117px;
	background: url(../images/dot.png); 
	padding: 3px;
	font-size: .92em; 
	position: absolute; 
	display: none; 
	z-index: 100;
	 	
}
#menu li ul li { 
	float: none; 
	display: inline; 
	margin: 0; 
	padding: 0; 
	clear: left;
	
}

#menu li ul li a { 
	color: #fff;
	margin: 4px; 
	white-space: nowrap;
	padding: 5px;
	
}
#menu li ul li a:hover {
	background: #84c225;
	border-color: #2C2D2F;
	
}

/* pitch slideshow */
#pitch { 
	clear: both; 
	height: 356px; 
	background: url(../images/bottom-shadow.png) no-repeat  bottom;
	margin: 0 0 25px;
}
#slideshow {
    position:relative;
    height: 310px;
	
}
#slideshow img {
	float: left;
	
}
#slideshow div {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
	
}
#slideshow div.active {
    z-index: 10;
}
#slideshow div.last-active {
    z-index: 9;
}

#zoom { 
	z-index: 11; 
}

/* pitch overlay */
.overlay {
	clear: both;
	float: left; 
	z-index: 100;
	position: relative; 
	margin: 100px 0 0; 
}
.overlay h2{ 
	color: #fff; 
	font-size: 2em;
	background: url(../images/dot.png);
	padding: 16px;
	margin: -99px 205px 0;
	float: left;
	width: 250px;
}
.overlay p {
	clear: both;
	background: #fff;
	padding: 16px;
	width: 300px;
}

#slideshow:hover .arrow {
	background: url(../images/dot.png);
}

.arrow { 
	float: right;
	position: relative;
	width: 365px;
	background: url(../images/dot.png);
	height: 63px;
	margin: -180px 0 0;
	z-index: 100;
}

.arrow a { 
	float: left;
	background: url(../images/pitcharrow.gif) no-repeat center center; 
	width: 15px;
	height: 24px;
	padding: 19px 25px;
}


/* inner pitch */
#inner-pitch {
	clear: both;
}
#inner-pitch .overlay {
	margin: 0;
	width: 920px;
}

/* main content */
#main { 
	clear: left; 
	float: left; 
	width: 680px;
	border-right: 1px dotted #ddd;
	padding: 0 30px 0 0;
	margin: 0 0 30px;
}

#intro { 
	padding: 0 0 20px; 
	margin: 0 0 25px;
	border-bottom: 1px dotted #ddd; 
}

/* holder for page content */
#page { 
	
}
.justify { 
	text-align: justify; 
}

/* images align */
.left { 
	float: left; 
	margin: 0 15px 5px 0; 
}
.right { 
	float: right; 
	margin: 0 0 5px 15px; 
}

/* tables */
.table { 
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 30px;	
}
.table td {
	padding: 10px;
	border-bottom: 1px solid #ddd;
}
.table thead td {
	font-weight: bold;
	border-bottom: 3px double #ddd;
	border-top: 1px solid #ddd;
	background: #fff;
}
.table .odd td { background: #fff; }

/* blog posts */
.blog-post  { 
	border-bottom: 1px solid #ddd; 
	margin: 0 0 30px; 
}
.blog-date { 
	float: left; 
	width: 40px; 
	text-align: right; 
	font-size: .9em; 
	padding: 4px 0 0;
}
.blog-date span { 
	font-size: 1.8em; 
}
.blog-body { 
	float: right; 
	width: 590px; 
	border-left: 1px solid #ddd;
	padding: 0 0 0 22px;
}

/* lists */
#page ul, #page ol { 
	margin: 0 0 25px 27px; 
}
#page li { 
	padding: 6px 0; 
	list-style: square; 
}

/* boxes */
.half, .third { 
	float: left; 
	width: 292px; 
	padding: 15px; 
	margin: 0 30px 30px 0; 
}
.third {
	width: 175px;
}

.last { 
	margin-right: 0;
	
}

.last1 { 
	margin-right: 0;
	margin-top:60px; 
}


/* home page bits */
#bits {
	clear: both;
	margin: 0 0 25px; 
}

.bit {
	float: left;
	width: 203px;
	padding: 0 35px 0 0;
}
.bit h4 {
	margin: 0 0 18px;
}
.bit img { margin: 0 0 8px; }

.bit p {
	font-size: .9em;
}
.bit.last { padding-right: 0; }
.more { margin: 0; }


/* sidebar */
#side { 
	float: right; 
	width: 220px; 
	font-size: .9em;
}

#side h4 {
	margin: 0 0 23px;
	font-size: 1.3em;
}

.news { 
	border-bottom: 1px dotted #ddd;
	margin: 0 0 11px;
 
}
.news h5 { 
	margin: 0 0 5px; 
	font-size: 1.2em;
}
.news p {
	margin: 0 0 11px;
}

#quote {
	margin: 0 0 30px;
	padding: 20px 0 0 0;
	font-size: .94em;
}

/* side menu */
.side-menu li { 
	list-style: none; 
	padding: 10px 4px; 
	
}


/* forms */
fieldset {
	border: 0;
}
label { 
	display: block;
	color: #36F;
	padding: 0 0 1px;
	font-weight:100;
	font-size:16px;
}
input.text, textarea.text ,select.text{
	width: 300px;
	padding: 7px;
	border: 0;
	border: 1px solid #ddd;
	margin: 0 0 1px;
	color: #36D;
	font-size:16px;
}
textarea.text  {
	width: 300px;
	height: 80px;
}
input.submit {
	color: #fff;
	padding: 7px 10px;
	border: 0;
	font-weight: bold;
	background: #777;
}
	

/* footer */
#footer { 
	clear: both; 
	color: #999; 
	background: url(../images/footertile.jpg) repeat-x;
	font-size: .9em;
}
#footerbg {
	padding: 35px 0 15px 0;
	background: url(../images/footer.jpg) no-repeat center top;
}
#footer p { 
	margin: 0 0 12px;
	padding: 6px 0;
}
#footer_menu {
	float: right;
	padding: 4px 0 0;
}
#footer a { 
	color: #999; 
	margin: 0 5px 0 0; 
	padding: 6px 10px;
	background: url(../images/dot.png) no-repeat left center; 
	border: 1px solid transparent;
}
#footer a:hover {
	border-color: #555;
}
#fleft {
	clear: both;
	padding: 25px 0 0;
	font-size: .94em;
}

#copy { 
	color: #777; font-size: 1.5em; 
}
#copy span { 
	color: #999; 
}



/* error */
#error { 
	color: #F00;
	font-size:16px;
	font-weight: bold;
}

/* success */
#success { 
	color: #090;
	font-size:16px;
	font-weight: bold;
}

ul#portfolio-filter {
    background: url(../images/filter-bg.png) no-repeat scroll 0 0 transparent;
    display: block;
    height: 63px;
    margin-bottom: 0;
    margin-top: 20px;
    overflow: hidden;
    padding: 12px 20px 5px;
    width: 700px;
}

ul#portfolio-filter li {
    display: block;
    float: left;
    font-size: 14px;
	font-weight:bold;
    margin-right: 10px;
    margin-top: 16px;
}

ul#products-side {
    background: url(../images/follow-bg.png) no-repeat scroll 0 0 transparent;
    display: block;
    height: 63px;
    margin-bottom: 0;
    margin-top: -25px;
    overflow: hidden;
    padding: 12px 20px 5px;
    width: 300px;
}

ul#products-side li {
    display: block;
    float: left;
    font-size: 16px;
	font-weight:bold;
    margin-right:10px;
    margin-top: -13px;
}

ul#products-side li a:hover {
	border-color: #FF0;
}

CSS Code


← Back to Article   More Demos →
Midphase Cloud ServersMidphase Cloud ServersEasy to use cloud servers on a true cloud infrastructure. Get your business on
via Ad Packs
View the CSS
Button Maker
Top Gradient Color
Bottom Gradient Color
Top Border Color
Hover Background Color
Text Color
Hover Text Color
Active Background Color

CSS-Tricks Example
← Back to Article   More Demos →
Midphase Cloud ServersMidphase Cloud ServersEasy to use cloud servers on a true cloud infrastructure. Get your business on
via Ad Packs
View the CSS
Button Maker
Top Gradient Color
Bottom Gradient Color
Top Border Color
Hover Background Color
Text Color
Hover Text Color
Active Background Color










.button {
font-family: Arial;
color: #ffffff;
font-size: 35px;
padding: 11px;
text-decoration: none;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
-webkit-box-shadow: 2px 3px 3px #666666;
-moz-box-shadow: 2px 3px 3px #666666;
box-shadow: 2px 3px 3px #666666;
text-shadow: 1px 1px 3px #666666;
border: solid #ba889e 1px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fc3f94), to(#fc0574));
background: -moz-linear-gradient(top, #fc3f94, #fc0574);
}
.button:hover {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#8a808a), to(#000000));
background: -moz-linear-gradient(top, #8a808a, #000000)
}