/*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme
Author: Lieurance
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");
/*These are all taking away things*/
#site-title {
margin-right: 270px;
padding: 3.65625em 0 0;
display: none;
}
#site-title a {
color: #111111;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
display: none;
}
#site-description {
color: #7A7A7A;
font-size: 14px;
margin: 0 270px 3.65625em 0;
display: none
}
#branding #searchform {
position: absolute;
right: 7.6%;
text-align: right;
top: 3.8em;
display: none;
}
.singular .entry-title {
color: #000000;
font-size: 36px;
font-weight: bold;
line-height: 48px;
display: none;
}
/* This is where I changed the height of the header picture - it was set at automatic*/
#branding img {
height: 150px;
margin-bottom: -7px;
width: 100%;
}
/*changing the background color of whole page*/
body {
background: none repeat scroll 0 0 #000000;
}
/*this is controlling the borders for pictures in the page-posts. I do this so that the front page will look good; for individual pictures that need borders I put the following html in the edit page, or a variation. Look in the html to find the similar stuff, and add the part about the margin: 
*/
img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
border: 0;
padding: 0px;
}
/This changes the margins for pictures in posts. The order of commands seems to matter*/
.alignleft {
display: inline;
float: left;
margin-right: 0px;
}
.alignright {
display: inline;
float: right;
margin-left: 0px;
}
img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 5px;
margin-top: 0em
}
/*This changes the padding for the showcase page, where you write stuff - making the width almost the same as the header-I've commented it out for now
article.intro {
background: none repeat scroll 0 0 #F9F9F9;
border-bottom: medium none;
margin: -1.855em -8.9% 1.625em;
padding: 0;
}*/
/*I made this code to try to change the margins only in the showcase template. It seemed to work for the side margins*/
.page-template-showcase-php #content{
clear: both;
padding: 0 25px;
}
/*This changes the space between the navigation bar and the content in the showcase template. Also changes the margins on the sides of the content in the showcase page. But it was changing all the other pages so I commented it out and tried the code above that I made up. That seemed to work for the sides only on the showcase, but for the top margin all pages were still affected.
#main {
clear: both;
padding: 10px 25px;
}
*/
/*This controls the space between paragraphs. It also will alter the layout of the first page, but don't use it to do that or the text will be messed up
*/
p {
margin-bottom: 0em;
}
/*This takes away the border and the box shadow from the access bar*/
#access {
background: -moz-linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;
box-shadow: none;
clear: both;
display: block;
float: left;
margin: 0;
width: 100%;
}
/*This makes centered pictures display in a row with left and right aligned ones*/
.aligncenter {
clear: both;
display: inline;
margin-left: auto;
margin-right: auto;
}
/*This changed the margin on left-aligned pictures in the page*/
.alignleft {
display: inline;
float: left;
margin-right: 0;
}
/*This takes away the "recent posts" and the left-side widget text from the bottom of the page in the showcase template*/
.page-template-showcase-php section.recent-posts {
display: none;
float: right;
margin: 0 0 0 31%;
width: 69%;
}
/*This takes away the area at the bottom of the page that credits Wordpress.
May put it back later if I want to have room for something there, like a mailing list link*/
#site-generator {
background: none repeat scroll 0 0 #F9F9F9;
border-top: 1px solid #DDDDDD;
color: #666666;
display: none;
font-size: 12px;
line-height: 2.2em;
padding: 2.2em 0.5em;
text-align: center;
}
/*To center the middle picture, I added to the html code in the wordpress editor to add a 1px wide left margin - NOT in the style sheet.
Have to figure out how to make that permanent later----actually, later I just made a composite picture for the first page on photoshop*/
/*This makes showcase page a fixed-width page. */
#page {
clear: both;
max-width: none !important;
overflow: hidden;
padding: 0;
width: 1000px !important;
}
#primary {overflow: hidden;}
.entry-content {width: 100%; clear: both; overflow: hidden;}
.alignright{float: right;}
.alignleft{float: left;}
/*This makes the area where text would be grey instead of white; did this for picture-background*/
article.intro {
background: none repeat scroll 0 0 white;
border-bottom: medium none;
margin: -1.855em -8.9% 1.625em;
padding: 0;
}
/*This makes the borders around the pictures grey as well*/
img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
border: 1px solid #808080;
padding: 0;
}
/*This code also controls the distance between the input bar and the top picture. I suspect that I could simplify the code a bit if I play around with it, as I have used three different parameters to control this. Look into it tomorrow.
article.intro .entry-content {
color: #111111;
font-size: 16px;
padding: 2em 0 0.625em;
}
*/
/*This took away the small grey border on the top of the header area*/
#branding {
border-top: 0;
padding-bottom: 10px;
position: relative;
z-index: 9999;
}
/*this controls picture borders and padding. Right now I have it formatted so the front page looks good. To make pics inside of pages have borders, use this html in the edit page: */
img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
border: 0;
padding: 0px;
}
/*This command was originally max-width 97.5%, and I changed it so that the sidebar page looks good with the pics. Will this wreak havoc on the page if it isn't fixed-width? Maybe should re-introduce that code. */
.entry-content img, .comment-content img, .widget img {
max-width: 100%;
}
/*This made the small white margin around the body of the showcase page less obvious. It might not be the right fix: this white line seems to change depending on the size
of the browser window and the pictures - so revisit this if have problems. Here is where you found the code:
Commented out for now
.page-template-showcase-php #content, .left-sidebar.page-template-showcase-php #content {
margin: 0 75.5px;
width: auto;
}
*/
/*This changes the font class for the whole webpage. Haven't decided yet what is best*/
body, input, textarea {
color: #373737;
font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
line-height: 1.625;
}
/*This made the front picture take up the whole page.*/
img.size-full, img.size-large {
height: auto;
max-width: 100%;
width: auto;
}
.page-template-showcase-php #content, .left-sidebar.page-template-showcase-php #content {
margin-bottom: 0 !important
margin-top: -25px !important
}
/*This makes less space between the beginning of text and the menu bar at the top of the page*/
.singular.page .hentry {
padding: 5px 0 0;
}
/*This controls the text widget in the sidebar*/
.widget-title {
color: #CC0000;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
margin-top: 20px;
}
/*This makes the widget on the top of the page line up with the main contect*/
.widget {
clear: both;
margin: .9em 0 2.2em;
}
/*this changes the width of the margins, sidebar, and content. very complicated. . . to tweak one all have to be worked on. a blog called zeaks.org was helpful*/
#primary {
float: left;
margin: 0 -51.2% 0 0;
width: 100%;
}
#content {
margin: 0 27.4% 0 1%;
width: 66.6%;
}
#secondary {
float: right;
margin-right: 1%;
width: 30.4%;
}
/*this controls the testimonial widget fonts*/
.testimonialswidget_testimonial {
font-family:sans serif;
font-size: large;
}
/*this decreases space between content and menu bar in the sidebar page*/
.entry-content, .entry-summary {
padding: 0 0 0;
}
/*this also decreases the space between the content and menu bar in the sidebar page: I made it so that it was 2px instead of 14*/
.entry-title {
clear: both;
color: #222222;
font-size: 26px;
font-weight: bold;
line-height: 1.5em;
padding-bottom: 0.3em;
padding-top: 2px;
}
/*This removes bottom padding, margin, and border. Brings footer closer to content area*/
.hentry, .no-results {
border-bottom: none;
margin: 0;
padding: 0;
position: relative;
}
/*for some reason after adjusting the padding on the showcase template, the padding at the top of the sidebar template got mixed up. This fixed it. It also made the padding at the top of the showcase template very narrow, but I fixed that by putting a few after a period at the top. Not the best but it works*/
#main {
clear: both;
padding: 0;
}