/*=====
   Our third external CSS stylesheet!

   by: Sharon Tuttle
   last modified: 2016-02-19
=====*/

/*----
    give body a tasteful left and right margin
-----*/

body
{
    margin-left: 1em;
    margin-right: 1em;
}

/*=====
    note that you cannot use float to center
    block element content -

    you can do so via other means; here's a way
    that seems sound:

    *   give a width to the block element content
    *   set the block element to have:

        margin-left: auto;
        margin-right: auto;

        auto means, let the browser decide the margins;
        when you set both margin-left and margin-right
            to auto, they should be set to the same
	         size by the browser;
=====*/

/*-----
    give table-related elements a tasteful
    border and padding
-----*/

table, tr, td, th, caption
{
    border: .1em solid blue;
    padding: .25em;
}

/*-----
    center a table
-----*/

table
{
    margin-left: auto;
    margin-right: auto;
    width: 25em;
}

/*-----
    float a sidebar to the right (and give it a border,
    some padding, some margin, and a background color)
-----*/

.sidebar
{
     float: right;
     width: 15em;
     border: solid rgb(17, 53, 211);
     padding: 1em;
     margin: .5em;
     background-color: deepskyblue;
}

/*=====
    if you give an element a clear property,
    whose values might be:
        left   right   both   none
	 (default is none)

    then if that element would otherwise be
    "wrapped" around a floating element
    floating in THAT direction,
    then it will NOT be wrapped --

    "stop the float, I want to get off!"
=====*/

/*-----
    style h2 element to have a border, and to
    not wrap around a right-float
-----*/

h2
{
    border: .1em solid red;
    clear: right;
}

/*=====   
    you can carefully use float to get
    a multi-column when you have enough
    width to work with...

    when more than one element floats in the
    same direction, they "stack" horizontally --
    the first is furthest in the float direction
=====*/

/*-----
     give div and p elements a thin black border
-----*/

div, p
{
    border: 0.1em solid black;
}

/*-----
     for block elements with class="column", float
     them right with a width of 23% (might get up to
     4 columns this way, depending on document's width?)
-----*/

.column
{
    float: right;
    width: 23%;
}

/*-----
    a block element with class="aftercolumns" will
    not wrap around a previous floated element
    floating either left or right
-----*/

.aftercolumns
{
    clear: both;
}
    
/*=====
    note that a block element may have a height property
    as well as a width property...
=====*/

/*-----
    give block elements with class="box" a width, height,
    and background color
-----*/

.box
{
    width: 15em;
    height: 10em;
    background: #44accf;
}

/*=====
    there is a property position

    5 possible values:
    static  relative  absolute  fixed  inherit

    *   default value is static

        (3 consecutive block elements with position: static;
	 stack on top of each other...)
	 
        *   you cannot use offset properties
	     such as top, right, bottom, left
	         for position: static; elements

    *   position: relative;
        *   BY itself, this element still stacks;
	     BUT!! you can now use the so-called offset
	         properties:   top   right   bottom  left
=====*/

/*-----
    NOTE: had a typo in the 328lab05-2.html div with
    class="box_left" -- when I fixed that, there DEFINITELY 
    is an effect! BUT it is not the effect I expected!

    SO -- more on position property next week, I hope...!
-----*/

/*-----
    trying to experiment with position: relative
    with a left property, part 1
-----*/

.box_left
{
    position: relative;
    left: 15em;  /* push me 15em to the LEFT relative to
                    where I would be if position of static */
    width: 15em;
    height: 10em;
    background: #ee3e64;
}

/* end of 328lab05-1.css */