/*
Rajia M. Abdelaziz, Rajia.Abdelaziz@gmail.com, UMass Lowell Undergraduate 
    Enrolled in 91.461 GUI Programming
Created by RMA on November 8, 2015 at 1:00 PM
Last Updated: 11/27/15 at 11:19 a.m

This is an external style sheet created to allow assignment 7 to have an 
appealing style. 
*/

/*
All the h1 headers should use a unique font from Google and should be aligned 
in the center of the page. h1's should also have a white color with a purple
background. 
*/
h1
{
    font-family: 'Slabo 27px', serif;
    text-align: center;
    font-size: 40px;
    color: white;
    background-color: purple;    
}

/*h3 should use a unique Google font and be italic.*/
h3
{
    font-family: 'Slabo 27px', serif;
    font-style: italic;
}

/*h2 headers should have a light purple border to seperate important content */
h2
{
    font-family: 'Slabo 27px', serif;
    border-bottom: 2px solid #BF5FFF;
}

/* Labels should be bold and alligned to the left! The labels of the text should
be purple*/
.label{
    color: purple;
    font-weight: bold;
    text-align: left;
}

/* Divs should use a unique Google font and have a 5% margin on the left*/
div{
    font-family: 'Slabo 27px', serif;
    margin-left: 5%;
}

/*The Interactive Table should have blue violet font color and use a unique Google font */
#interactiveTable{
    color:blueviolet;
    font-family: 'Slabo 27px', serif;
    border: 1px solid black;
    margin-left: 10%;
}

/*Table headers should have a black background and white font*/
th{
    height: 50px; 
    background-color: black;
    color: white;
}

/*Rows identified with the class header alt should have a light purple 
background color and white font.*/
#alt{
    color: white;
    background-color: #BF5FFF; /* Light Purple Color */
}
#header{
    color: white;
    background-color: black;
}

/*The errors should be displayed 15 pixels to the left of the fild to which they're describing. 
They should be bold and the color purple to match the theme of the page. */
label.error{
    color: purple;
    font-weight: bold;
    margin-left: 15px;
}

/*The fields with errors should have a red 1 px solid border and a gray background.
This styling technique is modeled after ones described on pg.108 of JavaScript & 
jQuery by David Sawyer McFarland. */
input.error, select.error, textArea.error{
    border: 1px red solid;
    background-color: gray;
}

/*The warnings that tell the user that values have been swapped should be purple 
and should have 15 pixel margins to the left and bottom of their edges.*/
.textAlert{
    color: purple;
    margin-left: 15px;
    margin-bottom: 15px;
}

/*Styling the Sliders*/
.customsliders{
    width: 285px;
}
#tip{
    margin-left: 300px;
    position:absolute; display:inline; padding:5px 0;
    width: 50px; text-align: center; font: bold 10px Verdana;
}

/*Styles for the tabs and components of the dialog*/
#dialog label, #dialog input { 
    display:block; 
}
#dialog label { 
    margin-top: 0.5em; 
}
#dialog input, #dialog textarea { 
    width: 100%; 
}
#tabs { 
    margin-top: 1em; 
}
#tabs li .ui-icon-close { 
    float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; 
}
#add_tab { 
    cursor: pointer; 
}