/*
*
*******************************************
*
*Title: Explaining The New Blogger.
*Version: 0.2
*Last Updated: July 01,2007
*
*Pre Requisites: Basic HTML knowledge.
*
*******************************************
*
*
*Goal: To break the code of the new blogger
*for the blogskinners and bloggers alike.
*Especially the ones who is still unsure how
*to code a skin with it.
*Hopefully this will help.
*
*
*This skin is made by illusionation
*of blogskins.com.
*
*
*You can email me at illusionation [at] gmail.com
*
*
* CREDITS
* This blogskin belongs to blogger.com
* Blogger Template Style
* Simple II
* by Jason Sutter
*
*/


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
/*
*(you can ignore the above.)
*/

<head>
/*
* This would represent the HEADER section of
*your blog html.
*/

<b:include data='blog' name='all-head-content'/>


<title><data:blog.pageTitle/></title>
/*
*what you put in between the <title> and </title>
*would be the title which will show on *the top of your blogger window.
*
*By leaving it the the above, the blogger engine will
*automatically use the one you enter in your settings.
*
*/

<b:skin>
/*
*This is a compulsary tag.
*
*This is where you enter color and font
*details of your skin.
*
*/


<![CDATA[

/*
*====================
*START OF Variable definitions
*====================
*/

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">

<Variable name="textcolor" description="Text Color"
type="color" default="#000" value="#000000">

<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#000" value="#000000">

<Variable name="titlecolor" description="Post Title Color"
type="color" default="#000" value="#000000">

<Variable name="footercolor" description="Date and Footer Color"
type="color" default="#555" value="#555555">

<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">

<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999"> Used to be #969

<Variable name="bordercolor" description="Border Color"
type="color" default="#999" value="#999999">

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia,Serif;" value="normal normal 100% Georgia,Serif;">

<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal bold 200% Georgia,Serif" value="normal bold 200%
Georgia,Serif">

/*
*====================
*END OF Variable definitions
*====================
*====================
*START OF CLASSICAL CSS
*====================
*For more information about going about
*editing the below,
*Please search for tutorials on CSS.
*/

body {
margin:0;
font:$bodyfont;
background:$bgcolor;
color:$textcolor;
}

a:link {
color:$linkcolor;
text-decoration:none;
}

a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}

a:hover {
color:$titlecolor;
text-decoration:underline;
}

a img {
border-width:0;
}

#outer-wrapper {
margin: 0px 3em 0 3em;
}

h1 {
border-bottom:dotted 1px $bordercolor;
margin-bottom:0px;
color: $pagetitlecolor;
font: $pagetitlefont;
}

h1 a, h1 a:link, h1 a:visited {
color: $pagetitlecolor;
}

h2 {
margin:0px;
padding: 0px;
}

#main .widget {
padding-bottom:10px;
margin-bottom:20px;
border-bottom:dotted 1px $bordercolor;
clear: both;
}

#main .Header {
border-bottom-width: 0px;
}

h2.date-header {
padding-top:15px;
color:$footercolor;
padding-bottom:0px;
margin-bottom:0px;
font-size: 90%;
}

h3.post-title {
font-size: 140%;
color: $titlecolor;
}

.post {
padding-left:5%;
padding-right:10%;
}

.post-footer {
color:$footercolor;
}

#comments {
padding-top:30px;
color:$textcolor;
padding-bottom:0px;
margin-bottom:0px;
font-weight:bold;
}

#comments .comment-footer {
font-size:1em;
font-weight:normal;
color:$footercolor;
margin-right:10px;
display:inline;
}

.comment-author {
margin-top: 3%;
}

.comment-body {
font-size:1em;
font-weight:normal;
}

.deleted-comment {
font-style:italic;
color:gray;
}
.comment-link {
margin-left:.6em;
}
.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

.clear {
clear: both;
}

.profile-img {
float: left;
margin: 0 5px 5px 0;
}

body#layout #outer-wrapper {
margin: 0px 50px 0 50px;
}
/*
*====================
*END OF CLASSICAL CSS
*====================
*/


]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>

/*
*the above are compulsary tags.
*DO NOT remove.
*
*In a nutshell, the above represents that
*you finished HEADER part
*(the variable definition and css part of the skin).
*You will now begin doing the BODY part (Your blog
*entries, your widgets)of the blog
*
*/


/*
* This is the content of your blog.
*
* How to adjust your widgets: Template > Page Elements
*
* Widget id: the title you give to each of your widgets.
* Locked: locked would mean the things you cannot remove through the page elements page
* Title:
* Type: The type of widget you are inserting.
* *Note: The content in each of the widgets will be automatically updated through the
*page elements page. Hence, will not be hardcoded in your template. But you CAN
*hardcode it.
*
*/
<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='YOUR BLOG TITLE. (Header)'
type='Header'/>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

</b:section>
</div>
</body>
</html>