main.css 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
  1. @import url("//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800%7CRaleway:100,300,600,700,800");
  2. /* Scaffolding
  3. /* ------------------------- */
  4. html {
  5. position: relative;
  6. min-height: 100%;
  7. }
  8. body {
  9. background-color: #f4f4f4;;
  10. margin-bottom: 44px;
  11. line-height: 1.57142857;
  12. font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  13. }
  14. h1, h2, h3, h4, h5, h6 {
  15. font-weight: 600;
  16. }
  17. a {
  18. color: #42923e;
  19. }
  20. a:hover {
  21. color: #1a481b;
  22. text-decoration: underline;
  23. /*text-decoration: none;*/
  24. }
  25. .require {
  26. color: darkred;
  27. }
  28. .color-green {
  29. color: #42923e;
  30. }
  31. footer {
  32. position: absolute;
  33. width: 100%;
  34. padding: 10px 30px;
  35. bottom: 0px;
  36. background-color: #fff;
  37. border-top: 1px solid #e0e0e0;
  38. }
  39. .footer-icons{
  40. padding-top: 10px;
  41. margin-right: 7.5px;
  42. margin-left: 7.5px;
  43. font-size: 25pt;
  44. text-align: center;
  45. color: #999 !important;
  46. }
  47. .footer-icons:hover {
  48. padding-top: 10px;
  49. margin-right: 7.5px;
  50. margin-left: 7.5px;
  51. font-size: 25pt;
  52. text-align: center;
  53. color: #333 !important;
  54. text-decoration: none;
  55. }
  56. .fix-hover-underline a:hover {
  57. text-decoration: none;
  58. }
  59. .login-container {
  60. max-width: 400px;
  61. }
  62. /* Alerts
  63. /* ------------------------- */
  64. .alert {
  65. border-width: 0 0 0 3px;
  66. }
  67. .alert-info {
  68. border-color: #31708f;
  69. }
  70. .alert-success {
  71. color: #fff;
  72. background-color: #29b35b;
  73. border-color: #1d8141;
  74. }
  75. .alert-danger {
  76. color: #b61b17;
  77. background-color: #ffcdd2;
  78. border-color: #b61b17;
  79. }
  80. /* Navbar
  81. /* ------------------------- */
  82. .navbar-default {
  83. background-color: #fff;
  84. border-color: #c5d8c5;
  85. height: 60px;
  86. }
  87. .navbar-default .navbar-nav {
  88. color: #757575;
  89. }
  90. .navbar-default .navbar-nav > li > a {
  91. color: #262626;
  92. border-bottom: 4px solid transparent;
  93. padding-top: 17.5px;
  94. padding-bottom: 14.5px;
  95. transition: all 0.25s;
  96. height: 60px;
  97. }
  98. .navbar-default .navbar-nav > li > a:hover {
  99. background-color: transparent;
  100. border-bottom-color: rgba(0, 0, 0, .2);
  101. }
  102. .navbar-default .navbar-nav > li > a.navbar-avatar {
  103. padding-top: 13px;
  104. padding-bottom: 10px;
  105. }
  106. .navbar-default .navbar-nav > li > a.navbar-avatar img {
  107. border-radius: 50%;
  108. width: 30px;
  109. height: 30px;
  110. }
  111. .navbar-default .navbar-nav > li.active > a {
  112. border-bottom-color: #42923e;
  113. background-color: transparent;
  114. color: #262626;
  115. font-weight: 600;
  116. }
  117. .dropdown-menu li a {
  118. color: #333;
  119. }
  120. .dropdown-menu li a:hover {
  121. color: #42923e;
  122. text-decoration: underline;
  123. }
  124. /* Panels
  125. /* ------------------------- */
  126. .panel {
  127. border: solid 1px rgba(160, 160, 160, 0.3);
  128. box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  129. }
  130. .panel-heading {
  131. padding: 20px 30px;
  132. }
  133. .panel-heading + .panel-body {
  134. padding-top: 0;
  135. }
  136. .panel-body {
  137. padding: 30px;
  138. }
  139. .panel-body h3 {
  140. margin-top: 0;
  141. }
  142. .panel-title {
  143. font-size: 18px;
  144. color: #424242;
  145. }
  146. /* Buttons
  147. /* ------------------------- */
  148. .btn-toolbar > .btn {
  149. float: none;
  150. margin-bottom: 5px;
  151. }
  152. .btn {
  153. font-weight: 600;
  154. border-radius: 3px;
  155. }
  156. .btn:focus {
  157. outline: 0 !important;
  158. }
  159. /*
  160. .btn-default {
  161. border-color: #ccc;
  162. background: #f5f5f5 linear-gradient(to bottom, #fff, #f5f5f5);
  163. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 -1px 4px rgba(151, 159, 175, 0.2);
  164. }
  165. .btn-default:active {
  166. background: #e6e6e6 linear-gradient(to bottom, #f0f0f0, #e6e6e6);
  167. }
  168. .btn-success {
  169. border-color: #208a46;
  170. background: #29b35b linear-gradient(to bottom, #2ec866, #29b35b);
  171. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 4px rgba(32, 138, 70, 0.3);
  172. }
  173. .btn-success:active {
  174. background: #239a4e linear-gradient(to bottom, #28af59, #239a4e);
  175. }
  176. .btn-danger {
  177. border-color: #8c1512;
  178. background: #b61b17 linear-gradient(to bottom, #cc1e1a, #b61b17);
  179. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 4px rgba(140, 21, 18, 0.3);
  180. }
  181. .btn-danger:active {
  182. background: #9b1714 linear-gradient(to bottom, #b11a17, #9b1714);
  183. }*/
  184. .btn-facebook {
  185. color: #fff;
  186. border-color: #335190;
  187. background: #3b5998 linear-gradient(to bottom, #4263a9, #3b5998);
  188. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 4px rgba(59, 89, 152, 0.3);
  189. }
  190. .btn-facebook:hover,
  191. .btn-facebook:focus {
  192. color: #fff;
  193. }
  194. .btn-twitter {
  195. color: #fff;
  196. border-color: #009fdb;
  197. background: #00aced linear-gradient(to bottom, #05baff, #00aced);
  198. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 4px rgba(0, 172, 237, 0.3);
  199. }
  200. .btn-twitter:hover,
  201. .btn-twitter:focus {
  202. color: #fff;
  203. }
  204. .btn-google {
  205. color: #fff;
  206. border-color: #d54331;
  207. background: #dd4b39 linear-gradient(to bottom, #e05d4d, #dd4b39);
  208. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 4px rgba(221, 75, 57, 0.3);
  209. }
  210. .btn-google:hover,
  211. .btn-google:focus {
  212. color: #fff;
  213. }
  214. .btn-vk {
  215. color: #fff;
  216. border-color: #4f7192;
  217. background: #587ea3 linear-gradient(to bottom, #678aad, #587ea3);
  218. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 4px rgba(79, 113, 146, 0.3);
  219. }
  220. .btn-vk:hover,
  221. .btn-vk:focus {
  222. color: #fff;
  223. }
  224. .btn-github {
  225. color: #fff;
  226. border-color: #444;
  227. background: #545454 linear-gradient(to bottom, #616161, #545454);
  228. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 4px rgba(68, 68, 68, 0.3);
  229. }
  230. .btn-github:hover,
  231. .btn-github:focus {
  232. color: #fff;
  233. }
  234. .btn-cancel:hover {
  235. color: #fff;
  236. background-color: #ff4136;
  237. border-color: #ff291c;
  238. }
  239. /* Forms */
  240. /* ------------------------- */
  241. textarea {
  242. resize: none;
  243. }
  244. .form-control {
  245. height: auto;
  246. padding: 8px 12px;
  247. border: 2px solid #ebebeb;
  248. border-radius: 0;
  249. box-shadow: inset 0 1px 2px rgba(150, 160, 175, 0.1), inset 0 1px 15px rgba(150, 160, 175, 0.05);
  250. }
  251. .form-group > label {
  252. text-transform: uppercase;
  253. font-size: 13px;
  254. font-weight: 600;
  255. }
  256. .hr-title {
  257. height: auto;
  258. margin-top: 20px;
  259. border-top: 1px solid;
  260. color: #bbb;
  261. font-size: 16px;
  262. text-align: center;
  263. line-height: 20px;
  264. }
  265. .hr-title span {
  266. position: relative;
  267. padding: 2px 10px;
  268. top: -10px;
  269. background-color: #fff;
  270. border-radius: 2px;
  271. letter-spacing: 0.2em;
  272. text-transform: uppercase;
  273. }
  274. /*header*/
  275. .header {
  276. margin-top: -20px;
  277. margin-bottom: 30px;
  278. display: table;
  279. position: relative;
  280. width: 100%;
  281. height: 400px;
  282. background: url(/jenn-evelyn-ann-112980.jpg) no-repeat center scroll;
  283. -webkit-background-size: cover;
  284. -moz-background-size: cover;
  285. background-size: cover;
  286. -o-background-size: cover;
  287. }
  288. .header-text {
  289. display: table-cell;
  290. text-align: left;
  291. vertical-align: middle;
  292. margin-left: 800px;
  293. padding-left: 26.5%;
  294. padding-right: 25%;
  295. color: #fff;
  296. font-size: 22pt;
  297. }
  298. @media only screen
  299. and (max-width : 1200px) {
  300. .header-text {
  301. display: table-cell;
  302. text-align: left;
  303. vertical-align: middle;
  304. margin-left: 800px;
  305. padding-left: 100px;
  306. padding-right: 100px;
  307. color: #fff;
  308. }
  309. }
  310. @media only screen
  311. and (max-width : 750px) {
  312. .header-text {
  313. display: table-cell;
  314. text-align: left;
  315. vertical-align: middle;
  316. margin-left: 800px;
  317. padding-left: 40px;
  318. padding-right: 40px;
  319. color: #fff;
  320. }
  321. }
  322. .header-text h1 {
  323. margin: 0;
  324. padding-left: 90px;
  325. font-size: 4.5em;
  326. font-weight: 700;
  327. }
  328. .explore-profile_pic{
  329. width: 90px;
  330. border-radius: 100%;
  331. margin-right: 10px;
  332. }
  333. .div-btn-ver{
  334. text-align: right;
  335. }
  336. .explore{
  337. padding: 20px !important;
  338. }
  339. /*About page*/
  340. .about-img{
  341. width: 100%;
  342. height: auto;
  343. }
  344. .about-row{
  345. padding-top: 30px;
  346. }
  347. .about-div{
  348. text-align: center;
  349. }
  350. .about-text{
  351. font-size: 15pt;
  352. display: inline-block;
  353. vertical-align: middle;
  354. padding: 110px 5px;
  355. }
  356. @media only screen
  357. and (max-width: 1000px){
  358. .about-text{
  359. font-size: 15pt;
  360. display: inline-block;
  361. vertical-align: middle;
  362. padding: 8px 5px;
  363. }
  364. .about-img{
  365. width: 100%;
  366. height: auto;
  367. padding-top: 15px;
  368. }
  369. }
  370. @media only screen
  371. and (max-width: 1600px){
  372. .about-text{
  373. font-size: 15pt;
  374. display: inline-block;
  375. vertical-align: middle;
  376. padding: 0px 5px;
  377. }
  378. }
  379. .manifesto{
  380. margin-top: 60px;
  381. text-align: center;
  382. color: white;
  383. font-size: 15pt;
  384. text-shadow: 1px 1px 4px rgba(0,0,0,.6);
  385. padding-top: 40px;
  386. padding-bottom: 50px;
  387. padding-left: 15%;
  388. padding-right: 15%;
  389. background-image: url("/img/static/shane-rounce-236808.jpg");
  390. height: 50%;
  391. background-repeat: no-repeat;
  392. background-size: cover;
  393. }
  394. .manifesto > h1{
  395. color: white;
  396. }
  397. .about-resume{
  398. margin: 50px 5%;
  399. }
  400. .voluntariado-banner{
  401. margin-top: -20px;
  402. text-align: center;
  403. color: white;
  404. font-size: 15pt;
  405. text-shadow: 1px 1px 4px rgba(0,0,0,.6);
  406. padding-top: 100px;
  407. padding-bottom: 100px;
  408. padding-left: 15%;
  409. padding-right: 15%;
  410. background-image: url("/img/static/rebekah-howell-221666.jpg");
  411. height: 50%;
  412. background-repeat: no-repeat;
  413. background-size: cover;
  414. }
  415. .voluntariado-banner > h1{
  416. color: white;
  417. font-size: 30pt;
  418. }
  419. .divisor{
  420. margin-top: 10px;
  421. margin-bottom: 10px;
  422. text-align: center;
  423. color: #555555;
  424. font-size: 20pt;
  425. padding: 0px 15%;
  426. height: 100px;
  427. background-color: white;
  428. background-repeat: no-repeat;
  429. background-size: cover;
  430. }