+/*** GENERAL ***/
body {
color: #222222;
font: 20px/1.3em Palatino,Georgia,serif;
margin: 10px;
}
-body.article {
- color: #222222;
- font: 20px/1.3em Palatino,Georgia,serif;
- background-color: #F1F1F1;
-}
a, a:hover, a:visited {
color: #000;
}
+
header {
text-align: center;
}
-#article header {
- text-align: left;
- border-bottom: 1px solid #222222;
+#main ul#links {
+ padding: 0;
+ list-style-type: none;
+ text-align: center;
}
-#article header a {
- text-decoration: none;
+#main ul#links li {
+ display: inline;
}
-#article header .vieworiginal a {
- color: #888888;
+#main ul#links li a.current {
+ -webkit-border-radius: 2px;
+ border-radius: 2px;
+ background-color: #040707;
+ color: #F1F1F1;
}
#main, #article {
margin: 0 auto;
}
-#main ul#links {
- padding: 0;
- list-style-type: none;
- text-align: center;
-}
-
-#main ul#links li {
- display: inline;
-}
-#links a, #backhome a{
+#links a, .backhome a{
text-decoration: none;
padding: 5px 10px;
}
-#links a:hover, #backhome a{
+#links a:hover, .backhome a:hover{
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #040707;
color: #F1F1F1;
}
-#main #entries {
+#content {
+ width: 800px;
+ margin: 0 auto;
+}
+
+
+footer {
+ text-align: right;
+}
+
+/*** ***/
+/*** LINKS DISPLAY ***/
+
+#main a.tool {
+ text-decoration: none;
+ cursor: pointer;
+}
+
+#main #content {
margin-top: 20px;
}
-#main #entries .entrie {
+#main .entrie {
color: rgb(46, 46, 46);
position:relative;
background-color: #ffffff;
padding: 15px;
- min-height: 6em;
+ min-height: 8em;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 2px -1px #000;
box-shadow: 0px 0px 2px -1px #000;
+ width: 30%;
+ margin: 10px;
+ float: left;
}
-#main #entries .entrie h2 a {
+#main .entrie h2 a {
text-decoration: none;
}
-#main #entries .entrie h2 a:hover {
+#main .entrie h2 a:hover {
color: #F5BE00;
}
-#main #entries .entrie .tools {
+#main .entrie .tools {
position:absolute;
bottom: 0;
width: 100%;
margin-left: -20px;
}
-#main a.tool {
+#main .entrie .tools a.tool span {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+}
+
+a.fav span {
+ background: url('../img/fav-on.png') no-repeat;
+}
+
+a.fav-off span {
+ background: url('../img/fav-off.png') no-repeat;
+}
+
+a.archive span {
+ background: url('../img/archive-on.png') no-repeat;
+}
+
+a.archive-off span {
+ background: url('../img/archive-off.png') no-repeat;
+}
+
+a.delete span {
+ background: url('../img/delete.png') no-repeat;
+}
+
+/*** ***/
+/*** ARTICLE PAGE ***/
+
+body.article {
+ color: #222222;
+ font: 20px/1.3em Palatino,Georgia,serif;
+ background-color: #F1F1F1;
+}
+
+#article header {
+ text-align: left;
+ border-bottom: 1px solid #222222;
+}
+
+#article header a {
text-decoration: none;
}
-footer {
- text-align: center;
+#article article {
+ border-bottom: 1px solid #222222;
+}
+
+.vieworiginal a {
+ color: #888888;
+ text-decoration: none;
+}
+
+/*** ***/
+#main
+{
+ max-width: 60em; /* 960 px */
+ margin: 0 auto;
+}
+ #content
+ {
+ width: 103.125%; /* 990px */
+ overflow: hidden;
+ margin-left: -1.562%; /* 15px */
+ margin-bottom: -1.875em; /* 30px */
+ }
+ .entrie
+ {
+ width: 30.303%; /* 300px */
+ float: left;
+ margin: 0 1.515% 1.875em; /* 15px 30px */
+ }
+
+@media only screen and ( max-width: 40em ) /* 640px */
+{
+ .entrie
+ {
+ width: 46.876%; /* 305px */
+ margin-bottom: 0.938em; /* 15px */
+ }
+}
+@media only screen and ( max-width: 20em ) /* 640px */
+{
+ #content
+ {
+ width: 100%;
+ margin-left: 0;
+ }
+ .entrie
+ {
+ width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ }
}
\ No newline at end of file