/********************************************************************************************* Project : rwdgrid - responsive grid system for your next project URI: http://rwdgrid.com/ Version: 1.0 Author: Vineeth G S Author URI: http://www.gsvineeth.com Github URI: https://github.com/gsvineeth/rwdgrid/ ********************************************************************************************** 1. Normalize.css 2. Grid 1200px 3. Grid 960px 4. Grid 720px 5. Grid lt 720px/ Mobile 6. Responsive Image **********************************************************************************************/ /********************************************************************************************* 1. normalize.css v2.0.1 | MIT License | git.io/normalize *********************************************************************************************/ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 8/9. */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 8/9. */ audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address variable `h1` font size within `section` and `article` contexts in * Firefox 4+, Safari 5, and Chrome. */ h1 { font-size: 2em; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Correct font family set oddly in Safari 5 and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /** * Set consistent quote types. */ q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9. */ img { border: 0; } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari 5. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /********************************************************************************************* 2. Grid 1200px *********************************************************************************************/ .container-12 { margin:0 auto; width: 1200px; } .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 { display:inline; float: left; margin-left: 5px; margin-right: 5px; } .alpha { margin-left: 0; } .omega { margin-right: 0; } .beta { margin-left: 0; margin-right: 0; } .container-12 .grid-1 { width:80px; } .container-12 .grid-2 { width:180px; } .container-12 .grid-3 { width:300px; } .container-12 .grid-4 { width:360px; } .container-12 .grid-5 { width:500px; } .container-12 .grid-6 { width:570px; } .container-12 .grid-7 { width:680px; } .container-12 .grid-8 { width:780px; } .container-12 .grid-9 { width:880px; } .container-12 .grid-10 { width:980px; } .container-12 .grid-11 { width:1080px; } .container-12 .grid-12 { width:1190px; } .container-12 .grid-25 { width:255px; float: left; margin-right: 7px; } .container-12 .grid-33 { width:286px; float: left; margin-right: 11px; } .container-12 .grid-34 { width:286px; float: left; margin-right: 11px; } .container-12 .grid-35 { width:286px; float: left; } .container-12 .grid-36 { width:300px; float: left; } .container-12 .grid-37 { width:300px; float: left; } .container-12 .grid-62 { width:625px; float: left; } /********************************************************************************************* 3. Grid 960px (mediaqueries) *********************************************************************************************/ @media only screen and (min-width: 960px) and (max-width: 1199px) { .container-12 { width: 960px; } .container-12 .grid-1 { width:60px; } .container-12 .grid-2 { width:140px; } .container-12 .grid-3 { width:280px; } .container-12 .grid-4 { width: 350px; } .container-12 .grid-5 { width:380px; } .container-12 .grid-6 { width:460px; } .container-12 .grid-7 { width:540px; } .container-12 .grid-8 { width: 580px; } .container-12 .grid-9 { width:640px; } .container-12 .grid-10 { width:780px; } .container-12 .grid-11 { width:860px; } .container-12 .grid-12 { width:940px; } .container-12 .grid-33 { margin-right: 10px; width: 315px; } .container-12 .grid-34 { margin: 0; width: 315px; } .container-12 .grid-35 { display: none; } .container-12 .grid-62 { margin-left: 40px; } #timer { font-size: 13px; margin-right: -40px; } .tm ul li { float: left; display: block; padding: 13px 15px;} .btn { font-size: 15px; } .bc_title { font-size: 16px; } .f-text-load { height: 100%; } .searchBar { display: none; } .short3 { width: 90%; } .tabs-list ul.tabs { width: 180px; } .tabs-list ul.tabs li { font-size: 13px; padding: 8px 8px; } .tabs-list .img { width: 180px; } .coment { width: 90%; } .mslider { width: 650px; height: 300px; } .short4 h2 { font-size: 14px; } .short5 { margin: 10px; } .media_960 { display: block; } .media_960_hide, .green, .grid-36, .grid-37, .banner_235, .banner_300 { display: none; } } /********************************************************************************************* 4. Grid 720px (mediaqueries) *********************************************************************************************/ @media only screen and (min-width: 720px) and (max-width: 959px) { .container-12 { width: 720px; } .container-12 .grid-1 { width:40px; } .container-12 .grid-2 { width:100px; } .container-12 .grid-3 { width:280px; } .container-12 .grid-4 { width:350px; } .container-12 .grid-5 { width:400px; } .container-12 .grid-6 { width:340px; position: relative; } .container-12 .grid-7 { width:400px; } .container-12 .grid-8 { width:460px; } .container-12 .grid-9 { width:700px; } .grid-9 .grid-33 { width: 345px; margin-right: 10px; } .grid-9 .grid-34 { width: 345px; margin: 0 } .grid-9 .grid-35 { display:none; } .container-12 .grid-10 { width:580px; } .container-12 .grid-11 { width:640px; } .container-12 .grid-12 { width:700px; position: relative; } .container-12 .grid-25 { width: 240px; } .container-12 .grid-62 { width: 470px; float: right; } .purple { width: 100px; font-size: 14px; } #timer { font-size: 13px; position: absolute; right: -150px; top: 0; } .short5 { width: 25%; height: 100%; } .multi-content, .short5 h2 { margin-left: 10px; } .mslider { width: 420px; } .counters, .line, .icon-load, .green, .grid-36, .grid-37 { display: none; } .tabs2 li, .tabs2 li.current { font-size: 8px; } .banner_footer { height: 100%; margin: 15px 0; } #footer { height: 100%; } .f-text-load { height: 100%; } .tabs-list ul.tabs { width: 180px; } .tabs-list ul.tabs li { font-size: 13px; padding: 8px 8px; } .tabs-list .img { width: 200px; } .logo { padding-bottom: 10px; } .socgroup { position: absolute; top: 80px; right: -35px; z-index: 1; } .coment { width: 75%; } .coment-area { width: 90%; } .com-nav { clear: both; float: left; } .com-nav span { font-size: 13px; } .short3 { width: 95%; height: auto; } .short3 .img { max-width: 120px; } .sliderContent, .hotnews { max-height: 220px; } .green { font-size: 14px; } .media_720 { display: block; } .media_720_hide, .dropdown, .soc_vidgets { display: none; } } /********************************************************************************************* 5. Grid lt 720px / Mobile (mediaqueries) *********************************************************************************************/ @media only screen and (max-width: 719px) { .container-12, .container-16 { width: 90%; } .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 { width:100%; margin-left: 0px; margin-right: 0px; } .alpha { margin-left: 0; } .omega { margin-right: 0; } .beta { margin-left: 0; margin-right: 0; } .container-16 .grid-1, .container-16 .grid-2, .container-16 .grid-3, .container-16 .grid-4, .container-16 .grid-5, .container-16 .grid-6, .container-16 .grid-7, .container-16 .grid-8, .container-16 .grid-9, .container-16 .grid-10, .container-16 .grid-11, .container-16 .grid-12, .container-16 .grid-13, .container-16 .grid-14, .container-16 .grid-15, .container-16 .grid-16, .container-12 .grid-1, .container-12 .grid-2, .container-12 .grid-3, .container-12 .grid-4, .container-12 .grid-5, .container-12 .grid-6, .container-12 .grid-7, .container-12 .grid-8, .container-12 .grid-9, .container-12 .grid-10, .container-12 .grid-11, .container-12 .grid-12, .container-12 .grid-33, .container-12 .grid-34, .container-12 .grid-35, .container-12 .grid-62, .container-12 .grid-25, .container-12 .grid-36, .container-12 .grid-37 { width:100%; } .short-up { height: 190px; width: 30% !important; } .tabs2 li, .tabs2 li.current { font-size: 10px; } #tm_wrap { top: 230px; } a#pull2 { background: url('../images/nav-icon2.png') no-repeat; top: 204px !important; position: absolute; left: 10px; z-index: 999 !important; } .logo { float: left; margin: 20px auto 0 auto; } .logo-text { font-size: 14px; } #timer { text-align: center; position: relative; width: 100%; padding: 10px 0 20px 0; margin: 0; } .grid-6 { position: relative; } .mess-next { font-size: 14px; width: 100%; text-align: center; } .socgroup { z-index: 1; text-align: center; float: none; margin: 0 0 70px 0; } .banner_footer { height: 100%; margin: 0 0 15px 0; } .socgroup a { text-align: center; display: inline-block; float: none; } .searchBar { /*display: none;*/ } .media_search { top: 156px !important; position: absolute; right: 0; z-index: 999; } .btn-camp { top: 5px; } #btn-load-more { display: none; } .coment { width: 90%; } .coment-area { width: 80%; } .com-nav { float: left; clear: both; } .story-short { width: 33.333%; } .short5 { width: 33.333% !important; height: 225px; } .f-text-load { height: 100%; } .bc_title { font-size: 12px; } .mess-text { font-size: 12px; margin-top: 5px; } .logo { margin: 20px auto; } .soc_vidgets, .dropdown, .counters, .text-down, .tabs2 { display: none; } .btn-group { float: none; text-align: center; width: 100%; } .shortcat { width: 100%; } #footer { height: 100%; } #navi { margin: 25px 15px; } .tabs-list ul.tabs { width: 100%; float: right; z-index: 10; } .tabs-list .img { max-width: 100%; z-index: 100; float: left; margin: 0; margin-bottom: 5px; } .tabs-list .box { float: left; width: 100%; } .tabs-list ul.tabs li { font-size: 14px; padding: 12px 12px; } #counters { clear: both; margin: 20px 0; float: left; } .world { width: 33.3333%; float: left; } .bc_tit, .doubleli { margin: 0; text-align: center; } .mslider, .hotnews { max-height: 300px; } .media_719 { display: block; } .media_719_hide { display: none; } .media_719 .banner_728 { margin: 0; } .soc_title { width: 248px; } .bc_media { width: 278px; } } @media only screen and (max-width: 480px) { .mslider, .sliderContent, .hotnews, .btn-cat { display: none; } .bc_title{ font-size: 16px; } .green { font-size: 16px; } .short5 .img { max-width: 120px; } .ava-com { width: 45px; height: 45px; } .coment { margin: 5px; } .comments_area { padding: 5px; } .coment-area { margin-left: 60px; } .date { display: none; } .author a { padding-right: 5px; } .media-date { display: block; font-size: 13px; color: #9b9b9b; } .com-nav, .com-nav a { float: left; } .com-nav span { font-size: 11px; } .searchBar { width: 123px; } .s-field { width: 100px; } } @media only screen and (max-width: 540px) { .logo-text { display: none; } .short5 { width: 50% !important; } } @media only screen and (max-width: 320px) { .shape, .logo-text, .searchBar, .dropdown, .btn-group { display: none; } .tabs2, .short2 .mcat { display: none; } .mess-next { width: 100%; text-align: center; } .banner_footer { height: 100%; margin: 0; } .coment-area { width: 80%; } .short-up .img { max-width: 100%; width: 250px !important; } .shortcat .img { max-width: 100%; width: 250px; height: 100%; } .media_320 { display: block; } .media_320_hide { display: none; } .left_cell { float: left; } .short5 { height: 120px; } .multimedia { padding-bottom: 10px; } .multimedia .img, .short .img { max-width: 265px !important; } .multimedia h2, .multimedia-content, .short6 h2, .multi-content { max-width: 265px !important; padding: 0 9px 9px 9px; } .multi-content a { padding: 0 90px 0 0; } .multimedia .mcat { margin-left: 100px; } #top { position: inherit; } h2 { font-size: 14px; } .mslider { width: 100%; max-height: 160px; } .mslider, .sliderContent, .hotnews { max-height:160px; } a.prev, a.next { width: 29px; height: 29px; background: url(../images/sl_arrows_small.png) no-repeat 0 0; } .hotnews h2 { font-size: 16px; } .media_hide { display: none; } .short5 h2 { font-size: 13px !important; } .ava-com { width: 30px; height: 30px; } .coment { margin: 10px; } .comments_area { padding: 5px; } .coment-area { margin-left: 40px; } .date { display: none; } .author a { padding-right: 5px; } .media-date { display: block; font-size: 13px; color: #9b9b9b; } .com-nav, .com-nav a { float: left; } .short5 { width: 50% !important; height: 230px; } .com-nav span { font-size: 11px; } .tabs2 li, .tabs2 li.current { font-size: 13px; } .story-short { width: 100%; } .f-text-load { height: 100%; } .left_cell h2 { font-size: 14px; } .soc_vidgets { display: block; } .left_cell .short-content { display: none; } #navi { margin: 25px 0; } #btn-load-more { display: none; } #newsticker_reveal { display: none !important; } .soc_title, .bc_media { width: auto; } } @media only screen and (max-width: 1199px) { .media_1199 { display: block; } .lcol_hide { display: block !important; } .media_hide, .clr-m { display: none; } #btn-load-more { display: none; } #footer, .banner_footer { height: 100%; } .short5 { width: 25%; } .btn { font-size: 16px; } .short5, .short6, .multimedia { margin: 0; max-height: none !important; float: left; } .short5 .img, .short6 .img, .multimedia .img { margin: 9px; } .short5 h2, .short6 h2 { margin: 9px 9px 9px 9px; font-size: 14px; } .short5:last-child { border: none; } .multimedia, .short6 { width: 100%; border-bottom: solid 1px #e1e1e1; } .multimedia h2 { font-size: 15px; } .multimedia .img { max-width: 120px; } .short6 .img { max-width: 120px; } .multimedia .img_ct, .short6 .img_ct { float: left; } .short6 h2, .multi-content { width: 100%; } .cat_icon { bottom: 0px; left: 0px; } .short6 .cat_icon, .multimedia .cat_icon { bottom: 9px; left: 9px; } .world h2 { font-size: 14px; margin-left: 9px; } .world .mcat li.comnum { display: none; } } /********************************************************************************************* 6. Grid lt 959px / Mobile (mediaqueries) *********************************************************************************************/ @media only screen and (max-width : 959px) { .media_959 { display: block; } .media_959_hide, .banner_235, .banner_300 { display: none; } .searchBar { display: none; } #top { position: inherit; float: right; } ul#top_menu { display: none; } .bc_camp { text-align: center; } .tm ul li.home { display: none !important; } a#pull { position: absolute; top: 30px; right: 50px; } a#pull, a#pull2 { background: url('../images/nav-icon.png') no-repeat; width: 20px; height: 20px; } a#pull2 { background: url('../images/nav-icon2.png') no-repeat; top: 126px; position: absolute; left: 10px; } ul#top_menu { display: none; height: auto; position: absolute; top: 55px; z-index: 2; background: #fdfdfd; border-radius: 4px; padding: 5px 15px; /* opacity: 0.9;*/ border: solid 1px #dfdfdf; right: 10px; } .tm { /* height: auto !important; margin-top: 0;*/ display: none; position: absolute; height: auto; } .tm ul { position: absolute; margin: 0; top: -1px; left: 0; background: #fff; border: solid 1px #dfdfdf; padding: 5px 25px; border-radius: 4px; } .tm ul li { float: none; border-bottom: dashed 1px #dfdfdf; padding:10px 5px; } .tm ul li.sublnk { background: url(../images/tm-arrow.png) no-repeat 97% 51%; padding: 13px 5px; position: relative; } .tm ul li.sublnk:hover { background: url(../images/tm-arrow-h.png) no-repeat 97% 51%; } .tm ul li:last-child { border-bottom: none; } ul#top_menu li { float: none; line-height: 1.5em; font-size: 15px; padding: 5px 3px; border-bottom: dashed 1px #dfdfdf; } ul#top_menu li:last-child { border: none; } ul#top_menu li a { color: #000; } #lgn_icon { margin: 0 0 0 20px; } .pm_status { width: 100%; } } /********************************************************************************************* 7. Responsive Image *********************************************************************************************/ img.scale, img.responsive { max-width: 100%; height: auto; } .row { margin-bottom: 13px; } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container-12:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a