Advertisement
Guest User

Code CSS

a guest
Jan 31st, 2015
171
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.77 KB | None | 0 0
  1. body {
  2. background-color: #999;
  3. background-size: 100% ;
  4. background-repeat: repeat;
  5. /* background-image: url(/Images/swanon.jpg); */
  6. font-size: 87.5%;
  7. font-family:Arial, serif-sans;
  8.  
  9. }
  10.  
  11. .body {
  12. /text-align: left;/
  13.  
  14. clear: both;
  15.         margin-left: auto;
  16.         margin-right: auto;
  17.         margin-top: 5%;
  18. width: 80%;
  19. }
  20.  
  21. div {
  22. background: #1000;
  23. }
  24.  
  25.  
  26. .mainheader img {
  27. margin: 0% auto;
  28. width: 100%;
  29. height: 8%;
  30. }
  31.  
  32.  
  33. .mainheader nav {
  34. background-color: #666;
  35. height: 30px;
  36. border-radius: 5px;
  37.    -moz-border-radius: 5px;
  38.      -o-border-radius: 5px;
  39. -webkit-border-radius: 5px;
  40.  
  41. }
  42.  
  43. .mainheader nav ul {
  44. list-style: none;
  45. margin: 0 auto;
  46. }
  47.  
  48. .mainheader nav ul li {
  49. float: left;
  50. display: inline;
  51.  
  52. }
  53.  
  54. .mainheader nav a, .mainheader nav a:link, .mainheader nav a:visited {
  55. float: left;
  56. padding: 5px 5px 5px 5px;
  57. color: white;
  58. display: inline-block;
  59. height: 20px;
  60. }
  61.  
  62.  
  63. .mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link, .mainheader nav .active a:visited {
  64. background: #253;
  65.  
  66. }
  67.  
  68.  
  69.  
  70. .mainheader nav ul li a {
  71. border-radius: 2px;
  72.    -moz-border-radius: 2px;
  73.      -o-border-radius: 2px;
  74. -webkit-border-radius: 2px;
  75.  
  76. }
  77.  
  78.  
  79. .maincontent {
  80. line-height: 15px;
  81. border-radius: 2px;
  82.    -moz-border-radius: 2px;
  83.      -o-border-radius: 2px;
  84. -webkit-border-radius: 2px;
  85.  
  86. }
  87.  
  88.  
  89. .Content {
  90. background: #855; /red ---------/
  91. float: left;
  92. width: 60%;
  93. }
  94.  
  95. .topcontent {
  96. background: #777; /* grey -----------------*/
  97. float: left;
  98. width: 85%;
  99. border-radius: 2px;
  100.    -moz-border-radius: 2px;
  101.      -o-border-radius: 2px;
  102. -webkit-border-radius: 2px;
  103. padding: 1% 5%;
  104. margin-top: 2px;
  105. margin-bottom: 2px;
  106. }
  107.  
  108. .bottomcontent {
  109. background: #777;  /* grey -----------------*/
  110. float: left;
  111. width: 85%;
  112. border-radius: 2px;
  113.    -moz-border-radius: 2px;
  114.      -o-border-radius: 2px;
  115. -webkit-border-radius: 2px;
  116. padding: 1% 5%;
  117. margin-top: 2px;
  118. margin-bottom: 2px;
  119.  
  120. }
  121.  
  122.  
  123.  
  124.  
  125. .post-info {
  126.  
  127. Font-style: italic;
  128. color: #222;
  129. fon-size: 85%;
  130. }
  131.  
  132.  
  133.  
  134. .top-sidebar {
  135. border-radius: 2px;
  136.    -moz-border-radius: 2px;
  137.      -o-border-radius: 2px;
  138. -webkit-border-radius: 2px;
  139. padding: 1% 5%;
  140. margin-top: 2px;
  141. margin-bottom: 2px;
  142. margin-left: 3%;
  143. width: 27%;
  144. float: left;
  145. background-color: #255;  /* cyan -----------------*/
  146. }
  147.  
  148. .middle-sidebar {
  149. border-radius: 2px;
  150.    -moz-border-radius: 2px;
  151.      -o-border-radius: 2px;
  152. -webkit-border-radius: 2px;
  153. padding: 1% 5%;
  154. margin-top: 2px;
  155. margin-bottom: 2px;
  156. margin-left: 3%;
  157. width: 27%;
  158. float: left;
  159. background-color: #254;   /* cyan green -----------------*/
  160.  
  161. }
  162.  
  163. .bottom-sidebar {
  164. border-radius: 2px;
  165.    -moz-border-radius: 2px;
  166.      -o-border-radius: 2px;
  167. -webkit-border-radius: 2px;
  168. padding: 1% 5%;
  169. margin-top: 2px;
  170. margin-bottom: 2px;
  171. margin-left: 3%;
  172. width: 27%;
  173. float: left;
  174. background-color: #253;  /* green -----------------*/
  175.  
  176. }
  177.  
  178.  
  179. .mainfooter {
  180. margin-top: 0%;
  181. width: 100%;
  182. float: left;
  183. background-color: #666;
  184. border-radius: 2px;
  185.    -moz-border-radius: 2px;
  186.      -o-border-radius: 2px;
  187. -webkit-border-radius: 2px;
  188.  
  189.  
  190. }
  191.  
  192. .mainfooter p {
  193. text-align: center;
  194. width: 92%;
  195. padding-left: 0.8% ;
  196. padding-right: 0.2%;
  197. padding-bottom: 0;
  198. padding-top: 0;
  199.  
  200. }
  201.  
  202.  
  203.  
  204. a {
  205. text-decoration: none;
  206. }
  207.  
  208. a:link, a:visited {
  209. color: orange;
  210. }
  211.  
  212. a:hover, a:active {
  213. padding: 0 10px;
  214. color: white;
  215. background-color: black;
  216. border-radius: 15px;
  217.    -moz-border-radius: 15px;
  218.      -o-border-radius: 15px;
  219. -webkit-border-radius: 15px;
  220. }
  221.  
  222.  
  223.  
  224.  
  225.  
  226.  
  227.  
  228. @media only screen and (min-width: 150px) and (max-width: 600px), (orientation : portrait)
  229. {
  230.  
  231. .body {
  232. width: 95%;
  233. font-size: 100%;
  234. }
  235.  
  236.  
  237.  
  238. .mainheader img {
  239. width: 100%;
  240. height: 100%;
  241. }
  242.  
  243.  
  244. .mainheader nav {
  245. background-color: #FFF;
  246. height: 120px;
  247.  
  248. }
  249.  
  250.  
  251. .mainheader nav ul {
  252. padding-left: 0%;
  253. }
  254.  
  255. .mainheader nav ul li {
  256. width: 100%;
  257. margin: 0 auto;
  258. text-align: center;
  259.  
  260. }
  261.  
  262. .mainheader nav a, .mainheader nav a:link, .mainheader nav a:visited {
  263. float: none;
  264. color: Black;
  265. height: 20px;
  266. display: block;
  267. }
  268.  
  269.  
  270. .mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link, .mainheader nav .active a:visited {
  271. background: #199;  /<!--------------------------nav button color->/
  272.  
  273. }
  274.  
  275.  
  276.  
  277. .mainheader nav ul li a {  
  278.  
  279. }
  280.  
  281. .maincontent {
  282. line-height: 15px;
  283.  
  284. }
  285.  
  286.  
  287. .Content {
  288. background: #215; /blue---------/
  289. float: left;
  290. width: 100%;
  291. margin-top: 2%;
  292. }
  293.  
  294. .post-info {
  295. display: none;
  296.  
  297. }
  298.  
  299. .topcontent, .bottomcontent {
  300. background: #777; /* grey -----------------*/
  301. float: left;
  302. width: 90%;
  303. padding: 1% 5%;
  304. margin-top: 2%;
  305. margin-bottom: 2%;
  306. }
  307.  
  308.  
  309.  
  310. .top-sidebar, .middle-sidebar, .bottom-sidebar {
  311. padding: 1% 5%;
  312. margin-top: 0.5%;
  313. margin-bottom: 0.5%;
  314. margin-left: 0%;
  315. width: 90%;
  316. float: left;
  317.  
  318. }
  319.  
  320. } /media query end------------------------/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement