/* Theme Name: Awesome Theme URI: http://www.professionalwpthemes.com/ Description: This is my theme for a tutorial. Version: 1.0 Author: Jonathan Björkskog Author URI: http://www.professionalwpthemes.com/ */ body{ font-family: Arial, Helvetica, Georgia, Sans-serif; /* Sets the font on the site to Arial, and Helvetica if user do not have arial */ font-size: 14px; /* sets the font to be 12 pixels high */ vertical-align: top; /* The top of the element is aligned with the top of the tallest element */ background:url(pics/bacground.png) repeat-x top; background-color:#f6f6f6; /* sets the background color to be light grey */ color: #333; /* sets the font color to be dark grey */ text-align:center; line-height:125%; } body, h1, h2, h3, h4, h5, h6, blockquote, p, a, ul, li { margin: 0; padding: 0; } /* sets the margins and paddings to zero for every element on the site */ h1{ font-family: Verdana, Helvetica, Sans-serif; /* sets the font for heading 1 */ font-size: 24px; /* sets the text size for heading 1 */ padding: 10px 0 10px 0; /* makes ten pixels of space in top of and under the heading */ } h2{ font-family: Verdana, Helvetica, Sans-serif; font-size: 18px; padding: 10px 0 10px 0; } h3{ font-family: Verdana, Helvetica, Sans-serif; font-size: 14px; padding: 10px 0 10px 0; } h4{ font-family: Verdana, Helvetica, Sans-serif; font-size: 13px; padding: 10px 0 10px 0; } h5{ font-family: Verdana, Helvetica, Sans-serif; font-size: 12px; padding: 10px 0 10px 0; } h6{ font-family: Verdana, Helvetica, Sans-serif; font-size: 10px; padding: 10px 0 10px 0; } a:link, a:visited{ text-decoration: none; /* deletes the underlines from the links */ color: #336699; /* sets the link colors to be blue */ } a:hover{ text-decoration: underline; /* puts a underline to the links when the mouse is over it */ color:#0C0; /* sets the link color to be green when the mouse is over it */ } p.postmetadata{ border-top: 1px solid #ccc; /* puts a line in top of postmetadata */ margin: 10px; } #wrapper{ margin: 50px auto 0 auto; /* auto on left and right margins centers the wrapper. 50px from the top */ width: 900px; /* sets the width for the wrapper to 900 pixels */ text-align: left; /* aligns the text inside the wrapper to the left side */ background-color:#fefefe; /* sets the background color of the wrapper to light grey */ border:#FFF medium solid; /* sets a medium solid white border around the wrapper */ height:auto; } .navigationlist { width:900px; /* sets width of navigationlist div to 900 pixel */ background: #69C; /* sets the background of navigationlist to blue */ float:left; /* Floats it to the left */ clear:both; /* Clears any other float that we later will make in the header */ } .navigationlist ul { padding-top: 8px; /* Sets p pixel space over the navigationlist */ padding-bottom:8px; /* Sets p pixel space under the navigationlist */ float:right; /* Float the navigationlist to the right */ } .navigationlist ul li{ display:inline; /* displays the list items besides each other instead of under each other */ font-size:18px; /* sets font size to 18 for the menu items */ padding-right: 20px; /* sets a 20 pixel space to the right of each item */ } .navigationlist ul li a{ color:#EEE; /* sets the color for the links in navigation next to white */ } #header{ float: left; width: 900px; height: 240px; background:url(pics/snowheader.jpg); } #header h1 a { color:#8fb3d1; float: right; padding-right:20px; padding-top: 160px; } #header h3 { color:#EEE; float: right; clear:right; padding-right:20px; } #container{ float: left; width: 600px; } #container h1{ margin-left:10px; } #container h2{ margin-left:10px; } #container h3{ margin-left:10px; } #container h4{ margin-left:10px; } #container h5{ margin-left:10px; } #container p{ margin-left:10px; } .sidebar{ float: right; width: 240px; background: #eeeeee; margin-left: 10px; padding-left:10px; padding-right:10px; } .sidebar ul{ list-style-type: none; } .sidebar ul li{ padding: 0px; } .sidebar ul li h2, .sidebar ul li h3{ font-family: Helvetica, Sans-serif; font-size: 14px; } table#wp-calendar{ width: 100%; /* sets the calendar in the sidebar to be wider */ } #footer{ width: 900px; background-color:#f6f6f6; clear:both; } #footer p{ line-height:18px; padding-left: 10px; } /* FOLLOWING IS FOR STYLING COMMENT-FORM AND COMMENTS: */ .comments-template{ margin: 10px 0 0; border-top: 1px solid #ccc; padding: 10px 0 0; } .comments-template ol{ margin: 0; padding: 0 0 15px; list-style: none; } .comments-template ol li{ margin: 10px 0 0; line-height: 18px; padding: 0 0 10px; border-bottom: 1px solid #ccc; } .comments-template h2, .comments-template h3{ font-family: Georgia, Sans-serif; font-size: 16px; } .commentmetadata{ font-size: 12px; } .comments-template p.nocomments{ padding: 0; } .comments-template textarea{ font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; } /* FOLLOWING IS FOR STYLING PICTURES: */ img.alignright { float: right; margin: 0 0 1em 1em; } img.alignleft { float: left; margin:0 1em 1em 0; } img.aligncenter { display: block; margin-left: auto; margin-right: auto; } a img.alignright { float:right; margin:0 0 1em 1em; } a img.alignleft { float:left; margin:0 1em 1em 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; max-width: 96%; padding-top: 5px; margin: 10px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; max-width: 100%; height: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 5px; margin: 0; } img { border: 0; max-width: 100%; height: auto; } blockquote { color: #777; margin: 15px 30px 0 20px; padding-left: 10px; border-left: 5px solid #ddd; }