Academy of Art University

Chopped and CSS

CSS and images chopped from an Illustrator file

In 2006 I came to the Academy of Art University to help produce their new Web site. With a looming deadline I was given one weekend to make the images and CSS from an Illustrator file.

An early version exists on the Internet Wayback Machine.

/* Begin Marketing Redesign Specific Styles */

/*                         */
/* The Main Content Window */
/*                         */

#contentmain {
	position:relative;
	left:5px;
	width:790px;    
	height:100%;
	margin:0px 0px 0px 0px;
        padding:0px 0px 0px 0px;
        background-color:white;
}

/*                */
/* The Main Table */
/*                */

.tablemain {
	position:relative;
	left:0px;
	margin:0px 0px -15px 0px;
	padding:0px 0px 0px 0px;
}

/*                 */
/* Schools Section */  
/*                 */

#schoolsnav {
	position:relative;
	width: 130px;
	margin:15px 0px 0px 20px;
	padding:0px 0px 0px 0px;
}

.school_link {
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing:normal;
	line-height:12px;
        font-weight:bold;
	margin:0px;
	padding:0px 0px;
}

p.block {
	position:relative;
	display:block;
	text-align:right;
        margin:0px 0px 12px 0px;
	padding:0px 0px 0px 0px;
}

a.school_link:link      {color: #000000; font-weight:bold;}
a.school_link:visited 	{color: #000000; font-weight:bold;}
a.school_link:hover 	{color: #ff0000; font-weight:bold; text-decoration:none;}
a.school_link:focus 	{color: #ff0000; font-weight:bold; text-decoration:none;}
a.school_link:active 	{color: #000000; font-weight:bold;}

/*                                    */
/* Main Image Section (Big Pretty)    */
/*                                    */

#bigpretty {
        position:relative;
        border:0px;
        margin:0px 15px 0px 15px;

}

/*                 */
/* Actions Section */
/*                 */

#actionsnav {
        width:155px;
	height: 225px;
        margin: 15px 0px 15px 0px;
}

img.thingone {position:inherit; float:top; top:0px; right:-3px;}
img.thingtwo {position:relative; float:right; top:-14px; right:-4px;}

a.action_link:link 	{color: #000000; font-weight:bold;}
a.action_link:visited 	{color: #000000; font-weight:bold;}
a.action_link:hover 	{color: #ff0000; font-weight:bold; text-decoration:none;}
a.action_link:focus 	{color: #ff0000; font-weight:bold; text-decoration:none;}
a.action_link:active 	{color: #000000; font-weight:bold;}

.action_link {
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing:normal;
	line-height:12px;
}

/*                  */
/* Features Section */
/*                  */

#features_container {
	position: relative;
        top:0px;
        width:420px;
	margin:0px 0px 0px 15px; 
	padding: 0px 0px 0px 0px;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
        line-height:7px;
}

.feature_img {
	position:inherit;
	float:left;
	border:0px;
	margin:0px 0px 0px 0px;
	padding:0px 5px 10px 0px;
	width:75px;
	height:45px;
}

span.feature {
	position:inherit;
	top:0px;
	left:0px;
	font-size: 13px;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
        line-height:15px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

p.feature_caption {
	position:inherit;
	top:0px;
	left:0px;
	text-align:left;
	font-size: 10px;
	font-weight:normal;
	font-family: Arial, Helvetica, sans-serif;
        line-height:130%;
	margin:0px 0px 0px 0px;
	padding:2px 0px 0px 0px;
}


a.feature_link:link 	{color: #000000; font-weight:bold;} 
a.feature_link:visited 	{color: #000000; font-weight:bold;}
a.feature_link:hover 	{color: #666666; font-weight:bold; text-decoration:none;}
a.feature_link:focus 	{color: #666666; font-weight:bold; text-decoration:none;}
a.feature_link:active 	{color: #000000; font-weight:bold;}

a.feature_link_small:link       {color: #000000; font-weight:normal;} 
a.feature_link_small:visited 	{color: #000000; font-weight:normal;}
a.feature_link_small:hover 	{color: #666666; font-weight:normal; text-decoration:none;}
a.feature_link_small:focus 	{color: #666666; font-weight:normal; text-decoration:none;}
a.feature_link_small:active 	{color: #000000; font-weight:normal;}

/*                         */
/* Student Gallery Section */
/*                         */

span.gallery {
	position:inherit;
	top:0px;
	left:-250px;
	font-size: 15px;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	text-align:left;
	margin:0px;
	padding:0px;
}

#gallery img {
	position:relative;
	border:0px;
	padding:10px 0px 0px 0px;
	background-color:transparent;
}

a.gallery_link:link 	{color: #000000; font-weight:bold;} 
a.gallery_link:visited 	{color: #000000; font-weight:bold;}
a.gallery_link:hover 	{color: #ff0000; font-weight:bold; text-decoration:none;}
a.gallery_link:focus 	{color: #ff0000; font-weight:bold; text-decoration:none;}
a.gallery_link:active 	{color: #000000; font-weight:bold;}


.credit {
	position:relative;
	top:0px;
	text-align:left;
	word-spacing:2px;
	font-size: 9px;
	color:#999999;
	font-family: Arial, Helvetica, sans-serif;
}

/* styles for redesign sub-pages */

h1 {font-size:24px; color:#333333; line-height:24px; font-weight:normal; margin:0px; text-decoration:none;}
h2 {font-size:16px; color:#663300; line-height:16px; font-weight:normal; margin:0px; text-decoration:none;}
h3 {font-size:14px; color:#333333; line-height:14px; font-weight:bold; margin:0px; text-decoration:none;}
h4 {font-size:13px; color:#663300; line-height:13px; font-weight:bold; margin:0px; text-decoration:none;}


/* End of Marketing Redesign Specific Styles */

After our successful launch I remained with the Academy full-time. The CSS remained in production until just this summer, a few weeks after I departed.

Since then I managed the Web team, voice acted, managed freelance voice actors, recorded extensive audio and video in the studio, built and repaired course content, shot location camerawork for the media team, wrangled content for audits, and performed countless repairs and rescue operations for Cybercampus.

Here’s a gallery of some of the many images I created for the online student features.

Leave a Reply

Your email address will not be published. Required fields are marked *