www.gusucode.com > 200套html5精品模板101_150 > 200套html5精品模板101_150/128/css/elements.css

    
/*=========================================================================
Elements
========================================================================= */


/*=========================================================================
LIST ELEMENTS
========================================================================= */

.list-style-1 { display: block; margin-bottom: 20px; list-style-position: inside; }

.list-style-1 li { border-bottom: 1px dotted #E9E9EA; float: none; margin: 0 !important; padding: 4px 0 4px 4px; }

.list-style-1 li a img { padding-right: 12px; width: auto !important; }

.list-style-1 li a { color: #777777; }

.list-style-1 li a:hover {  }

.list-style { display: block; margin-bottom: 20px; }

.list-style li { border-bottom: 1px dotted #E9E9EA; display: block; float: none; margin: 0 !important; padding: 4px 0 4px 24px; }

.list-style li a img { padding-right: 12px; width: auto !important; }

.list-style li a { color: #777777; }

.list-style li a:hover {  }

.arrow-list, .arrow-list-2, .circle-list, .check-list, .check-list-2, .star-list, .plus-list, .dash-list { list-style: none; margin: 0; padding: 0 0 0 24px; }

.arrow-list { background: url("../images/icons/list-arrow.png") no-repeat scroll 5px 9px transparent; }

.arrow-list-2 { background: url("../images/icons/list-arrow-2.png") no-repeat 2px 8px; }

.circle-list { background: url("../images/icons/list-circle.png") no-repeat 4px 9px; }

.check-list { background: url("../images/icons/list-check.png") no-repeat 3px 7px; }

.check-list-2 { background: url("../images/icons/list-check-2.png") no-repeat 0 7px; }

.star-list { background: url("../images/icons/list-star.png") no-repeat 0 5px; }

.plus-list { background: url("../images/icons/list-plus.png") no-repeat 3px 7px; }

.dash-list { background: url("../images/icons/list-dash.png") no-repeat 3px 12px; }

/*=========================================================================
ALER BOXES
========================================================================= */

.message-box-error, .message-box-success, .message-box-info, .message-box-notice { display: block; padding: 10px 20px 10px 44px; }

.message-box-error strong, .message-box-success strong, .message-box-info strong, .message-box-notice strong { float: left; font-size: 12px; line-height: 1.8em; font-family: 'Open Sans', Arial, Tahoma, sans-serif; font-weight: 800;      text-shadow: 0 0; text-transform: capitalize; }

.message-box-error { background: #f9e5e6 url("../images/icons/icon-box-error.png") no-repeat 10px 9px; border: 1px solid #f7c7c9; border-left-width: 4px; color: #b3696c; }

.message-box-success { background: #e3ebc6 url("../images/icons/icon-box-success.png") no-repeat 12px 8px; border: 1px solid #c2d288; border-left-width: 4px; color: #8fa442; }

.message-box-info { background: #d8ecf5 url("../images/icons/icon-box-info.png") no-repeat 10px 8px; border: 1px solid #9ac9df; border-left-width: 4px; color: #528da9; }

.message-box-notice { background: #fcf7d9 url("../images/icons/icon-box-notice.png") no-repeat 10px 9px; border: 1px solid #f5dc7d; border-left-width: 4px; color: #c4a21b; }

/*=========================================================================
Message Boxes
========================================================================= */
.message-box { position: relative; margin: 0 0 20px; padding: 10px 20px; font-size: 14px; line-height: 1.2em; border-width: 1px; border-style: solid; }

.message-box strong { float: left; font-size: 12px; line-height:16px; font-family: 'Open Sans', Arial, Tahoma, sans-serif; font-weight: 800; text-shadow: 0 0; padding: 0 7px 0 0; text-transform: capitalize; }

.message-box .closemsg { position: absolute; display: block; width: 9px; height: 10px; right: 12px; top: 14px; background-position: 0 0; background-repeat: no-repeat; cursor: pointer; }

.message-box.info { background-color: #dff2fa; color: #2e7893; border-color: #85cfec; }

.message-box.info .closemsg { background-image: url(../images/icons/close-info.png); }

.message-box.note { background-color: #f8f2cb; color: #8f5c0b; border-color: #edca42; }

.message-box.note .closemsg { background-image: url(../images/icons/close-note.png); }

.message-box.confirm { background-color: #e5f2c0; color: #4a630e; border-color: #aacf49; }

.message-box.confirm .closemsg { background-image: url(../images/icons/close-confirm.png); }

.message-box.error { background-color: #ffd4d4; color: #cd0a0a; border-color: #d97676; }

.message-box.error .closemsg { background-image: url(../images/icons/close-error.png); }

/*=========================================================================
blockquotes
========================================================================= */

blockquote { background: url("../images/icons/qoute.png") no-repeat scroll left top transparent; font-size: 14px; line-height: 1.8em; font-family: 'georgia'; font-style: italic; margin-bottom: 30px; padding-left: 40px; }

blockquote.black { background: url("../images/icons/qoute.png") no-repeat scroll 10px 30px #4A5151; color: #fff; padding: 30px 30px 10px; border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; behavior: url(js/PIE.htc); }

blockquote.blue { background: url("../images/icons/qoute.png") no-repeat scroll 10px 30px #3D5B99; color: #fff; float: right; padding: 30px 30px 10px; border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; behavior: url(js/PIE.htc); }

blockquote.red { background: url("../images/icons/qoute.png") no-repeat scroll 10px 30px #D82B31; color: #fff; float: right; padding: 30px 30px 10px; border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; behavior: url(js/PIE.htc); }

/*=========================================================================
dropcap
========================================================================= */

.dropcap { float: left; font: 30px 'OpenSansBold'; margin-right: 15px; }

.dropcap2 { background: none repeat scroll 0 0 #222; border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; color: #fff; float: left; font: 18px 'OpenSansBold'; margin-right: 15px; padding: 8px 15px; text-shadow: 0 1px 1px #333; behavior: url(js/PIE.htc); }

.dropcap3 { background: none repeat scroll 0 0 #3D5B99; border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; color: #fff; float: left; font: 18px 'OpenSansBold'; margin-right: 15px; padding: 8px 15px; text-shadow: 0 1px 1px #333; behavior: url(js/PIE.htc); }

.dropcap4 { background: none repeat scroll 0 0 #D82B31; border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; color: #fff; float: left; font: 18px 'OpenSansBold'; margin-right: 15px; padding: 8px 15px; text-shadow: 0 1px 1px #333; behavior: url(js/PIE.htc); }

.dropcap5 { background: url("../images/button-shadow.png") repeat-x scroll 50% 0 #eee; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; color: #333; float: left; font: 18px 'OpenSansBold'; margin-right: 15px; padding: 8px 15px; text-shadow: 0 1px 1px #fff; behavior: url(js/PIE.htc); }

.dropcap6 { background: url("../images/button-shadow.png") repeat-x scroll 50% 0 #777; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; color: #fff; float: left; font: 18px 'OpenSansBold'; margin-right: 15px; padding: 8px 15px; text-shadow: 0 1px 1px #333; behavior: url(js/PIE.htc); }

.dropcap7 { background: url("../images/button-shadow.png") repeat-x scroll 50% 0 #3D5B99; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; color: #fff; float: left; font: 18px 'OpenSansBold'; margin-right: 15px; padding: 8px 15px; text-shadow: 0 1px 1px #333; behavior: url(js/PIE.htc); }

.dropcap8 { background: url("../images/button-shadow.png") repeat-x scroll 50% 0 #D82B31; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; color: #fff; float: left; font: 18px 'OpenSansBold'; margin-right: 15px; padding: 8px 15px; text-shadow: 0 1px 1px #333; behavior: url(js/PIE.htc); }

/*=========================================================================
TOOLTIP TIPSY
========================================================================= */

.tipsy { background-image: url("images/tipsy.gif"); background-repeat: no-repeat; font-size: 11px; opacity: 0.8; padding: 5px; }

.tipsy-inner { background-color: black; color: #FFFFFF; max-width: 200px; padding: 0 6px; text-align: center; }

.tipsy-inner { border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; behavior: url(js/PIE.htc); }

.tipsy-north { background-position: center top; }

.tipsy-south { background-position: center bottom; }

.tipsy-east { background-position: right center; }

.tipsy-west { background-position: left center; }

/*=========================================================================
Site big Alert boxes
========================================================================= */

.connected { background: url("../images/icons/info-1.png") no-repeat scroll 15px 50% #E1F2FC; border: 1px solid #68A2CF; color: #64757F; display: block; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding: 30px 20px 30px 105px; }

.failed { background: url("../images/icons/error-1.png") no-repeat scroll 15px 50% #FEEBEB; border: 1px solid #7E6C6C; color: #697A58; display: block; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding: 30px 20px 30px 105px; }

.remove { background: url("../images/icons/alert-1.png") no-repeat scroll 15px 50% #FEF7E0; border: 1px solid #E6C555; color: #79725B; display: block; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding: 30px 20px 30px 105px; }

.remove a { color: #79725B; }

.remove a:hover { color: #000; }

.add { background: url("../images/icons/download-1.png") no-repeat scroll 15px 50% #EEFFDD; border: 1px solid #A3C159; color: #697A58; display: block; font-size: 14px; font-weight: bold; margin-bottom: 10px; padding: 30px 20px 30px 105px; }

.add a { color: #697A58; }

.add a:hover { color: #000; }

/*=========================================================================
Site Buttons
========================================================================= */

.button-red, .button-red { background: url("../images/button-shadow.png") repeat-x scroll 50% 0 #d82b31; }

.button-brown, .button-brown { background: url("../images/button-shadow.png") repeat-x scroll 50% 0 #ad2f0a; }

.button-green, .button-green { background: url("../images/button-shadow.png") repeat-x scroll 50% 0 #51A351; }

.button-blue, .button-blue { background: url("../images/button-shadow.png") repeat-x scroll 50% 0 #3d5b99; }

.button-pink, .button-pink { background: url("../images/button-shadow.png") repeat-x scroll 50% 0 #f1039a; }

.button-white, .button-white { background: url("../images/button-shadow.png") repeat-x scroll 50% 0 #eee; }

.button-black, .button-black { background: url("../images/button-shadow.png") repeat-x scroll 50% 0 #333; }

.button-red, .button-red:visited, .button-brown, .button-brown:visited, .button-green, .button-green:visited, .button-blue, .button-blue:visited, .button-pink, .button-pink:visited, .button-white, .button-white:visited, .button-black, .button-black:visited { color: #fff; border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; box-shadow: 0px 1px 0 rgba(0, 0, 0, 0.7), inset 0px 1px 0px rgba(255, 255, 255, 0.4); -webkit-box-shadow: 0px 1px 0 rgba(0, 0, 0, 0.7), inset 0px 1px 0px rgba(255, 255, 255, 0.4); -moz-box-shadow: 0px 1px 0 rgba(0, 0, 0, 0.7), inset 0px 1px 0px rgba(255, 255, 255, 0.4); display: inline-block; font-size: 14px; font-family: 'OpenSansRegular', Arial; padding: 10px 15px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); text-transform: uppercase; behavior: url(js/PIE.htc); }

.button-white, .button-white:visited { color: #333; text-shadow: 0 1px 1px #eee; }

.button-red:hover, .button-brown:hover, .button-green:hover, .button-blue:hover, .button-pink:hover, .button-white:hover, .button-black:hover { background: url("../images/button-shadow.png") repeat-x scroll 50% -42px #444; color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; display: inline-block; text-shadow: 0 1px 1px #000; behavior: url(js/PIE.htc); }
 .button-red:active,  .button-brown:active, .button-green:active, .button-blue:active, .button-pink:active, .button-white:active, .button-black:active, {
background: #000;
}

.button-border { background-color: rgba(0, 0, 0, 0.1); margin: 0 5px 0 5px; padding: 5px 5px 6px 5px; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; display: inline-block; behavior: url(js/PIE.htc); }

.button-radius-50 { border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; behavior: url(js/PIE.htc); }

.button-small { font-size: 12px; margin-bottom: 20px; padding: 3px 10px; text-transform: lowercase; }
.button-small:hover { background: url("../images/button-shadow.png") repeat-x scroll 50% -82px #F3F3F3; color: #333333; text-shadow: 0 1px #FFFFFF; }


/*=========================================================================
Pagination
========================================================================= */

.pagination { height: 36px; }

.pagination ul { display: inline-block; *display: inline;
margin-bottom: 0; margin-left: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; *zoom: 1;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); behavior: url(js/PIE.htc); }

.pagination li { display: inline; }

.pagination a { float: left; padding: 0 14px; line-height: 34px; text-decoration: none; border: 1px solid #ddd; border-left-width: 0; }

.pagination a:hover, .pagination .active a { background-color: #eee; }

.pagination .active a { color: #888; cursor: default; }

.pagination .disabled span, .pagination .disabled a, .pagination .disabled a:hover { color: #888; cursor: default; background-color: transparent; }

.pagination li:first-child a { border-left-width: 1px; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; behavior: url(js/PIE.htc); }

.pagination li:last-child a { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; behavior: url(js/PIE.htc); }

.pagination-centered { text-align: center; }

.pagination-right { text-align: right; }



/*=========================================================================
Progress Bar
========================================================================= */

@-webkit-keyframes 
progress-bar-stripes { from {
 background-position: 40px 0;
}

to { background-position: 0 0; }
}
 @-moz-keyframes 
progress-bar-stripes { from {
 background-position: 40px 0;
}

to { background-position: 0 0; }
}
 @-ms-keyframes 
progress-bar-stripes { from {
 background-position: 40px 0;
}

to { background-position: 0 0; }
}
 @-o-keyframes 
progress-bar-stripes { from {
 background-position: 0 0;
}

to { background-position: 40px 0; }
}
 @keyframes 
progress-bar-stripes { from {
 background-position: 40px 0;
}

to { background-position: 0 0; }
}

.progress { overflow: hidden; height: 18px; margin-bottom: 18px; background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: linear-gradient(top, #f5f5f5, #f9f9f9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; behavior: url(js/PIE.htc); }

.progress .bar { width: 0%; height: 18px; color: #ffffff; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e90d2; background-image: -moz-linear-gradient(top, #149bdf, #0480be); background-image: -ms-linear-gradient(top, #149bdf, #0480be); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); background-image: linear-gradient(top, #149bdf, #0480be); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -ms-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; behavior: url(js/PIE.htc); }

.progress-striped .bar { background-color: #149bdf; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; -o-background-size: 40px 40px; background-size: 40px 40px; behavior: url(js/PIE.htc); }

.progress.active .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; behavior: url(js/PIE.htc); }

.progress-danger .bar { background-color: #dd514c; background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(top, #ee5f5b, #c43c35); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
behavior: url(js/PIE.htc); }

.progress-danger.progress-striped .bar { background-color: #ee5f5b; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); behavior: url(js/PIE.htc); }

.progress-success .bar { background-color: #5eb95e; background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -ms-linear-gradient(top, #62c462, #57a957); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(top, #62c462, #57a957); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
behavior: url(js/PIE.htc); }

.progress-success.progress-striped .bar { background-color: #62c462; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); behavior: url(js/PIE.htc); }

.progress-info .bar { background-color: #4bb1cf; background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(top, #5bc0de, #339bb9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
behavior: url(js/PIE.htc); }

.progress-info.progress-striped .bar { background-color: #5bc0de; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); behavior: url(js/PIE.htc); }

.progress-warning .bar { background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -ms-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(top, #fbb450, #f89406); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
behavior: url(js/PIE.htc); }

.progress-warning.progress-striped .bar { background-color: #fbb450; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); behavior: url(js/PIE.htc); }

/*=========================================================================
Accordion
========================================================================= */

#accordion { width:100%; }

#accordion div { background: none repeat scroll 0 0 #FFFFFF; padding:22px 22px 7px 22px; }

#accordion p { margin-bottom:15px; border:none; text-decoration:none; }

#accordion a { cursor:pointer; color: #333333; display:block; padding:10px 22px; margin-top:0; font-weight:bold; border-top:1px solid #E9E9EA; border-bottom:1px solid #D9D9DA; background: #E9E9EA; text-shadow: 0 1px 1px #FFFFFF; }

#accordion a:hover { color:#FFFFFF; background: #4A5151; text-shadow: 0 1px 1px #333333; behavior: url(js/PIE.htc); }

#accordion a.selected { color:#FFFFFF; background: #4A5151; background: -moz-linear-gradient(top, #4A5151 0%, #373E3E 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4A5151), color-stop(100%, #373E3E)); background: -webkit-linear-gradient(top, #4A5151 0%, #373E3E 100%); background: -o-linear-gradient(top, #4A5151 0%, #373E3E 100%); background: -ms-linear-gradient(top, #4A5151 0%, #373E3E 100%); background: linear-gradient(top, #4A5151 0%, #373E3E 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4A5151', endColorstr='#373E3E', GradientType=0 );
text-shadow: 0 1px 1px #333333; behavior: url(js/PIE.htc); }

/*=========================================================================
TABS
========================================================================= */

.tabs { padding:30px; height:auto!important; position:relative; border-bottom: 1px solid #567f1f; }

.tab-menu { margin: 0; padding: 0; float: left; list-style: none; height: 40px; border-bottom: 1px solid #E9E9EA; width: 100% !important; }

.tab-menu li { float: left; margin:0 1px 0 0 !important; padding:0; line-height: 31px; border-top: 1px solid #E9E9EA; border-right: 1px solid #E9E9EA; border-left: 1px solid #E9E9EA; border-bottom: 1px solid #fff; margin-bottom: -1px; overflow: hidden; position: relative; background: none repeat scroll 0 0 #f3f3f3; width: auto !important; }

.tab-menu li a { text-decoration: none; color: #333; display: block; font-size:12px; font-weight:bold; padding:4px 15px 4px 15px; outline: none; text-shadow:0 1px 1px #fff; }

.tab-menu li a:hover { background: none repeat scroll 0 0 #e7e7e7; }

html .tab-menu li.active, html .tab-menu li.active a:hover { background: none repeat scroll 0 0 #fff; width: auto; }

/*TAB CONTAINER*/
.tab-container { border:1px solid #E9E9EA; border-top: none; overflow: hidden; clear:both; float: left; width:99.7%; margin-bottom:30px; background: none repeat scroll 0 0 #FFFFFF; }

.tab-content { padding:22px 22px 7px 22px; position:relative; }

.tab-container-two { border:1px solid #E9E9EA; border-top: none; overflow: hidden; clear:both; float: left; width:442px; margin-bottom: 0; background: none repeat scroll 0 0 #fff; }

.tab-content-img1 { background: none repeat scroll 0 0 #fff; border: 1px solid #E9E9EA; padding: 4px; margin: 4px 10px 10px 0; float: left; }

.tab-content-img2 { background: none repeat scroll 0 0 #fff; border: 1px solid #F3F3F3; padding: 4px; margin: 4px 0 10px 10px; float: right; }

/*=========================================================================
Price Start
========================================================================= */

.price-table-two .price-column { width: 50%; }

.price-table-three .price-column { width: 33%; }

.price-table-four .price-column { width: 25%; }

.price-table-five .price-column { width: 20%; }

.price-table { overflow: hidden; }

.price-column { float: left; margin: 10px 0; }

.price-column strong, strong a { font-size: 12px; font-family: 'OpenSansBold',Arial; line-height: 22px; }

.price-column ul li, .price-column h4 { text-align: center; }

.price-column .first { background-color: rgba(0, 0, 0, 0.03); margin: 0 0 0; padding-bottom: 17px; }

.price-column ul { list-style-type: none; margin: 0; }

.price-column .last { background: none repeat scroll 0 0 transparent; padding: 17px 10px 17px 10px; }

.price-column ul li { background: url("../images/price-list.png") repeat-x scroll 0 100% transparent; color: #666666; padding: 10px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); }

.price-column h4 { border-bottom: 0 none; font-size: 18px; line-height: 36px; margin: 0; padding: 0; text-transform: uppercase; }

.price-column-featured h4 { font-size: 26px; line-height: 46px; }

.price-column-featured ul { padding-bottom: 11px; }

.price-column-first h4, .price-column-first { border-radius: 3px 0 0 0; -moz-border-radius: 3px 0 0 0; -webkit-border-radius: 3px 0 0 0; behavior: url(js/PIE.htc); }

.price-column-first { border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; behavior: url(js/PIE.htc); }

.price-column-last h4, .price-column-last { border-radius: 0 3px 0 0; -moz-border-radius: 0 3px 0 0; -webkit-border-radius: 0 3px 0 0; behavior: url(js/PIE.htc); }

.price-column-last { border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; behavior: url(js/PIE.htc); }

.price-column h4 { background-color: #1a80b3; color: #fff; }

.price-column-even h4 { background-color: #777; }

.price-column-first h4, .price-column-last h4 { background-color: #666; }

.price-column .price-tag { color: #333; text-shadow: 0 0 0; }

.price-column .button { display:inline-block; padding:8px 14px; color:#333; text-decoration:none; font-size:11px; line-height:1.2em; background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #fff, #f3f3f3); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, #fff, #f3f3f3); /* FF3.6 */ background-image: -ms-linear-gradient(top, #fff, #f3f3f3); /* IE10 */ background-image: -o-linear-gradient(top, #fff, #f3f3f3); /* Opera 11.10+ */ background-image: linear-gradient(top, #fff, #f3f3f3); font-weight:bold; font-family:Arial, Helvetica, sans-serif; box-shadow:1px 1px 2px rgba(0, 0, 0, .2); -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; behavior: url(js/PIE.htc); margin-right:5px; }

.price-column .button:hover { background:#AD2F0A; color:#fff; text-decoration:none; }

.price-column { background-color: #f0f0f0; position: relative; behavior: url(js/PIE.htc); }

.price-column-even { background-color: #f6f6f6; box-shadow: 0 0 3px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.17); behavior: url(js/PIE.htc); z-index: 3; }

.price-column li.even { color: #555555; }

.price-column-featured { background-color: #f9f9f9; margin: 0; position: relative; margin-bottom: 3px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.17); border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; behavior: url(js/PIE.htc); z-index: 9; }

.price-column-featured h4 { background-color: #AD2F0A; color: #FFFFFF; border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; behavior: url(js/PIE.htc); }

.price-tag .price-value { display: block; font-family: 'Droid Serif', Georgia, 'Times New Roman', serif; font-size: 40px; line-height: 40px; margin-bottom: 8px; }

.price-tag .big { font-size: 46px; line-height: 43px; margin-bottom: 5px; }

.price-tag .price-period { font-size: 14px; line-height: 16px; }

/*=========================================================================
Price Table
========================================================================= */

table { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3); border: 4px solid rgba(0, 0, 0, 0.3); margin-bottom: 25px; width: 99.999%; }

table tr th { background: none repeat scroll 0 0 #FDDD04; border-right: 1px solid #31530d; color: #000; font: italic 20px 'georgia' !important; margin: 0; padding: 6px 0px; text-align: left; text-shadow: 0 1px 1px #ffea59; text-align: center; vertical-align: middle; }

table tr td { border-bottom: 1px solid #31530d; border-right: 1px solid #31530d; padding: 6px 6px; vertical-align: middle; }

table tr td img { vertical-align: middle; }

table tr th { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); color: #FFFFFF; font: italic 20px 'georgia' !important; margin: 0; text-shadow: 0 1px 1px #6A93AD; text-align: center; vertical-align: middle; }

table tr td { color: #fff; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); border-right: 1px dashed rgba(255, 255, 255, 0.1); }

table tr { height: 60px; }

td.rates { font: italic 20px 'georgia' !important; margin: 0; text-align: center; }

a.table-button:link, a.table-button:visited { padding: 6px !important; }

table .text { font-size: 12px; text-transform: uppercase; color: #FFFF92; font-family: 'OpenSansBold'; font-weight: normal; text-shadow: 0 1px 1px #fff; }

.tr-none-1 { display: none; }

table.table-red { background: none repeat scroll 0 0 #D82B31; }

table.table-green { background: none repeat scroll 0 0 #51A351; }

table.table-blue { background: none repeat scroll 0 0 #3D5B99; }

table.table-black { background: none repeat scroll 0 0 #777; }

/*=========================================================================
Price List
========================================================================= */
.price-list-1 { padding:0 0 20px 1px; }

.price-list-1 li { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05); color: #EB4D3A; font-size: 13px; font-weight: bold; line-height: 17px; margin: 1px 0; overflow: hidden; padding: 10px 0; vertical-align: top; width: 100%; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; behavior: url(js/PIE.htc) }

.price-list-1 li:hover { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3); }

.price-list-1 li span { float: right; color: #EB4D3A; padding-right: 30px; }

.price-list-1 li a { background: url("images/arrow.png") no-repeat scroll 10px 5px transparent; float: left; padding-left: 30px; text-decoration: none; color: #777; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; behavior: url(js/PIE.htc); }

.price-list-1 li a:hover, .price-list-1 li:hover a { color:#EB4D3A; }

 @media only screen and (min-width: 768px) and (max-width: 959px) {
 
}

 @media only screen and (max-width: 767px) {
 
}

@media only screen and (min-width: 480px) and (max-width: 767px) {

}