<?php
/*
	DETECT THE DEVICE THAT IS VIEWING THE PAGE, THEN DISPLAY THE APPROPRIATE STYLESHEET SECTION
*/
function classify_phone() {
        $type = 'feature_phone';
          
        if ($_SERVER['HTTP_USER_AGENT']) {      
            $url = 'http://webapps.ncsu.edu/wurfl/?method=getDeviceByUserAgent&userAgent=' . urlencode($_SERVER['HTTP_USER_AGENT']) . '&capabilities=mobile_browser';
            
            $result = @file_get_contents($url);
            
            if ($result !== false) {
                $res = simplexml_load_string($result);

                if ($res->getDeviceByUserAgent->id == 'generic_web_crawler') {
                    $type = 'spider';
                } elseif ((string)$res->getDeviceByUserAgent->capabilities->mobile_browser == '') {
                    $type = 'computer';
                } elseif (preg_match('/.*?(Palm|SymbianOS|Windows CE|BlackBerry)/i', $res->getDeviceByUserAgent->userAgent)) {
                    $type = 'smart_phone';
                } elseif (preg_match('/.*?(iPhone|iPod|Aspen Simulator|Android|webOS)/i', $res->getDeviceByUserAgent->userAgent)) {
                    $type = 'iphone';
                }
            }
        }
        return $type;
}
/*
	DETECT THE PHONE TYPE
*/
	$phoneType = classify_phone();
	if($phoneType == 'iphone') { 
/*
	DISPLAY THE STYLES FOR THE IPHONE DEVICE TYPE
*/
?>
    @charset "utf-8";
    /* CSS Document for iPhone Devices */
            
    body {
        background-color: #FFF;	
    }
    
	#topContent {
	   	margin: 10px 10px 5px 10px;	
    }
    
    #ncsu-brand-bar {
        display: none;
    }
    #wrapper {
        width: 100%;	
    }
    #sidebar, #footer {
        clear: both;
        float: left;
        margin: 10px 10px 5px 10px;	
    }
    #main {
        clear: both;
        float: left;
        margin: 0 5px 0 5px;
        padding: 10px 7px 0 7px;
        border: 1px solid #CCC;	
        background-color: #EEEEEE;
    }
    #main h2 {
        border: 1px solid #AAAAAA;	
        display: block;
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
		margin: auto;
        background-color: #BBBBBB;
    }
    #header {
        width: 100%;
        background-color: #CC0000;
    }
    #header h1 {
        display: none;
    }
    #header .logo {
        width:220px;
        height:60px;
        overflow:hidden;
        background:url(../images/brick_home.gif) no-repeat;
    }
    #oit-logo {
        float: right;
        margin-bottom: 20px;
    }
    
    /*
    DIGITAL ID CARD STYLES
    */
    
    #card {
        border:#666 solid 1px;
        font-size:110%;
        padding: 3px;
    }
    
    #cardBlock {
		margin: 10px 10px 5px 10px;	
    }
    
    #aai {
        height:90px;
        display:none;
    }
    
    #aai ul li {
        padding:0;
        margin:0;
        display:inline;
        list-style-type:none;
    }
    
    .attributePair {
        padding: 10px 0 10px 5px;
        min-height: 40px;	
        border-bottom: 1px solid #CCC;
    }
    .attr-name {
        display:inline-block;
        line-height: 24px;
        font-weight: bold;
    }
    
    .attr-value {
        line-height: 24px;
    
    }
    
    .login-field {
        margin: auto;
        padding: 4px;
        margin: 10px 10px 5px 10px;
        background-color:#ccc;
        border:#969696 solid 1px;
    }
    
    /*		classes		*/
    
    .small {
        font-size:100%;	
    }
        
    .indent {
        padding-left:10px;	
    }
	.formLabel, .formInput input, #formSubmit{
    	font-size: 1.4em;
    }
    #attributes-global-consent {
    	height: 30px;
        width: 30px;
    }
    
    #attributes-decline, #attributes-confirm {
    	font-size: 1.5em;
    }


<?php
	} else  { 
	// DISPLAY THE STYLES FOR NON-MOBILE DEVICE TYPES, OR ONE THAT WAS NOT DETECTED BY THE SCRIPT ABOVE
?>
@charset "UTF-8";
/* CSS Document */

/* 	reset	*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, em, font, img, q, s, samp, small, 
strike, strong, sub, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, 
thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

h1 {
	font-size:120%;
	padding:5px 0px;
}

h2 {
	font-size:115%;
	padding:4px 0px;
}

h3 {
	font-size:110%;
	padding:3px 0px;
}

h4 {
	font-size:105%;
	padding:2px 0px;
}

p {
	padding:4px 1px 4px 3px;	
}

li {
	margin-left:20px;	
}


body {
	background:#ffffff;
	font-family:Verdana, Helvetica, Arial, sans-serif;
	font-size:.8em;
    text-align: center;
}

/*		nav		*/

a:link {
	color:#C00;
	text-decoration:underline;
}

a:visited {
	color:#900;
	text-decoration:underline;
}

a:hover {
	color:#900;
	text-decoration:none;
}

a.switchaai {
	color: #203781;
}

/*		layout		*/

#container {
	margin: 0px auto;
    text-align: left;
    width: 850px;
}

#containerController {
	margin: 0 auto;
	width: 850px;
}
    
#header {
	padding:16px 3px;
}

#main {
	padding:8px;
	background:#efefef;
	border:#000 solid 1px;
	color:#333;
	float:right;
	width:545px;
}

#sidebar {
	padding:7px;
	float:left;
	width:264px;
	

}

#loginBlock {
	margin-bottom:14px;
	margin-top:-6px;
	background:#A00;
	border:#000 solid 1px;
	color:#FFF;
    
    line-height:26px;
}
#parentLoginBlock {
	margin-bottom:14px;
	margin-top:-6px;
	background:#000;
	border:#000 solid 1px;
	color:#FFF;
    
    line-height:26px;
}

#loginBlock form {
	padding:6px 3px 12px 8px;
}

#logoutBlock {
	padding:6px 3px 12px 8px;
    background:#A00;
	border:#000 solid 1px;
	color:#FFF;
}

#card {
	margin: 10px auto;
	width:600px;
	border:#666 solid 1px;
	font-size:110%;
}

#cardBlock {
	margin:26px 20px;	
}

#error {
	margin-top:10px;
	padding:4px 3px 4px 5px;
	background-color:#fff;
    border-top:solid 1px #000;
    border-bottom:solid 1px #000;
    color:#000;
    line-height:22px;
}

#parentError {
	margin-top:10px;
	padding:4px 3px 4px 5px;
	background-color:#fff;
    border-top:solid 1px #000;
    border-bottom:solid 1px #000;
    color:#000;
    line-height:22px;
}

#aai {
	height:90px;
	display:none;
}

#aai ul li {
	padding:0;
	margin:0;
	display:inline;
	list-style-type:none;
}

#footer {
	margin-top:20px;
	height:90px;
	font-size:90%;
	line-height:30px;
	clear:both;
	width:850px;
}

/*		classes		*/

.small {
	font-size:85%;	
}

.white {
	background-color:#FFF;	
}

.gray {
	background-color:#efefef;	
}

.indent {
	padding-left:28px;	
}

.login-field {
	padding: 6px;
	margin:12px 0px;
	background-color:#ccc;
	border:#969696 solid 1px;
	width:850px;
}

#container.login-field {
	margin-top:40px;
    line-height:22px;
}
.attributePair {
	clear: both
	float: left;
	height: 24px;
}
.attr-name {
	display:inline-block;
	height: 24px;
	width:225px;
	padding-left:10px;
	line-height: 24px;
	float: left;
	font-weight: bold;
	/*border:#F00 solid 1px;*/
}

.attr-value {
	float: left;
	width: 360px;
	text-align: left;
	line-height: 24px;

}
#oit-logo {
	float: right;
	margin-bottom: 10px;
}

tt {
	font-weight: bold;
	font-size:1.4em;
}

span.switchaai {
	line-height: 30px;
}

input.switchaai {
	border-width: 1px;
	border-style: solid;
	border-color: #888888;
}


<?php }  // END DISPLAY FOR NON-MOBILE DEVICE TYPES ?>