You are here

styles_fbml.css in Drupal for Facebook 6.2

Same filename and directory in other branches
  1. 5.2 themes/fb_fbml/styles_fbml.css
.page-wrap {
    position: relative;
}
.page-wrap.in-new-facebook { width: 760px; }

#page-title {
  margin: 10px 0 10px 0;
}

/** Prefaces **/
#preface-first {clear; both;}

#preface .block {
  float: left;
  margin: 5px 0 0 0;
}
#preface-wrapper.prefaces-1 div.column {
  float: left;    /* LTR */
  width: 100%;
}
  
#preface-wrapper.prefaces-2 div.column {
  display: inline;
  float: left;    /* LTR */
  margin: 0 10px;
  width: 48%;
}
  
#preface-wrapper.prefaces-3 div.column {
  display: inline;
  float: left;    /* LTR */
  margin: 0 10px 0 0;
  width: 31%;
} 

/** Search **/
#search-box {
  float: right;
  clear: right;
}

#logo-title-wrapper {float: left; clear: left;}
#logo-title-wrapper h1 {float: left; clear: left;}

#slogan {
  font-size: 10px;
  display: block;
  margin: 2px 0 0 0;
}
  div.error {
  padding: 10px;
  border: solid 1px #dd3c10;
  background: #ffebe8;
  }
  div.messages {
  margin: 10px 10px 10px 10px;
  }
  div.node-teaser, div.node, .comment, .view {
  padding: 0px;
  }
  div.node-header, .comment-header {
  background-color: #f7f7f7;
  border-bottom: 1px solid #d8dfea;
  border-top: 1px solid #3b5998;
  padding: 5px 5px 5px 10px;
  overflow: hidden;
  }

  .comment-header {
  border: none;
  }

  .node-header span {
  font-size: 10px;
  display: block;
  }
  .node-header img, .comment-header img {
  float: left;
  margin: 0 10px 0 0px;
  vertical-align: middle;
  }
  .indented {padding-left: 10px;}
  .node-teaser .content, .node .content, .comment .content {
  padding: 8px 10px 0px 10px;
  font-size: 12px;
  }
  .content {
  clear: both;
  }

  .content p {
  margin: 0px 0 8px 0;
  font-size: 12px;
  }

  .node-teaser .footer, .node, .footer, .comment .footer {
  border-top: 1px solid #dddddd;
  font-size: 9px;
  margin: 0px 0 20px 0;
  padding: 5px 2px 5px 12px;
  }

  ul.links, .header .block-menu ul {
  list-style: none;
  display: inline;
  }
  
  ul.links li, .header .block-menu ul li {
  border-left: 1px solid #666666;
  float: left;
  padding: 0 5px 0 5px;
  margin: 0;
  white-space: nowrap;
  }

  ul.links li.first, .header .block-menu ul li:first-child {
  border: none;
  padding-left: 0px;
  }
  
  .header .block-menu .title { display: none;}
  .header ul.links, .header .block-menu, .header .breadcrumb {
  font-size: 10px;
  margin: 0 0 5px 0;
  }
  
  .header ul.links, .header .block-menu {
    float: right;
    vertical-align: top;
  }
  
  .header .block .content {clear: none;}
  
  .header .breadcrumb { float: left;}
  
  #canvas-header img {
    vertical-align: middle;
    margin-right: 10px;
  }

  #canvas-header {
    margin: 0 0 10px 0;
    overflow: hidden;
  }
  
  /* for IE */
  #end-canvas-header {clear: both;}

  .admin-sidebar {
  padding: 2em 0;
  background: #fdd;
  }
  
  .form_item {
  margin: 10px;
  }
  

  label {
  display: block;
  margin: 10px 0 0 0;
  }

  .form-required { color: red;}

  .form-item input.error, .form-item textarea.error, .form-item select.error {
  border: 1px solid #dd3c10;
  color: #494949;
  }

  /* emulate facebook blue buttons */
  .form-submit { 
    background-color:#3B5998;
	border-color:#D9DFEA rgb(14, 31, 91) rgb(14, 31, 91) rgb(217, 223, 234);
	border-style:solid;
	border-width:1px;
	color:#FFFFFF;
	font-size:11px;
	padding: 1px 8px;
	text-align:center;
	margin: 10px 10px 10px 0;
	}

  fieldset {
    margin: 10px 0px 0px 0;
    padding: 0px 0px 0px 0px;
  }
  fieldset.collapsible legend {
    font-weight: bold;
  }
  fieldset.collapsed {
    padding: 0px;
  }
  fieldset > div {
    margin: 10px 10px 10px 10px;
  }

  /* Give some links the facebook button look */
  a.fb_button {
    background:#526EA6 url(http://www.facebook.com/images/pandemic/white_arrow_on_blue.gif) no-repeat scroll right center;
    border-color:#145C9A rgb(14, 31, 91) rgb(14, 31, 91) rgb(20, 92, 154);
    border-style:solid;
    border-width:1px;
    color:#FFFFFF;
    font-weight:bold;
    padding:3px 24px 5px 15px;
  }
  a.fb_button:hover {
    background-color:#40578A;
    text-decoration:none;
  }

  table {
  border-collapse: collapse;  
  }

  th {
  text-align: center;
  padding: 5px 5px;
  }

  td {
  margin: 0;
  padding: 5px 10px;
  border: 1px solid #cccccc;
  }
  
  td.view-field {
  text-align: center;
  vertical-align: middle;
  padding: 2px 10px 2px 10px;
  }

  td.view-field-node-title, .fb_discussion_topic .title {
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  }
  .odd {
  background-color: #eeeeee;
  }
  
  div.view {
  clear: both;
  }

  table.fb_discussion {
  clear: both;
  margin: 10px 0 10px 0;
  }
  table.fb_discussion td{
  padding: 10px;
  }

/**
 * Sidebars and such.
 * 
 * The right sidebar styles are based on Facebook's home page.
 * .sidebar_right is the actual sidebar div.  .sidebar-right is on the
 * overall page container.  Confusing.
 */
#content-main {
  float: left;
  padding: 20px 20px 20px 20px;
  border-top: 1px solid #cccccc;
}
.with-sidebar-right #content-main {width: 436px;}
.with-sidebar-right.in-new-facebook #content-main { width: 550px; }
/* prevent form fields from being too wide. */
.with-sidebar-right #content-main input,
.with-sidebar-right #content-main textarea { max-width: 390px; }
.with-sidebar-right.in-new-facebook #content-main textarea { max-width: 504px; }

#sidebar-right {
  float: right;
  width: 170px;
  padding: 0 0 0 0;
  background-color: #f7f7f7;
  border-top: 1px solid #cccccc;
}

#sidebar-right .block .title { 
  margin: 0 5px 0 5px;
  padding: 3px 5px 4px 5px;
  background-color: #e9e9e9;
  text-align: left;
 }

#sidebar-right .block .content {
  padding: 0 0 0 10px;
  margin: 0 0 10px 0;
}

#sidebar-right .content-wrap { 
  background-color: transparent;
  background-image: url(http://www.facebook.com/images/newsfeed_line.gif);
  background-repeat: repeat-y;
  background-attachment: scroll;
  float: left;
 }

div.clear {clear: both;}

/*
 * menu styles
 * 
 */

ul.menu, .item-list ul {
  margin: 0;
  padding: 0;
}

ul.menu ul, .item-list ul ul {
  margin-left: 1em;
}

ul.menu li, .item-list ul li, li.leaf {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}

ul li.expanded {
}

ul li.collapsed {
}

ul li.leaf a, ul li.expanded a, ul li.collapsed a {
  display: block;
}

ul.inline li {
  background: none;
  margin: 0;
  padding: 0 .75em 0 .75em;
}

/* forums */
td.topics, td.posts {text-align: center;}

#forum table {clear:both;}

/* make tabs align with header and content padding */
.left_tabs {padding-left: 20px;}

/* sub-tabs */
.secondary {
 border: none;
 height: 1em;
 list-style: none;
 margin: 10px 0 10px 20px;
 }
.secondary li {
  float: left;
  margin: 0 20px 0 0px;
}
.secondary li[selected=true] {
  font-weight: bold;
}
/* pager */
.item-list ul.pager {
  width: 100%;
  padding: 0px;
  margin: 0px 0px 0px 0px;
}
.item-list ul.pager li {
  float: left;
  margin: 0px 10px 0px 0px;
}
.pager a, .pager-list strong {margin-right: 1em;}

.block-fb_devel {
  border: solid 1px #e2c822;
  background: #fff9d7;
  margin: 10px 0;
  padding: 5px;
 }

#block-fb_canvas-0 {
    display: block;
    height: 0px;
    width: 0px;
}

/* Facebook's captcha FBML */
.captcha {
    margin: 10px 0 5px 0;
}

.clearfix {
  clear: both;
}

File

themes/fb_fbml/styles_fbml.css
View source
  1. .page-wrap {
  2. position: relative;
  3. }
  4. .page-wrap.in-new-facebook { width: 760px; }
  5. #page-title {
  6. margin: 10px 0 10px 0;
  7. }
  8. /** Prefaces **/
  9. #preface-first {clear; both;}
  10. #preface .block {
  11. float: left;
  12. margin: 5px 0 0 0;
  13. }
  14. #preface-wrapper.prefaces-1 div.column {
  15. float: left; /* LTR */
  16. width: 100%;
  17. }
  18. #preface-wrapper.prefaces-2 div.column {
  19. display: inline;
  20. float: left; /* LTR */
  21. margin: 0 10px;
  22. width: 48%;
  23. }
  24. #preface-wrapper.prefaces-3 div.column {
  25. display: inline;
  26. float: left; /* LTR */
  27. margin: 0 10px 0 0;
  28. width: 31%;
  29. }
  30. /** Search **/
  31. #search-box {
  32. float: right;
  33. clear: right;
  34. }
  35. #logo-title-wrapper {float: left; clear: left;}
  36. #logo-title-wrapper h1 {float: left; clear: left;}
  37. #slogan {
  38. font-size: 10px;
  39. display: block;
  40. margin: 2px 0 0 0;
  41. }
  42. div.error {
  43. padding: 10px;
  44. border: solid 1px #dd3c10;
  45. background: #ffebe8;
  46. }
  47. div.messages {
  48. margin: 10px 10px 10px 10px;
  49. }
  50. div.node-teaser, div.node, .comment, .view {
  51. padding: 0px;
  52. }
  53. div.node-header, .comment-header {
  54. background-color: #f7f7f7;
  55. border-bottom: 1px solid #d8dfea;
  56. border-top: 1px solid #3b5998;
  57. padding: 5px 5px 5px 10px;
  58. overflow: hidden;
  59. }
  60. .comment-header {
  61. border: none;
  62. }
  63. .node-header span {
  64. font-size: 10px;
  65. display: block;
  66. }
  67. .node-header img, .comment-header img {
  68. float: left;
  69. margin: 0 10px 0 0px;
  70. vertical-align: middle;
  71. }
  72. .indented {padding-left: 10px;}
  73. .node-teaser .content, .node .content, .comment .content {
  74. padding: 8px 10px 0px 10px;
  75. font-size: 12px;
  76. }
  77. .content {
  78. clear: both;
  79. }
  80. .content p {
  81. margin: 0px 0 8px 0;
  82. font-size: 12px;
  83. }
  84. .node-teaser .footer, .node, .footer, .comment .footer {
  85. border-top: 1px solid #dddddd;
  86. font-size: 9px;
  87. margin: 0px 0 20px 0;
  88. padding: 5px 2px 5px 12px;
  89. }
  90. ul.links, .header .block-menu ul {
  91. list-style: none;
  92. display: inline;
  93. }
  94. ul.links li, .header .block-menu ul li {
  95. border-left: 1px solid #666666;
  96. float: left;
  97. padding: 0 5px 0 5px;
  98. margin: 0;
  99. white-space: nowrap;
  100. }
  101. ul.links li.first, .header .block-menu ul li:first-child {
  102. border: none;
  103. padding-left: 0px;
  104. }
  105. .header .block-menu .title { display: none;}
  106. .header ul.links, .header .block-menu, .header .breadcrumb {
  107. font-size: 10px;
  108. margin: 0 0 5px 0;
  109. }
  110. .header ul.links, .header .block-menu {
  111. float: right;
  112. vertical-align: top;
  113. }
  114. .header .block .content {clear: none;}
  115. .header .breadcrumb { float: left;}
  116. #canvas-header img {
  117. vertical-align: middle;
  118. margin-right: 10px;
  119. }
  120. #canvas-header {
  121. margin: 0 0 10px 0;
  122. overflow: hidden;
  123. }
  124. /* for IE */
  125. #end-canvas-header {clear: both;}
  126. .admin-sidebar {
  127. padding: 2em 0;
  128. background: #fdd;
  129. }
  130. .form_item {
  131. margin: 10px;
  132. }
  133. label {
  134. display: block;
  135. margin: 10px 0 0 0;
  136. }
  137. .form-required { color: red;}
  138. .form-item input.error, .form-item textarea.error, .form-item select.error {
  139. border: 1px solid #dd3c10;
  140. color: #494949;
  141. }
  142. /* emulate facebook blue buttons */
  143. .form-submit {
  144. background-color:#3B5998;
  145. border-color:#D9DFEA rgb(14, 31, 91) rgb(14, 31, 91) rgb(217, 223, 234);
  146. border-style:solid;
  147. border-width:1px;
  148. color:#FFFFFF;
  149. font-size:11px;
  150. padding: 1px 8px;
  151. text-align:center;
  152. margin: 10px 10px 10px 0;
  153. }
  154. fieldset {
  155. margin: 10px 0px 0px 0;
  156. padding: 0px 0px 0px 0px;
  157. }
  158. fieldset.collapsible legend {
  159. font-weight: bold;
  160. }
  161. fieldset.collapsed {
  162. padding: 0px;
  163. }
  164. fieldset > div {
  165. margin: 10px 10px 10px 10px;
  166. }
  167. /* Give some links the facebook button look */
  168. a.fb_button {
  169. background:#526EA6 url(http://www.facebook.com/images/pandemic/white_arrow_on_blue.gif) no-repeat scroll right center;
  170. border-color:#145C9A rgb(14, 31, 91) rgb(14, 31, 91) rgb(20, 92, 154);
  171. border-style:solid;
  172. border-width:1px;
  173. color:#FFFFFF;
  174. font-weight:bold;
  175. padding:3px 24px 5px 15px;
  176. }
  177. a.fb_button:hover {
  178. background-color:#40578A;
  179. text-decoration:none;
  180. }
  181. table {
  182. border-collapse: collapse;
  183. }
  184. th {
  185. text-align: center;
  186. padding: 5px 5px;
  187. }
  188. td {
  189. margin: 0;
  190. padding: 5px 10px;
  191. border: 1px solid #cccccc;
  192. }
  193. td.view-field {
  194. text-align: center;
  195. vertical-align: middle;
  196. padding: 2px 10px 2px 10px;
  197. }
  198. td.view-field-node-title, .fb_discussion_topic .title {
  199. text-align: left;
  200. font-size: 12px;
  201. font-weight: bold;
  202. }
  203. .odd {
  204. background-color: #eeeeee;
  205. }
  206. div.view {
  207. clear: both;
  208. }
  209. table.fb_discussion {
  210. clear: both;
  211. margin: 10px 0 10px 0;
  212. }
  213. table.fb_discussion td{
  214. padding: 10px;
  215. }
  216. /**
  217. * Sidebars and such.
  218. *
  219. * The right sidebar styles are based on Facebook's home page.
  220. * .sidebar_right is the actual sidebar div. .sidebar-right is on the
  221. * overall page container. Confusing.
  222. */
  223. #content-main {
  224. float: left;
  225. padding: 20px 20px 20px 20px;
  226. border-top: 1px solid #cccccc;
  227. }
  228. .with-sidebar-right #content-main {width: 436px;}
  229. .with-sidebar-right.in-new-facebook #content-main { width: 550px; }
  230. /* prevent form fields from being too wide. */
  231. .with-sidebar-right #content-main input,
  232. .with-sidebar-right #content-main textarea { max-width: 390px; }
  233. .with-sidebar-right.in-new-facebook #content-main textarea { max-width: 504px; }
  234. #sidebar-right {
  235. float: right;
  236. width: 170px;
  237. padding: 0 0 0 0;
  238. background-color: #f7f7f7;
  239. border-top: 1px solid #cccccc;
  240. }
  241. #sidebar-right .block .title {
  242. margin: 0 5px 0 5px;
  243. padding: 3px 5px 4px 5px;
  244. background-color: #e9e9e9;
  245. text-align: left;
  246. }
  247. #sidebar-right .block .content {
  248. padding: 0 0 0 10px;
  249. margin: 0 0 10px 0;
  250. }
  251. #sidebar-right .content-wrap {
  252. background-color: transparent;
  253. background-image: url(http://www.facebook.com/images/newsfeed_line.gif);
  254. background-repeat: repeat-y;
  255. background-attachment: scroll;
  256. float: left;
  257. }
  258. div.clear {clear: both;}
  259. /*
  260. * menu styles
  261. *
  262. */
  263. ul.menu, .item-list ul {
  264. margin: 0;
  265. padding: 0;
  266. }
  267. ul.menu ul, .item-list ul ul {
  268. margin-left: 1em;
  269. }
  270. ul.menu li, .item-list ul li, li.leaf {
  271. margin: 0;
  272. padding: 0;
  273. list-style-type: none;
  274. list-style-image: none;
  275. }
  276. ul li.expanded {
  277. }
  278. ul li.collapsed {
  279. }
  280. ul li.leaf a, ul li.expanded a, ul li.collapsed a {
  281. display: block;
  282. }
  283. ul.inline li {
  284. background: none;
  285. margin: 0;
  286. padding: 0 .75em 0 .75em;
  287. }
  288. /* forums */
  289. td.topics, td.posts {text-align: center;}
  290. #forum table {clear:both;}
  291. /* make tabs align with header and content padding */
  292. .left_tabs {padding-left: 20px;}
  293. /* sub-tabs */
  294. .secondary {
  295. border: none;
  296. height: 1em;
  297. list-style: none;
  298. margin: 10px 0 10px 20px;
  299. }
  300. .secondary li {
  301. float: left;
  302. margin: 0 20px 0 0px;
  303. }
  304. .secondary li[selected=true] {
  305. font-weight: bold;
  306. }
  307. /* pager */
  308. .item-list ul.pager {
  309. width: 100%;
  310. padding: 0px;
  311. margin: 0px 0px 0px 0px;
  312. }
  313. .item-list ul.pager li {
  314. float: left;
  315. margin: 0px 10px 0px 0px;
  316. }
  317. .pager a, .pager-list strong {margin-right: 1em;}
  318. .block-fb_devel {
  319. border: solid 1px #e2c822;
  320. background: #fff9d7;
  321. margin: 10px 0;
  322. padding: 5px;
  323. }
  324. #block-fb_canvas-0 {
  325. display: block;
  326. height: 0px;
  327. width: 0px;
  328. }
  329. /* Facebook's captcha FBML */
  330. .captcha {
  331. margin: 10px 0 5px 0;
  332. }
  333. .clearfix {
  334. clear: both;
  335. }