* changing web page into mDictionary one (basic version)
[mdictionary] / styles / main.css
diff --git a/styles/main.css b/styles/main.css
new file mode 100644 (file)
index 0000000..9d05f84
--- /dev/null
@@ -0,0 +1,239 @@
+html, body, html *, body * {
+       padding         : 0px; 
+       margin          : 0px;
+       color           : #666;
+       font-size       : 12px;
+       text-align      : justify;
+       font-family     : Georgia, Tahoma, Arial, Helvetica, sans-serif;
+}
+
+body {
+       text-align      : center;
+       background-image: url(images/bckgnd.png);
+       background-repeat: repeat-x;
+}
+
+#webContainer {
+       display         : block;
+       width           : 750px;
+       margin-left     : auto;
+       margin-right    : auto;
+}
+
+#topBar {
+       display         : block;
+       width           : 750px;
+       height          : 130px;
+       text-align      : left;
+       background-image: url(images/topBarBckgnd.png);
+       overflow        : hidden;
+}
+
+#topBar p {
+       color           : black;
+}
+
+#topBar p.title {
+       display         : block;
+       font-size       : 48px;
+       padding-left    : 146px;
+}
+
+#topBar a.install {
+       display         : block;
+       width           : 100px;
+       float           : right;
+       border          : 0px solid black;
+       margin-top      : 20px;
+       font-family     : sans-serif;
+       font-size       : 18px;
+       font-weight     : bold;
+}
+
+#topBar p.description {
+       display         : block;
+       font-size       : 17px;
+       padding-left    : 148px;
+}
+
+#topBarLinks {
+       display         : block;
+       height          : 30px;
+}
+
+#topBarLinks a {
+       display         : block;
+       float           : left;
+       padding-top     : 5px;
+       height          : 22px;
+       padding-left    : 7px;
+       padding-right   : 7px;
+       border-bottom   : 3px solid #2936FF;
+       font-size       : 12px;
+       text-decoration : none;
+       color           : #000;
+       font-weight     : bold;
+}
+#topBarLinks a:hover {
+       border-bottom   : 3px solid #f42;
+       color           : #0D5F8D; 
+}
+
+#topBarLinks a.current {
+       border-bottom   : 3px solid #f42;
+       color           : #0D5F8D;
+}
+
+#contentContainer {
+       display         : block;
+       width           : 500px;
+       min-height      : 0px;
+       background-image: url(images/background.png);
+       background-repeat: repeat-x;
+       padding-top     : 20px;
+       padding-bottom  : 20px;
+       padding-left    : 140px;
+       overflow        : auto;
+       height          : 400px;
+}
+
+#contentContainer p {
+       display         : block;
+       text-align      : left;
+       padding-right   : 20px;
+       padding-left    : 6px;
+       padding-bottom  : 15px;
+       padding-top     : 5px;
+       text-indent     : 20px;
+}
+
+#contentContainer .centered {
+       text-align      : center; 
+}
+#contentContainer p.mails {
+       color           : #33f;
+}
+
+#contentContainer p.li {
+       display         : block;
+       border          : 1px solid red;
+}
+
+#footer {
+       display         : block;
+       padding-top     : 30px;
+       text-align      : center;
+}
+#footer p {
+       text-align      : center;
+       font-size       : 10px;
+       padding         : 0px;
+       padding-bottom  : 5px;
+}
+#footer img {
+       font-size       : 10px;
+       color           : #b22;
+}
+
+#contentContainer h1 {
+       display         : block;
+       font-size       : 16px;
+       padding-bottom  : 10px;
+       padding-top     : 20px;
+}
+
+#contentContainer a {
+       text-decoration : none;
+       color           : #55e;
+}
+#contentContainer a:hover {
+       color           : #00f;
+}
+#contentContainer div.code {
+       display         : block;
+       margin          : 10px;
+       padding         : 5px;
+       border          : 1px solid silver;
+       background-color: #f5f5f5;
+       text-align      : left;
+       white-space     : pre;
+       color           : navy;
+       font-family     : monospace;
+}
+#contentContainer span.code {
+       padding-left    : 3px;
+       padding-right   : 3px;
+       white-space     : pre;
+       color           : navy;
+       font-family     : monospace;
+}
+
+#contentContainer p.faq_question {
+       display         : block;
+       padding-top     : 20px;
+       padding-bottom  : 5px;
+       font-weight     : bold;
+       font-size       : 14px;
+       text-transform  : capitalize;
+       color           : #33f;
+}
+
+#gallery {
+       display         : block;
+       text-align      : center;
+       border          : 1px solid silver;
+       padding         : 10px;
+}
+#gallery img {
+       border          : 2px solid #000;
+       padding         : 1px;
+       margin          : 2px;
+}
+
+#gallery a:hover img {
+       border          : 2px solid #33e;
+}
+
+div.faq_switcher {
+       display         : block;
+       width           : 10px;
+       height          : 10px;
+       float           : left;
+       border          : 1px solid silver;
+       margin-right    : 6px;
+       background-image: url(images/switcher.png);
+}
+div.faq_question {
+       font-family     : Arial;
+       font-size       : 16px;
+       padding         : 8px;
+       font-weight     : bold;
+       border-left     : 2px solid #A33;
+       margin-bottom   : 4px;
+}
+div.faq_answer {
+       display         : none;
+       font-size       : 12px;
+       margin-left     : 10px;
+       font-weight     : normal;
+       border          : 1px solid silver;
+       background-color: #efefef;
+}
+
+div.faq_answer li {
+       margin-left     : 25px;
+}
+
+.image {
+       text-align      : center;
+       font-size       : 12px;
+       font-weight     : bold;
+}
+.image img {
+       display         : block;
+       width           : 440px;
+       height          : 264px;
+       margin-left     : auto;
+       margin-right    : auto;
+       padding         : 4px;
+}
\ No newline at end of file