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

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

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

body
{
    margin-left: .5em;
    margin-right: .5em;
}

/*=====
     NOTICE that you cannot use the float property
     to center a block element -- you can just float
     it left or right

     You CAN center that block element in at least
     one other way:
     *   first: give it a width property value
     *   then: give it margin-left and margin-right
         of auto

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

         *   auto: means to let the browser
	       decide the margins
         *   (and if BOTH margin-left and margin-right
	       are auto, they'll be the same amount)
=====*/

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

table, tr, td, th
{
    border: .1em solid magenta;
    padding: .5em;
}

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

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

/*=====
    the clear property can be used for a block element
    to specify that it should NOT be put next or around
    an element floated in a particular direction;
    
    possible values:
    left  right  both  none
    (none is the default)

    "stop the float, I want to get off!"

    note that you give this property to an element
    that follows another element with a float property
=====*/

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

.sidebar
{
    float: right;
    width: 15em;
    border: .1em solid purple;
    padding: 1em;
}

/*-----
    style form element to not wrap around a right-float
-----*/

form
{
    clear: right;
}

/*=====
    when more than one element floats in the same direction,
    they "stack" horizontally;

    first will be furthest in the float direction
=====*/

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

div, p
{
    border: .1em solid green;
}

/*-----
     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;
}

/*=====
    you can a height property as well as a width property
    for block elements
=====*/

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

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

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

    5 possible values:
    static  relative  absolute  fixed  inherit

    *   static is the default
    *   if consecutive block elements have
        position: static;

	 (and no float properties are involved),

	 ...they stack atop each other

    *   you cannot use offset properties such as
        top, right, bottom, left for elements
	 with position: static
=====*/

/*=====
    position: relative;

    ...if JUST have this, still get basic
    position: static behavior, one block element
    atop the next

    BUT! now the offset properties CAN be used,
    and can have an effect

    position: relative;
    left: 30em;
     
    ...now the left edge of the relatively-positioned
    element is now 30em to the left of where it would
    have been otherwise;
=====*/

/*-----
    NOTE: had a typo in the 328lab05-2.css comment
    above -- forgot to end it (!!) -- and 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;
    width: 15em;
    height: 10em;
    background: #ee3e64;
}

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