User:Nkansahrexford/mycss.css

/*from style.css*/ /* Custom Stylesheet */ body, html { height: 100%; margin: 0; -webkit-font-smoothing: antialiased; font-weight: 100; background: #aadfeb; text-align: center; font-family: helvetica; }

/* Tabs Demo 1 */ .tabs input[type=radio] { position: absolute; top: -9999px; left: -9999px; } .tabs { width: 650px; float: none; list-style: none; position: relative; padding: 0; margin: 75px auto; } .tabs li{ float: left; } .tabs label { display: block; padding: 10px 20px; border-radius: 2px 2px 0 0; color: #08C; font-size: 24px; font-weight: normal; font-family: 'Roboto', helveti; background: rgba(255,255,255,0.2); cursor: pointer; position: relative; top: 3px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tabs label:hover { background: rgba(255,255,255,0.5); top: 0; }

[id^=tab]:checked + label { background: #08C; color: white; top: 0; }

[id^=tab]:checked ~ [id^=tab-content] { display: block; } .tab-content{ z-index: 2; display: none; text-align: left; width: 100%; font-size: 20px; line-height: 140%; padding-top: 10px; background: #08C; padding: 15px; color: white; position: absolute; top: 53px; left: 0; box-sizing: border-box; -webkit-animation-duration: 0.5s; -o-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; }

/* From Default.css */ /* Default Demo Style */ @import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700);

/* HTML from Bootstrap */ .clearfix { *zoom: 1; }

.clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; }

.clearfix:after { clear: both; }

body, html { padding: 0; margin: 0; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

/* Font Icons */ @font-face { font-family: 'oxp-demo'; src: url('../fonts/oxp-demo.eot?71650457'); src: url('../fonts/oxp-demo.eot?71650457#iefix') format('embedded-opentype'), url('../fonts/oxp-demo.woff?71650457') format('woff'), url('../fonts/oxp-demo.ttf?71650457') format('truetype'), url('../fonts/oxp-demo.svg?71650457#oxp-demo') format('svg'); font-weight: normal; font-style: normal; }

[class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'oxp-demo'; margin: 0 4px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; text-align: center; }

.icon-th:before { content: '\e800'; } .icon-left:before { content: '\e803'; }

/* Main Style */ body { font-family: 'Roboto',Arial,sans-serif; color: #fff; background: #f8d135; }

a, a:visited { color: #888; text-decoration: none; }

a:hover, a:active { color: #333; }

h1, h2, h3 { font-family: 'Roboto',Arial,sans-serif; }

h1 { font-size: 2.5em; font-weight: 300; }

h2 { font-size: 1.5em; font-weight: 300; }

h3 { font-size: 1.2em; font-weight: 400; }

/* Header Style */ .container .header { margin: 0 auto; padding: 5px; text-align: center; background: rgba(0,0,0,0.01); }

.container .header span { display: block; font-size: 60%; opacity: 0.8; padding-bottom: 0.6em; }

/* To Navigation Style */ .nav-top { background: #fff; background: rgba(255, 255, 255, 0.1); text-transform: uppercase; width: 100%; font-size: 0.65em; line-height: 2.6; height: 36px; }

.nav-top a { padding: 0.41em 1em; letter-spacing: 0.1em; color: #444; display: inline-block; }

.nav-top a:hover { background: rgba(255,255,255,0.95); color: #333; }

.nav-social { float: left; padding: 0.6em 0.6em 0 0.6em; }

.nav-social span { margin-right: 0.5em; }

.nav-top span.right { float: right; }

.nav-top span.right a { float: left; display: block; }

/* Demo Buttons */ .menu { display: block; text-align: center; padding: 2em 0; margin-bottom: 3em; } .menu a { border: 4px solid rgba(255, 255, 255, 1); border-radius: 5px; background: rgba(255, 255, 255, 1); display: inline-block; font-size: 1em; line-height: 100%; margin: 0 5px; padding: 0.7em; text-decoration: none; opacity: 0.7; }

.menu a.active, .menu a:hover { opacity: 1;

}

/* Responsive */ @media screen and (max-width: 25em) { .nav-icon span { display: none; } }