PageRenderTime 58ms CodeModel.GetById 28ms RepoModel.GetById 1ms app.codeStats 0ms

/sites/all/themes/contrib/genesis/genesis_SUBTHEME/css/page.css

https://github.com/dibyasakti/ragnousa
CSS | 587 lines | 229 code | 104 blank | 254 comment | 0 complexity | 0b2eb6f071115c97038178e86676c40c MD5 | raw file
  1. /* $Id: page.css,v 1.1.2.28 2009/06/12 15:44:26 jmburnz Exp $ */
  2. /**
  3. * @file page.css
  4. * This stylesheet provides the page main styles for this theme.
  5. */
  6. /**
  7. * Remove unused styles for performace.
  8. */
  9. /**********************************************************
  10. * Section, Page and Body Classes
  11. **********************************************************/
  12. /**
  13. * Normally you will use these in combination with other
  14. * selectors. I include them here for completedness.
  15. */
  16. /**
  17. * Section Class
  18. * The section class takes the 2nd part of the URL and
  19. * builds a section-[arg] class from it. If you emulate
  20. * site sections using the Pathauto module this can be a
  21. * powerful way to style site sections.
  22. *
  23. * Look in body element for the section you want to style
  24. * to find the class to replace section-[arg]:
  25. */
  26. /* .section-arg {} */
  27. /* Front or not front. */
  28. .front {}
  29. .not-front {}
  30. /* Is the user logged in. */
  31. .logged-in {}
  32. .not-logged-in {}
  33. /* Node type body classes. */
  34. .node-type-book {}
  35. .node-type-blog {}
  36. .node-type-forum {}
  37. .node-type-page {}
  38. .node-type-poll {}
  39. .node-type-story {}
  40. /**
  41. * Warning!
  42. * The sidebar body classes are integral to how genesis
  43. * applies the layout - do not add margin, padding, borders,
  44. * or positioning styles to these classes! @see layout.css.
  45. */
  46. .one-sidebar {}
  47. .two-sidebars {}
  48. .sidebar-right {}
  49. .sidebar-left {}
  50. /**
  51. * Optional Region body classes
  52. * When any of the following regions are active a body class can be set.
  53. * To use you need to uncomment the conditional statements in
  54. * genesis_preprocess_page(), @see template.php.
  55. */
  56. /*
  57. .leaderboard {}
  58. .header-blocks {}
  59. .secondary-content {}
  60. .tertiary-content {}
  61. .footer {}
  62. */
  63. /**
  64. * Page Path Class
  65. * The page path class takes the entire URL and builds a page-[path]
  66. * class from it. See examplebelow. You need to use Firebug or view
  67. * source to find out what the actual class will be, and be aware
  68. * that this will change if your URL alias changes!
  69. *
  70. * Replace [example-node-path] with the path you want
  71. * to style.
  72. */
  73. /* .page-example-node-path {} */
  74. /**********************************************************
  75. * The wrapper divs
  76. * Be careful how you modify these, see layout.css
  77. **********************************************************/
  78. /**
  79. * Width Setting
  80. *
  81. * Genesis supports Elastic, Fluid and Fixed width values.
  82. * Elastic layouts are dynamic and will expand or contract when
  83. * the font size is changed. Fluid widths change when the browser
  84. * is resized and fixed width layouts stay the same width even
  85. * when the broswer is resized or the font size is changed.
  86. *
  87. * Elastic layouts use ems, e.g. 80em
  88. * Fluid layouts use percentages, e.g. 85%
  89. * Fixed widths use pixels, e.g. 960px
  90. */
  91. #container {
  92. width: 980px; /* Width for IE6 */
  93. }
  94. body > #container {
  95. width: 100%; /* Width for all other browsers */
  96. max-width: 980px; /* set a maximum width */
  97. min-width: 760px; /* set a minimum width */
  98. }
  99. /* Column wrappers */
  100. #columns {}
  101. .columns-inner {}
  102. /* Content wrappers */
  103. #content-column {}
  104. .content-inner {}
  105. /* Main content wrappers*/
  106. #main-content {}
  107. #content {}
  108. /**********************************************************
  109. * Regions
  110. **********************************************************/
  111. /* Target all regions with this low specifity selector. */
  112. .region {}
  113. .region-inner {}
  114. /**
  115. * Most regions have an .inner div to set paddings or other
  116. * design contingencies.
  117. */
  118. /* Leaderboard is a full width region at the very top,
  119. ideal for displaying banners. */
  120. #leaderboard {}
  121. /* Header blocks region is embedded in the header, floated
  122. between the logo/site_name and the search box. */
  123. #header-blocks {
  124. float: left;
  125. margin-left: 2em; /* LTR */
  126. }
  127. #header-blocks .region-inner {}
  128. /* Secondary content is a full width region between
  129. the header and the main columns. */
  130. #secondary-content {}
  131. #secondary-content .region-inner {}
  132. /* Tertiary content is a full width region above the footer,
  133. below the main content. */
  134. #tertiary-content {}
  135. #tertiary-content .region-inner {}
  136. /* Content top and bottom are above and below the main content,
  137. within the main content column. */
  138. #content-top {}
  139. #content-bottom {}
  140. /**********************************************************
  141. * Sidebars
  142. **********************************************************/
  143. /* Target both sidebars with this low specifity selector. */
  144. .sidebar {}
  145. .sidebar-inner {}
  146. /* Target a specific sidebar, inner or sidebar-inner. */
  147. #sidebar-left {}
  148. #sidebar-left .sidebar-inner {}
  149. #sidebar-right {}
  150. #sidebar-right .sidebar-inner {}
  151. /*********************************************************
  152. * GPanel Regions
  153. **********************************************************/
  154. .two-col-50 {}
  155. .two-col-50 .col-1 {}
  156. .two-col-50 .col-2 {}
  157. .two-col-50.with-nested {}
  158. #two-col-50-nested {}
  159. .two-col-50.with-nested .col-1 {}
  160. .two-col-50.with-nested .col-2 {}
  161. .two-col-50.with-nested #two-col-50-nested .col-1 {}
  162. .two-col-50.with-nested #two-col-50-nested .col-2 {}
  163. .three-col-33 {}
  164. .three-col-33 .col-1 {}
  165. .three-col-33 .col-2 {}
  166. .three-col-33 .col-3 {}
  167. .four-col-25 {}
  168. .four-col-25 .col-1 {}
  169. .four-col-25 .col-2 {}
  170. .four-col-25 .col-3 {}
  171. .four-col-25 .col-4 {}
  172. /**********************************************************
  173. * Skip navigation
  174. **********************************************************/
  175. /**
  176. * To hide the skip-nav you can use:
  177. *
  178. * height: 0;
  179. * overflow: hidden;
  180. *
  181. * Do not use display:none as this hides it from screen readers!
  182. */
  183. #skip-nav {
  184. text-align: right; /* LTR */
  185. }
  186. /* Override default pseudo class styles */
  187. #skip-nav a:link {}
  188. #skip-nav a:visited {}
  189. #skip-nav a:hover {}
  190. #skip-nav a:focus {}
  191. #skip-nav a:active {}
  192. /**
  193. * An alternative method is to position the skip-nav link offscreen
  194. * until the user tabs the link into focus. Uncomment the following to use.
  195. *
  196. * Adjust the style of the active/focused link to suit.
  197. */
  198. /*
  199. #skip-nav {
  200. text-align: left;
  201. }
  202. #skip-nav a:link,
  203. #skip-nav a:hover,
  204. #skip-nav a:visited {
  205. height: 1px;
  206. overflow: hidden;
  207. position: absolute;
  208. top: -999em;
  209. }
  210. #skip-nav a:active,
  211. #skip-nav a:focus {
  212. background: #FFF;
  213. color: #C00000;
  214. height: 1.5em;
  215. overflow: visible;
  216. position: fixed;
  217. top: 0;
  218. right: 0;
  219. width: auto;
  220. z-index: 1000;
  221. }
  222. */
  223. /**********************************************************
  224. * Header Elements
  225. **********************************************************/
  226. /* #header wraps #branding, #search-box-top and #header-blocks. */
  227. #header {}
  228. /* #branding wraps #logo, #site-name and #site-slogan. */
  229. #branding {
  230. float: left; /* LTR */
  231. }
  232. /* h1 is for the front page only, all others use the div. */
  233. #branding h1 {font-size: 1em;} /* reset h1, do not change! */
  234. /* Logo and site_name wrapper. */
  235. .logo-site-name {}
  236. div.logo-site-name {}
  237. h1.logo-site-name {}
  238. /* DIV/strong combo when when title is set. */
  239. div.logo-site-name strong {}
  240. /* Remove display:block if you want the site name inline with the logo. */
  241. .logo-site-name span {
  242. display: block;
  243. }
  244. /* Logo. */
  245. #logo {}
  246. #site-name {
  247. font-weight: bold; /* Bold or else the line heights vary. */
  248. font-size: 2em;
  249. line-height: 1.5;
  250. }
  251. /* Override default pseudo class styles. */
  252. #site-name a:link {}
  253. #site-name a:visited {}
  254. #site-name a:hover {}
  255. #site-name a:focus {}
  256. #site-name a:active {}
  257. /* Site slogan. */
  258. #site-slogan {}
  259. /**********************************************************
  260. * Search box, Advanced search form, Search results
  261. * For the search block see blocks.css
  262. **********************************************************/
  263. /**
  264. * Search box
  265. */
  266. /* Float the serch box right. */
  267. #search-box {
  268. float: right; /* LTR */
  269. }
  270. /* Reset form element margins. */
  271. #search-theme-form {
  272. margin: 1.5em 0;
  273. }
  274. /* Use the child selector because the inner div has no class. */
  275. #search-theme-form > div {}
  276. /* #search and .container-inline apply to the same div. */
  277. #search-theme-form #search {}
  278. #search-theme-form .container-inline {}
  279. #search-theme-form label {}
  280. #search-theme-form input {}
  281. #search-theme-form .form-item {}
  282. #search-theme-form .form-submit {}
  283. #edit-search-theme-form-1 {}
  284. /* Override forms.css focus style */
  285. #edit-search-theme-form-1:hover,
  286. #edit-search-theme-form-1:focus {}
  287. /**
  288. * Advanced search form
  289. */
  290. /* Advanced search-form id. */
  291. #search-form {}
  292. /* Use the child selector because the inner div has no class. */
  293. #search-form > div {}
  294. #search-form .container-inline {}
  295. #search-form #edit-keys-wrapper {}
  296. #search-form label {}
  297. #search-form input {}
  298. #search-form .form-item {}
  299. #search-form .form-submit {}
  300. /* Override forms.css text field focus style. */
  301. #search-form #edit-keys-wrapper input:hover,
  302. #search-form #edit-keys-wrapper input:focus {}
  303. /* Advanced search fieldset. */
  304. fieldset #search-advanced {}
  305. /**
  306. * Search results
  307. */
  308. /* Box styles for the results page. */
  309. .section-search .box {}
  310. .section-search .box-inner {}
  311. .section-search .box-title {}
  312. /* Style the no results messages. */
  313. .section-search .box ul {}
  314. .section-search .box ul li {}
  315. /* Search results document list. */
  316. dl.search-results {}
  317. dl.search-results dt {}
  318. dl.search-results dd {}
  319. dl.search-results dd p {}
  320. dl.search-results dd .search-snippet {}
  321. dl.search-results dd .search-info {}
  322. /**********************************************************
  323. * Primary & Secondary Links
  324. **********************************************************/
  325. /**
  326. * Implimentation of Primary and Secondary Links.
  327. *
  328. * Primary & Secondary Links are colored by default so you
  329. * can easily identify them.
  330. */
  331. /**
  332. * #nav is the containing div for Primary & Secondary Links.
  333. */
  334. #nav {
  335. margin: 0.75em 0;
  336. }
  337. /**
  338. * Primary Links Positioning
  339. */
  340. /* FLOAT PRIMARY RIGHT */
  341. /* #primary .primary-inner {float: right;} */
  342. /* ALIGN PRIMARY CENTER */
  343. /* #primary .primary-inner {display: table; margin: 0 auto; text-align: center;} */
  344. /**
  345. * Primary Links Style
  346. * Example styles to get you started.
  347. */
  348. #primary {}
  349. #nav .primary-links {
  350. background: #DDD; /* Default gray for dev only. */
  351. font-weight: bold;
  352. margin: 0;
  353. padding: 0;
  354. }
  355. /* Modify the margin to set tab spacings. */
  356. #nav .primary-links li {
  357. display: inline;
  358. line-height: 2;
  359. list-style: none;
  360. margin: 0 1em;
  361. padding: 0;
  362. }
  363. #nav .primary-links li a {
  364. text-decoration: none;
  365. white-space: nowrap;
  366. }
  367. /* Set pseudo class styles. */
  368. #nav .primary-links li a:hover {}
  369. #nav .primary-links li a:focus {}
  370. #nav .primary-links li a:active {}
  371. #nav .primary-links li a:visited {}
  372. /* Primary first and last classes. */
  373. #nav .primary-links li.first {}
  374. #nav .primary-links li.last {}
  375. /* Active trail classes. */
  376. #nav .primary-links li.active {}
  377. #nav .primary-links li.active-trail {}
  378. #nav .primary-links li.active-trail a {}
  379. /**
  380. * Secondary Links Positioning
  381. */
  382. /* FLOAT SECONDARY RIGHT */
  383. /* #secondary .secondary-inner {float: right;} */
  384. /* ALIGN SECONDARY CENTER */
  385. /* #secondary .secondary-inner {display: table; margin: 0 auto; text-align: center;} */
  386. /**
  387. * Secondary Links Style
  388. */
  389. #secondary {}
  390. #nav .secondary-links {
  391. background: #EEE; /* Default gray for dev only. */
  392. font-weight: bold;
  393. margin: 0;
  394. padding: 0;
  395. }
  396. /* Modify the margin to set tab spacings. */
  397. #nav .secondary-links li {
  398. display: inline;
  399. line-height: 2;
  400. list-style: none;
  401. margin: 0 1em;
  402. padding: 0;
  403. }
  404. #nav .secondary-links li a {
  405. text-decoration: none;
  406. white-space: nowrap;
  407. }
  408. /* Set pseudo class styles. */
  409. #nav .secondary-links li a:hover {}
  410. #nav .secondary-links li a:focus {}
  411. #nav .secondary-links li a:active {}
  412. #nav .secondary-links li a:visited {}
  413. /* Secondary first and last classes. */
  414. #nav .secondary-links li.first {}
  415. #nav .secondary-links li.last {}
  416. /* Active trail classes. */
  417. #nav .secondary-links li.active {}
  418. #nav .secondary-links li.active-trail {}
  419. #nav .secondary-links li.active-trail a {}
  420. /**********************************************************
  421. * Breadcrumb
  422. **********************************************************/
  423. /**
  424. * Genesis places the breadcrumb directly below the header,
  425. * giving it the full width of theme to expand into.
  426. * You can eaisly drag the breadcrumb html to the main
  427. * content column if you need to.
  428. */
  429. #breadcrumb {
  430. padding: 0 0 0.75em;
  431. }
  432. /**********************************************************
  433. * Mission
  434. **********************************************************/
  435. #mission {
  436. font-weight: bold;
  437. margin: 0 0 1.5em;
  438. }
  439. /**********************************************************
  440. * H1 Page Title
  441. **********************************************************/
  442. /* The main title on each page. */
  443. h1#page-title {}
  444. /**********************************************************
  445. * Pager
  446. **********************************************************/
  447. /* The first 2 classes provide the base pager styles. */
  448. .item-list ul.pager {}
  449. .item-list ul.pager li {
  450. margin: 0;
  451. }
  452. /* Theme the various states of pager links. */
  453. .item-list ul.pager li a:link {}
  454. .item-list ul.pager li a:visited {}
  455. .item-list ul.pager li a:hover {}
  456. /* Note: .pager-current is for the current page. */
  457. .item-list ul.pager li.pager-item {}
  458. .item-list ul.pager li.first {}
  459. .item-list ul.pager li.last {}
  460. .item-list ul.pager li.pager-current {}
  461. .item-list ul.pager li.pager-first {}
  462. .item-list ul.pager li.pager-previous {}
  463. .item-list ul.pager li.pager-next {}
  464. .item-list ul.pager li.pager-last {}
  465. /**********************************************************
  466. * Footer, Footer Message
  467. **********************************************************/
  468. #foot-wrapper {
  469. margin: 0.375em 0;
  470. }
  471. #footer {}
  472. #footer .region-inner {}
  473. #footer-message {}
  474. #footer a,
  475. #footer-message a {}
  476. /**********************************************************
  477. * RSS Feed Icon
  478. **********************************************************/
  479. .feed-icon {}
  480. .feed-icon img {
  481. padding:0 0.5em;
  482. }
  483. #footer-message a.feed-icon {}