/* ----------------------------------------------------------------------

SLL GLOBAL TOOLBOX STYLES - 2020

This stylesheet is intended to be 'standard' in apps, especially those 
made after Summer 2020. Please override these styles in a subsequent 
stylesheet rather than making direct edits here.

University of California, Irvine
Student Life & Leadership

Summer 2020
Steve Tajiri

---------------------------------------------------------------------- */




/* GLOBAL STYLES ---------------------------------------- */

*											{ font-family:Arial, Helvetica, sans-serif; }
											
img											{ border: 0px; }






/* GENERAL CLASSES ---------------------------------------- */

.bold										{ font-weight:bold; }
.center										{ text-align:center; }
.centerblock								{ margin-left:auto; margin-right:auto; }
.left										{ text-align:left; }
.right										{ text-align:right; }
.top10										{ margin-top: 10px; }
.top20										{ margin-top: 20px; }
.bot10										{ margin-bottom: 10px; }
.bot20										{ margin-bottom: 20px; }
.m0											{ margin: 0px; }
.m10										{ margin: 10px; }
.m20										{ margin: 20px; }
.p0											{ padding: 0px; }
.p10										{ padding: 10px; }
.p20										{ padding: 20px; }
.p30										{ padding: 30px; }
.p40										{ padding: 40px; }
.p50										{ padding: 50px; }
.p100										{ padding: 100px; }

.w50										{ width: 50%; }
.w60										{ width: 60%; }
.w70										{ width: 70%; }
.w75										{ width: 75%; }
.w80										{ width: 80%; }
.w90										{ width: 90%; }
.w94										{ width: 90%; }
.w95										{ width: 95%; }
.w96										{ width: 96%; }
.w97										{ width: 97%; }
.w98										{ width: 98%; }
.w99										{ width: 99%; }
.w100										{ width: 100%; }

.huge										{ font-size:2em; }
.large										{ font-size:1.5em; }
.small										{ font-size:0.9em; }
.tiny										{ font-size:0.8em; }


/* Colors */

.white										{ color:#ffffff; }
.graye										{ color:#eeeeee; }
.grayc										{ color:#cccccc; }
.gray9										{ color:#999999; }
.gray7										{ color:#777777; }
.gray5										{ color:#555555; }
.gray3										{ color:#333333; }
.black										{ color:#000000; }


/* Boxes and Related Effects */

.box										{ padding:8px 12px; background:#1b3d6d; 
												color:#ffffff;
												border-radius:4px;
											}

.colorbox									{ 
												padding:5px 10px; 
												background:#1b3d6d; 
												color:#ffffff; 
											}
.lightbox									{ padding:8px; background:#ffffcc; 
												border: 1px solid #ffd200;
												color:#555555;
												border-radius:4px;
											}

.shadow										{  box-shadow:0px 0px 3px #333333; }
.shadowtop									{  box-shadow:0px -2px 2px -2px #000000; } 	// cp
.shadowbottom								{  box-shadow:0px 2px 2px 0px #AAAAAA; } 	// cp
.tag		 								{	
												-webkit-border-radius: 3px;
												-moz-border-radius: 3px;
												border-radius: 3px;
												display: inline-block;
												padding: 2px 4px;
												color: #ffffff;
												font-size: 11px;
												font-weight: bold;
												line-height: 14px;
												text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
												white-space: nowrap;
												vertical-align: baseline;
												background-color: #f89406;
											}




/* TAG-SPECIFIC CLASSES ---------------------------------------- */


div.caption									{ 
												padding:10px; background: #eeeeee; 
												color:#555555; 
												font-size: 0.8em; 
											}






/* DATA TABLE STYLES ---------------------------------------- 

NOTE : Some table.data and table.tight styles are also defined
in the table.form styles.

------------------------------------------------------------ */

table.data, table.tight						{ border-collapse: collapse; }
table.data caption							{ padding:8px 12px;
												background:#1b3d6d; 
												border-radius:5px;
												color:#ffffff;
												text-align:center;
											}
table.data th,
table.data td,
table.tight th,
table.tight td								{
                                                border: 1px solid #cccccc;
                                                padding: 5px 8px;
                                                color: #666666;
                                            }
table.data th,
table.tight th                               {
                                                background-color: #EEEEEE;
                                                font-weight: normal;
                                                text-align:center;
                                            }


table.tight th,
table.tight td								{
                                                padding: 0px 2px;
                                            }















/* FORM-RELATED STYLES ----------------------------------------

	These styles can be utilized in 3 different ways...

	1. TABLE FORM 				<table class='form'>
	2. DIV FORM					<div class='form'>
	3. LOOSE FORM ELEMENTS		<input type='text' class='form'>
	
	Some of these styles also modify table.data and 
	table.tight form element styles.
		
---------------------------------------------------------------- */


table.form									{ margin: 10px 0px; 
												border-collapse: collapse; 
											}

table.form caption							{ padding:8px 12px;
												background:#1b3d6d; 
												border-radius:5px;
												color:#ffffff;
												text-align:center;
											}

table.form th,
table.form td								{ padding: 1px; color:#777777; font-weight:normal; }
table.form th								{ padding: 3px;  text-align:center; font-weight:normal; }

table.data td label,
table.form th label,
table.form td label,
div.form label								{ 
												font-size:0.9em; 
												font-weight: normal;
											}

div.form label								{ margin:8px 0px 0px 0px; }

table.form td input[type='text'],			/* form text input and textarea */
div.form input[type='text'],
input[type='text'].form,
table.form td textarea,
div.form textarea,
textarea.form
											{ 	margin: 1px;
												margin:0px; padding: 7px;
												border: 1px solid #cccccc;
												border-radius: 4px;
											}

/* form submit button - removed in favor of bootstrap buttons */
/*

table.tight td input[type='submit'],
table.data td input[type='submit'],
table.form td input[type='submit'],			
div.form input[type='submit'],
input[type='sumbit'].form					{ 
												padding: 3px 15px 3px 15px;
												background: #0064a4;
												border: 0px;
												border-radius: 16px;
												color: #ffffff;
												font-size: 0.9em;
											}
table.form td input[type='submit']:hover,
div.form input[type='submit']:hover,
input[type='sumbit'].form:hover				{ background:#cc0000; }

*/

table.tight td fieldset,
table.data td fieldset,
table.form td fieldset,
div.form fieldset							{ padding:5px 7px; 
												border: 1px solid #cccccc;
												border-radius: 4px;
											}
table.tight td fieldset legend,
table.data td fieldset legend,
table.form td fieldset legend,
div.form fieldset							{ margin:auto; padding:0px 5px; display:inline;
												border:0px;
												width:auto;
												color:inherit;
												font-size:0.9em;
											}


												
div.field									{ 
												margin: 7px 0px; padding:0px 3px;
											}
											
div.field label								{ 
												margin:0px; padding:1px 20px 0px 1px; 
												background:#ffffff;
												border-top-left-radius: 4px; 
												border-top-right-radius: 4px; 
												color:#777777; 
												font-size: 0.9em;
												display:block;
											}
div.tlbox									{ 
												width:90%; margin:0px;
												padding: 7px 0px 7px 12px;
												border: 1px solid #cccccc;
												border-radius:4px;
												font-size: 0.9em;
												color: #777777;
											}







/* ID CLASSES ---------------------------------------- */